This Binding 유형

  This란 함수 호출 시 실행컨텍스트가 생성되며 자동으로 Binding 되는 값으로, 호출된 함수가 속한 객체를 의미한다. This의 값은 함수 호출 방법에 따라 다르게 호출된다.

 

1. New Binding

function Cat(name) {
  this.name = name;
  this.say = function() {
    console.log(`${this.name} says nyang!`);
  }
}

const nabi = new Cat('nabi');
nabi.say(); // nabi says nyang!

  new 키워드로 함수 호출 시 new 연산자가 빈 객체를 메모리 상에 생성 후 this에 바인딩 시킨다. 함수를 실행시키며 this의 속성을 채운 후 함수가 리턴하는 것이 없다면 만들어진 this가 리턴된다. 즉, new 키워드로 반환된 인스턴스의 메서드 호출 시 메서드 내의 this는 인스턴스를 가리킨다.

 

2. 명시적 바인딩

const nabi = new Cat('nabi');

nabi.say(); // nabi says nyang!
nabi.say.call({name: 'nana'}); // nana says nyang!

Math.max(1, 3, 5, 7, 9) //원래 Math.max 사용방법
Math.max.apply(null, [1, 3, 5, 7, 9]);

  call, apply, bind를 이용하여 함수 내의 this가 무엇을 가리킬지 지정할 수 있다. call, apply는 함수에 this를 지정하여 호출하는 것이고, bind는 this를 지정한 함수를 생성하는 것이다. prototype과 함께 사용하여 유사배열에서 배열 메소드를 사용할 때 사용하기도 한다.

 

3. 암시적 바인딩

var obj = {
  name: "ihl",
  hello: function(){
    console.log(this);
  },
}

obj.hello(); // {name: ihl, hello: f}

  객체의 프라퍼티인 함수 호출 시 . 왼쪽에 있는 객체가 this가 된다. . 연산의 결과로 참조 타입 객체를 반환하기 때문이다. 참조 타입 객체는 (객체, 속성 이름, 엄격 모드 여부)로 구성된다.

 

4. 기본 바인딩

function hello() {
  console.log(this)
}

var obj = {
  name: "ihl",
  hello: hello,
}

obj.hello(); // 암시적 바인딩에 의해 {name: ihl, hello: f}

hell(); // 기본 바인딩에 의해 window

var fn = obj.hello; // fn에 할당 후 호출하면 .연산이 사라진다.
fn(); // 기본 바인딩에 의해 window

function callFn(cb){ // cb에 할당 후 호출하면 .연산이 사라진다.
  cb();
}

callFn(obj.hello) // 기본 바인딩에 의해 window

  위의 케이스가 아니라면 전역객체(window)가 바인딩된다. 단, strict 모드라면 undefined 가 바인딩된다. setTimeout의 콜백 함수의 this가 window를 가리키는 것도 같은 원리이다.

 

5.thisArg

  array.prototype.filter와 같은 함수는 this를 인자로 받아 콜백함수 내의 this를 지정할 수 있다. thisArg를 null이나 undefined로 준다면 this는 전역 객체를 가리킨다.

 

6. HTML 이벤트 등록

const div1 = document.querySelector("#test1");
const div2 = document.querySelector("#test2");

div1.addEventListener("click", function() {
  div2.textContent = this.textContent; // this = div1
})

  DOM Element에 addEventListener로 이벤트 처리함수를 등록했을 때 처리 함수 내의 this는 이벤트가 발생한 DOM element를 가리킨다.

 

7. 화살표 함수

var name = "global";

function getName(){
  setTimeout(() => console.log(this.name));
}

var obj = {
  name: "obj",
  fn: getName
}

  화살표함수는 자신의 this를 갖지 않으므로 스코프 체이닝에 의해 가까운 외부의 this를 가져온다.