[JavaScript]-this,call,apply,bind

안녕하세요 오늘은 This, bind, apply, call에 대해서 알아보도록 하겠습니다.

---

1. This

 this의 값은 함수를 호출하는 방법에 의해서 결정됩니다.

아래 코드를 확인해 보도록 하겠습니다.

console.log(this.document === document); // true

console.log(this === window); // true

this.a = 37;

console.log(window.a); // 37

전역 실행 컨텍스트(어떤 함수의 외부)에서는 this는 전역 객체를 나타냅니다. 따라서 이 context에서 this 키워드를 사용한다면 window  객체를 사용하겠다는 의미가 됩니다.

그럼 전역객체가 아니라 다른 객체를 의미할 경우는 어떤 경우일까요? 한 예를 보겠습니다

var o = { prop: 30 };

function _function() {

  return this.prop;

}

o.f = _function;

console.log(o.f()); // return 30

이 context에서 this 키워드가 가리키는 것은 객체 o가 됩니다. 함수 _function의 레퍼런스가 o 오브젝트의 f 프로퍼티에 저장이 되면서 _function객체를 통해서 호출이 되고 있는 상황이기 때문입니다.

아래의 예시를 몇개 더 보겠습니다.

var k = {

  name: "kim",

  first: 10,

  second: 20

};

var l = {

  name: "lee",

  first: 20,

  second: 20

};

function sum() {

  return this.first + this.second;

}

k.s = sum; 

l.s = sum;

console.log(k.s()); // return: 30

console.log(l.s()) // return: 40

k.s = sum을 하게 되면 

var k = {

  name: "kim",

  first: 10,

  second: 20,

  s: function() {

    return this.first + this.second;

  }

};

위의 예시 코드처럼 변하게 되어 console.log(k.s())를 하게 되면 30이 출력되는것을 확인하실수 있습니다.

2.Call 

var kim = { name: "kim", first: 10, second: 20 };

var lee = { name: "lee", first: 10, second: 10 };

function sum() {

  // this = kim

  return this.first + this.second;

}

// sum();

console.log(sum.call(kim)); // return 30

call 메소드는 다른 객체 대신 메소드를 호출하는데 사용됩니다. 이 메서드를 사용하여 함수의 this 객체를 원래 컨텍스트에서 kim으로 지정된 새객체로 변경할 수 있습니다.

3. apply

var kim = { name: "kim", first: 10, second: 20 };

var lee = { name: "lee", first: 10, second: 10 };

function sum() {

  // this = kim

  return this.first + this.second;

}

// sum();

console.log(sum.apply(null, [(first = 10), (second = 20)])); // return 30

call 메소드와 동일 하나, call 메소드는 인자 하나 하나를, apply는 인자 리스트를 전달합니다.

call과 apply의 차이점은

call 메소드와 동일 하나, call 메소드는 인자 하나 하나를, apply는 인자 리스트를 전달합니다.

4. Bind

var kim = { name: "kim", first: 10, second: 20 };

var lee = { name: "lee", first: 10, second: 10 };

function sum() {

  // this = kim

  return this.first + this.second;

}

var kimSum = sum.bind(kim);

console.log(kimSum());

this의 값을 바꿀 수 있는 bind입니다. bind를 사용하면 함수의 this 값을 영구히 바꿀 수 있습니다. update 메서드를 이리저리 옮기면서 호출할 때 this 값은 항상 고정 되게끔, call이나 apply, 다른 bind와 함께 호출하더라도 this 값이 고정 되도록 하려면 bind를 사용한다.