[Javascript this와 바인딩]

this 와 바인딩

Javascript의 this 키워드는 다른언어와는 조금 다르게 작덩혼다. 그리고 엄격(strick)모드와 비엄격모드에서도 차이가 있다. 대부분의 경우 this의 값은 함수를 호출하는 방법에 의해 결정된다. ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind Method를 도입했다.

// MDN Javascript this 예시

const test = {
	prop: 42,
  	func : function () {
    return this.prop
    },
};

console.log(test.func()) // 42

Global context

전역컨텍스트에서는 this는 in strict mode or not와는 상관없이 전역객체를 참조한다

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

a = 40 ; 
console.log(window.a) // 40

Function context

함수컨텍스트에서의 this는 함수가 어떻게 호출되었느냐에 따라 this의 값이 달라진다.

비엄격모드에서의 this 값은 호출에의해 정해지지 않았기 떄문에 this는 기본적으로 전역 객체를 참조하게된다.

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

엄격모드라고 하더라도 this 값이 실행컨텍스트에 들어갈때 설정되는 값을 유지하므로 아래의 예시에서의 this의 값은 undefinded가 된다.

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

bind() Method

this가 무엇인지 명시적으로 바인딩을 해줄 수 있다. Arrow function에서는 작동하지 않는다.

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()); // azerty <---bind

var h = g.bind({a: 'yoo'}); // bind는 한 번만 동작함!
console.log(h()); // azerty

var o = {a: 37, f: f, g: g, h: h};
console.log(o.a, o.f(), o.g(), o.h()); 
// 37, 37, azerty, azerty

[참조 MDN this]