09Jan2020 TIL

Functional Bind Checkpoint

 

windowTimers.setTimeout() 의 this 특징

setTimeout()에 의해 실행된 코드는 별도의 실행 컨텍스트에서 setTimeout이 호출된 함수로 호출됩니다.  호출된 함수에 대해서는 this 키워드를 설정하는 일반적인 규칙이 적용되며, this를 설정 혹은 할당하지 않은 경우, non-strict 모드에서 전역(혹은 window) 객체, strict모드에서 undefined를 기본 값으로 합니다. (출처 : mdn)

---

2번 - What message will eventually be alerted? After how long?
var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };

setTimeout(alice.sayHi, 1000);

=> 1초 후, Window says hi

 

---

Wrapper function 으로 처리된 경우 

//1번 - What message will eventually be alerted? After how long?
var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };

setTimeout(function() {
  alice.sayHi();
}, 1000);

=> 1초 뒤  "Alice says hi" 

 

---

Arrow Function으로 처리된 경우

//1번 - What message will eventually be alerted? After how long?
var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };

setTimeout(()=> {
  alice.sayHi();
}, 1000);

=> 1초 뒤  "Alice says hi" 

 

---

.bind() 로 묶인 경우

5번 - What message will eventually be alerted? After how long?
var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };

setTimeout(alice.sayHi.bind(bob), 1000);

=> 1초 후, Bob says hi

 

---

.call() 로 묶인 경우

6번 - What message will eventually be alerted? After how long?
var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };

setTimeout(alice.sayHi.call(bob), 1000);

=> Bob says hi 바로 실행

 

 

---

9번 - What message will eventually be alerted? After how long?
var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };


alice.sayHi.bind(bob);

setTimeout(alice.sayHi(), 1000);

=> Alice says hi 즉시 실행

 

---

Callback

//6번 - After the following code runs and all setTimeout callbacks run, what will be the value of result?
function foo () {

  var data = 10;

  bar(function (players) {
    data = players;
  });

  return data;
}

function bar (callback) {
  setTimeout(function () {
    callback(20);
  }, 500);
}

var result = foo();

=> 10 (bar의 실행이 setTimeout으로  delay 되면서 data = 10을 리턴)

 

---

setTimeout(callback, 0) ; 한 템포 늦게 실행됨

function foo () {

  var data = 10;

  bar(function (players) {
    data = players;
  });

  return data;
}

function bar (callback) {
  setTimeout(callback, 0);
}

var result = foo();

=> 10; 

 

 

---

Reference

5번 - 다음 코드를 실행한 후, result 의 값은 무엇이 될까요?
var obj1 = { x: 10 };

var obj2 = Object.create(obj1);
var obj3 = Object.create(obj1);

obj1.x = 15;

var result = obj2.x + obj3.x;

=> 15+15 = 30 (obj1.x 가 변화하면서  obj1의 주소를 참조하는 obj2와 obj3도 함께 변화했다.)

let obj = Object.create(참조할 주소)

---

this

var x = 10;
var strangeAdd = function (y) {
  var x = 20;
  return this.x + y
};

result = strangeAdd(10);

this.x+y 의 this는 window라 20이 답

 

---

var obj = {
  foo: function(){
    console.log(this);
  }
}

var fn = obj.foo;
fn();

fn 이 실행되면서  obj.foo의 주소만 가져오고 this는 fn의 this인 window가 출력

 

 

---

functional / functional shared / prototypal  =>  new 생성자 사용할 수 없다.

functioncal => this 사용할 수 없음.