js this

1번, 2번 경우

global이나 function 실행시의 this는 window를 가리킨다.

var name = 'Global Variable';
console.log(this.name);

function foo() {
  console.log(this.name);
  }
foo();

둘의 this.name은 서로 같은 "Global Variable"

3번 경우

method 안의 this는 직계 부모 오브젝트를 가리킨다.

let obj = {
  hello: {
    fn: function() {console.log(this);}
  }
  foo: function() {console.log(this);}
}

obj.hello.fn() -> hello를 가져옴.
obj.foo(); -> obj를 가져욤.

다른 오브젝트에서 호출하였을 경우, 본인이 실행된 시점에서의 부모 오브젝트를 가져온다.

let obj 2 = {
  method: obj.foo
}

일 경우 obj2.method() === obj2

function 안의 this가 window를 가리키는 이유는 function의 부모가 window 때문이라 생각하면 된다.

4번 경우

new로 생성한 function 영역의 this(Construction mode)
다른 언어의 this와 비슷하다.

function Car(brand, name, color){
  this.brand = brand;
  this.name = name;
  this.color = color;
}

let avante = new Car('현대', '아반떼', '블랙');

예를 들어 위 코드에서의 this는 avante가 된다.

5번 경우
.call 혹은 .apply 호출.

foo() //function invocation
window.foo() //method invocation
new foo() //construction mode
foo.call()
foo.apply()

function bar(){
  console.log(this);
}
var obj = {hello: 'world'}
bar.call(obj);

위 코드에서 this는 obj가 된다.
this를 명시적으로 넘길 때 .call을 쓴다.
.call로 넘겨준 값이 this가 된다.

.apply는 매개변수가 여러개일 때 배열로 넘겨주고 call은 그냥 쉼표로 구분해서 넘겨준다.

let add = function(x,y){
  this.val = x + y;
}
let obj = {
  val: 0
};

add.apply(obj, [2, 8]);
console.log(obj.val); //10
add.call(obj, 2, 8);
console.log(obj.val); //10