JavaScript_Study [ this ]

2021-09-18 노션페이지
기록된 노션을 다시 정리

어려웠던 부분

• 내부함수에서의 this
  - 아래 중요 부분 작성
• apply(), call() 방식의 호출
• 호출된 곳이 기준!!

함수 호출 방식과 this 바인딩

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다.
=> 앞서 포스팅한 렉시컬scope와 반대의 개념이다.
함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

1. 함수호출

• 기본적으로 this는 전역객체(Global object)에 바인딩된다.
• 전역함수는 물론이고 심지어 내부함수의 경우도 this는 외부함수가 아닌 전역객체에 바인딩된다.

  !!!!중요부분!!!!
  내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관게없이 this는 전역객체를 바인딩한다.

  • 메소드의 내부함수일 경우에도 this는 전역객체에 바인딩된다.
  • 콜백함수의 내부함수일 경우에도 this는 전역객체에 바인딩된다.

ex)

var value = 1;

var obj = {
  value: 100,
  foo: function() {
    //메소드는 호출 객체에 바인딩
    console.log("foo's this: ",  this);  // obj
    console.log("foo's this.value: ",  this.value); // 100
    function bar() {
      // 내부 함수는 전역객체에 바인딩
      console.log("bar's this: ",  this); // window
      console.log("bar's this.value: ", this.value); // 1
    }
    bar();
  }
};

obj.foo();

2. 메소드 호출

• 메소드 내부의 this는 해당 메소드를 소유한 객체, 즉 해당 메소드를 호출한 객체에 바인딩된다

var obj1 = {
  name: 'Lee',
  sayName: function() {
    console.log(this.name);
  }
}

var obj2 = {
  name: 'Kim'
}

obj2.sayName = obj1.sayName;

obj1.sayName();  // 'Lee'
obj2.sayName();  // 'Kim'

3. apply/call 호출

• 암묵적 this 바인딩 이외에 this를 특정 객체에 명시적으로 바인딩하는 방법

apply() 메소드

• 첫번째 인자: 바인딩할 객체
• 두번째 인자: 호출함수의 인자 (배열 형태)

var Person = function (name) {
  this.name = name;
};

var foo = {};

// apply 메소드는 생성자함수 Person을 호출한다. 이때 this에 객체 foo를 바인딩한다.
Person.apply(foo, ['name']);

//apply를 사용하지 않고 호출했을 경우 전역에 바인딩되어
// window.name : 'name' 으로 됐을 것
console.log(foo); // { name: 'name' }

call() 메소드
apply()와 기능은 같지만 apply()의 두번째 인자에서 배열 형태로 넘긴 것을 각각 하나의 인자로 넘긴다.

Person.apply(foo, [1, 2, 3]); // 배열 형태

Person.call(foo, 1, 2, 3); // 하나씩 그냥

참조: poiemaweb.com