this의 바인딩

📌 You don't know JS와 https://poiemaweb.com/ 를 참고하여 작성한 글입니다.

1. 기본 바인딩

function foo() {
	console.log(this.a);
}

var a = 2;

foo(); // 2

2. 암시적 바인딩

fuction foo() {
	console.log(this.a);
}

var obj = {
	a: 2,
	foo: foo
}

obj.foo(); // 2

3. 명시적 바인딩

this를 지정한 객체로 직접 바인딩 하므로 '명시적 바인딩'이라고 한다.

function foo() {
	console.log(this.a);
}

var obj = {
	a: 2
}

foo.call(obj); // 2

call과 apply 차이점

apply()메소드의 경우, call()와 기능은 같다. apply()는 두번째 인자에서 배열 형태로 넘기고, call()은 각각 하나의 인자로 넘긴다.

Person.apply(foo, [1, 2, 3]);
Person.call(foo, 1, 2, 3);

그러면 bind는 무엇일까?

bind()는 함수를 호출하지않고 새 함수를 반환한다.

function foo() {
	console.log(this.a);
}

var obj = {
	a: 2
}

var bar = foo.bind(obj);
bar(); // 2

4. new 바인딩

function foo() {
	this.a = a;
}

var bar = new foo(2);
console.log(bar.a); // 2

여러개의 규칙이 중복으로 해당될때는 어떻게 할까? 그래서 우선순위가 미리정해져있다.

명시적 바인딩 > new 바인딩 > 암시적 바인딩 이다.