JS - this & bind

This

javascript 에서 함수의 this 키워드는 다른 언어들과 비교하여 조금 다르게 동작하며,

대부분의 경우 this의 값은 함수를 호출하는 방법에 의해 결정된다고 한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

this - JavaScript | MDN

 

여기서 this가 함수를 호출하는 방법에 의해 결정된다는 말에 집중해보자.

// 예시 객체
let ex = {
  is : "this!",
  test1 : function(){
    console.log(this)
  }
}

ex.test1() // 1.

// { is: 'this!', test1: ƒ test1() }



let test2 = ex.test1()

test2() // 2.

// Window [global] { window: [Getter] self: [Getter/Setter],...}

 

위 코드는 동일한 함수에서, 함수가 호출하는 방법에 따라 this가 어떤 식으로 동작하는지 파악하기 위해 작성된 코드이다.

1번의 경우, test1 을 호출한 함수는 'ex'이기 때문에 'ex' 자체가 출력된 것이고,

2번의 경우, test2 의 결과로 'window'와 관련된 객체가 출력되게 되는데, window 는 전역 객체(=글로벌 객체)로써

모든 변수들을 포괄하는 객체이기 때문에 그렇다.  (사실 window가 기본값이라는 이유로 생략된 것일 뿐이라는 것.)

따라서 호출하는 객체 == this 라는 공식이 성립될 수 있다.

 

Bind

bind 는 호출하는 객체에 따라 말괄량이처럼 변화하는 this 를, 그 말마따나 묶어주는 역할을 한다.

예를 들어, this가 'ex' 객체를 기준으로만 작동하기를 바란다면, 아래와 같이 사용할 수 있다.

// 예시 객체
let ex = {
  is : "this!",
  test1 : function(){
    console.log(this)
  }
}

ex.test1() 
// { is: 'this!', test1: ƒ test1() }


let test2 = ex.test1()


let test3 = test2.bind(ex)  // this가 ex에서만 사용되게끔 bind

test3()
// { is: 'this!', test1: ƒ test1() }

 

그리고 이 결과, ex.test1() & test3() 두 함수는 같은 값을 출력하게 된다.

 

 

도움 받은 유튜브 채널 : https://youtu.be/PAr92molMHU // 코드종