this와 binding

참고문서  : https://bohyeon-n.github.io/deploy/javascript/this.html

자바스크립트 this, bind 그리고 화살표 함수 | 구보현 블로그

this란?

• this는 생성자 혹은 메소드에서 객체를 가리킬 때 사용하는 키워드입니다.
• this는 어떠한 문맥이냐에 따라서 그 값이 바뀝니다.

 

Global Scope에서 사용될 때

const rootScope = "root";
console.log(this.rootScope) // undefined (windowScope)

this는 전역 객체를 가리킵니다.

 

함수에서 사용될 때

const rootScope = "root";
const functionScope = function () {
  console.log(this.rootScope); // undefined (windowScope)
};

this는 전역 객체를 가리킵니다.

 

객체에 속한 함수에서 사용될 때

const objectScope = {
  scope: "object",

  getScope: function () {
    console.log(this.scope); // object (objectScope)
  },
};

this는 메소드가 속한 객체를 가리킵니다.

 

객체에 속한 함수의 내부함수로 사용될 때

const objectScope = {
  scope: "object",

  getScope: function () {
    const innerFunc = function () {
      console.log(this.scope); // undefined (windowScope)
    };
  },
};

this는 전역 객체를 가리킵니다.

 

생성자에서 사용될 때

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
const rectangle = new Rectangle(100, 200);
console.log(rectangle); // Rectangle { height: 100, width: 200 }

this는 생성자로 인해 생성된 새로운 객체를 가리킵니다.

 

화살표 함수에서 사용될 때

const objectScope = {
  scope: "object",

  getScope: function () {
    const arrowScope = () => {
      console.log(this.scope); // object (objectScope)
    };
  },
};

함수가 정의된 스코프에 존재하는 this를 가리킵니다.

 

this가 가르키는 객체를 바꾸고 싶은경우 (Binding)

this는 문맥에 따라서 가르키는 객체가 달라지기 때문에 원하는 this시에 원하는 객체를 가르키게 만들고 싶을때가 있을 것이다.
그럴때 사용하는 것이 Binding (bind, call, apply) 이다.

const objectScope = {
  scope: "object",

  getScope: function () {
    const innerFunc = function () {
      console.log(this.scope); // undefined (windowScope)
    };

    const innerFuncCallBind = function (param) {
      console.log(this.scope, param); // object param (objectScope)
    };
    const innerFuncApplyBind = function (param) {
      console.log(this.scope, param); // object param (objectScope)
    };
    const innerFuncBind = function (param) {
      console.log(this.scope, param); // object param (objectScope)
    };

    innerFuncCallBind.call(this, "param");
    innerFuncApplyBind.apply(this, ["param"]);
    const bindFunc = innerFuncBind.bind(this);
    bindFunc("param");
  },
};

 

• 기존의 innerFunc 함수의 scope를 현재 objectScope에 binding 시키는 3가지 방법입니다.
• call과 apply의 경우 첫번째 인자에 this로 호출될 객체 두번째 인자에는 파라미터를 넘겨서 사용합니다.
• apply의 경우 call과 다르게 파라미터를 모두 배열에 넣어야합니다.
• bind의 경우 함수를 실행하지 않고, 바인딩된 함수를 새로 생성하여 사용합니다.