[2019.04.06] this, setTimeout Check point정리

# 1

var name = "Window";
var alice = {
  name:"Alice",
  sayHi:function(){
      alert(this.name + "say hi";
  }
};
var bob = {name : "Bob"};
setTimeout(function(){
  alice.sayHi();
}, 1000);

9번째 줄에서 function() {} 으로 감싸주고 실행시키기 때문에 1초뒤에 실행됨. 1초 뒤에 alice의 속성인 sayHi 함수를 실행시키므로 this는 Alice.

# 2

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
setTimeout(alice.sayHi, 1000);

9번째 줄에 alice.sayHi가 함수를 실행시키지 않고 그냥 넘겨준다. 그냥 넘겨주면 이와 같음.

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
setTimeout(function(){
  alert(this.name + "say hi");
}, 1000);

그러므로 1초 뒤에 실행 .this는 window

# 3

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
setTimeout(alice.sayHi.bind(alice), 1000);

bind를 하면 alice를 this로 바인딩 시킨 후, 해당 실행함수를 반환해준다. 그래서 1초 뒤에 Alice says hi

# 4

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
setTimeout(alice.sayHi(), 1000);

9번째 줄에 alice.sayHi를 바로 실행시키므로 1초 기다리지 않고 바로 실행, alice속성에서 바로 실행시키므로 'Alice says hi'

# 5

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
setTimeout(alice.sayHi.bind(bob), 1000);

9번째 줄에 bob을 this로 바인딩 함. 바인딩한 값을 1초뒤에 실행시킴. Bob says hi

# 6

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
setTimeout(alice.sayHi.call(bob), 1000);

call은 실행할 함수를 반환해 주지 않고 바로 실행시키고, bob을 this로 바인딩 해주므로, 1초리를 기다리지 않고 바로 bob says hi출력

#7

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
bob.sayHi = alice.sayHi
 
setTimeout(bob.sayHi, 1000);

우선 11번 줄에서 함수를 실행시키는 것이 아닌 함수를 참조하므로 1초 뒤에 실행, 1초 뒤에는 this가 window를 가르킴 wind says hi

#8

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
var sayHi = alice.sayHi.bind(bob)
 
setTimeout(function () {
  window.sayHi()
}, 1000);

9번 줄에서 bob을 this로 바인딩함. 11~13번째 줄에서 function(){}로 감싸주고 12번 줄에서 실행시키므로 1초 뒤에 실행. window에 전역변수 sayHi가 실행되므로, 답은 1초 뒤에 bob says hi

#9

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);

10번 줄에 bob으로 바인딩은 했으나, 실행함수를 받는 변수가 없음. 12번 줄에 함수를 바로 실행 시키고 alice에 의해 실행되므로 답은 Alice says Hi