this 마지막 정리를 해본다
This 값을 결정하는 상황
✨ 고정 값
1. 전역공간에서 this를 호출했을 때 : 전역공간에서 this는 처음부터 호출이 되기 때문에 값이 정해져있다.
- 브라우저 > widow(window라는 전역객체)
- node.js > global(global라는 전역객체)
2. call(), apply(), bind() 메서드 : 명시적인 this binding
- call() 메서드 : 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령.
- 함수를 그냥 실행하면 this는 전역객체를 참조하지만 call 메서드를 이용하면 임의의 객체를 this로 지정할 수 있다 -> 명시적 바인딩
let func = function(a, b, c) {
console.log(this, a, b, c);
}
func(1, 2, 3); // window{..} 1 2 3
func.call({ x : 1 }, 4, 5, 6 ); // {x: 1} 4 5 6
func.call({ x: 1, y:2}, 6, 7, 8);
- apply()메서드 : apply() 메서드는 call 메서드와 기능적으로 완전히 동일. 다만, apply 메서드는 두 번째 인자를 배열로 받아서 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다는 차이점이 있다
let func = function(a, b, c) {
console.log(this, a, b, c);
}
func.apply({x:1}, [4, 5, 6]); // {x: 1} 4 5 6
- bind() 메서드 : call 메서드와 비슷하지만 즉시 호출하지는 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드이다. 즉 bind 메서드는 함수에 this를 미리 적용하는 것과 부분 적용 함수를 구현하는 두 가지 목적을 모두 지닌다.
let func = function (a, b, c, d) {
console.log(this, a, b, c, d);
};
func(1, 2, 3, 4); // Window {…} 1 2 3 4
let bindFunc1 = func.bind({ x: 1 });
bindFunc1(5, 6, 7, 8); // {x: 1} 5 6 7 8
let bindFunc2 = func.bind({ x: 1 }, 4, 5);
bindFunc2(9, 10); // {x: 1} 4 5 9 10
✨ 변동 값
1. 함수 호출시 : 함수를 호출했을 때 함수 내부에서 this는 어떻게 될까?
(1) ES5 : 함수 내부의 this는 언제나 전역 객체를 가리킨다(암기)
- 전역함수 뿐 아니라 중첩함수를 호출하는 경우도 함수 내부의 this에는 전역 객체가 바인딩. -> 버그라고 보는 사람들도 있었음 ❓ -> ES6에 화살표함수로 개선
function a () {
console.log(this);
}
a(); // window
>> 함수 a()을 호출하는 순간에 전역공간에서 호출한 것이다.
누가 호출한 것? 호출한 대상이 전역객체가 되는 것. function b () {
console.log(this);
function c () {
console.log(this);
}
c(); >> 호출한 주체가 b()일 것 같은데, c()도 값이 전역 객체로 출력된다.
}
b(); // window, window
let d = {
e : function() {
function f() {
console.log(this);
}
f(); // window (함수로써 호출했기 때문에 전역객체)
}
}
d.e();
>>>
(2) ES6 : arrow funcion
- 화살표 함수 : ES5의 이의제기를 수렴하여 ES6부터는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 화살표 함수를 추가함.
함수의 호출 방식으로 결정되는 동적 방식이 아닌 화살표 함수의 this는 언제나 상위 스코프의 this를 가리키는 것입니다. 이를 Lexical this라 합니다.
2. 메서드 호출시 : 메서드를 호출한 주체(메서드명 앞)를 보면 된다. 메서드 명의 '점' 바로 앞에 있는 애가 this가 된다.
let a = {
b : function() {
console.log(this);
}
}
a.b();
> a : this
b() : 메서드
- b : 원래는 함수인데, 어떤 객체와 관련된 동작을 하게 되어서 "메서드"가 됨
let a = {
b : {
c : function() {
console.log(this);
}
}
}
a.b.c();
> a.b : this
c() : 메서드
- 점은 대괄호 표기법으로도 표현할 수도 있다
obj.func();
obj['func']();
person.info.getName();
person.info['getName']();
person['info'].getName();
person['info']['getName']();
3. 생성자함수 호출시 (new 연산자를 썼을 때)
- 생성자 함수의 내용을 바탕으로 인스턴스 객체를 만들었다 => 이 경우는 새로 만드는 인스턴스 객체 자체가 this가 됨
function Person(n, a) {
this.name = n;
this.age = a;
}
let roy = Person('재남', 30);
console.log(window.name, window.age); // 재남 30
-> new 연산자 없이 함수로 Person을 출력하면 전역객체.name, 전역객체.age
let roy = new Person('재남', 30);
console.log(roy);
-> new를 넣은 채로 호출하면 생성자 함수로서 호출한 거니까 roy라고 하는 이 변수 새로 생성될 person의 인스턴스 객체자신이 this가 되니까 this.name에 재남, this.age 30
♪(^∇^*) 워-후!!（＾∀＾*）ﾉｼ