심화학습 : Apply / Call / Bind

기억해야 할 부분.

 

• 내장 함수와 전역변수, 일반 함수  : window 객체에 바인딩
• 객체에 메서드에 선언된 this : 메서드를 호출한 객체
• 생성자 함수의 this : 생성자 함수로 만들어낸 객체

new 연산자의 유무에 따라 생성자 함수, 일반함수로 나뉘며 이는 즉 binding 할 객체가 달라진다는 것을 뜻한다.

 

new 연산자 : 만들어낸 객체에 바인딩

일반함수 : widow 객체( 전역객체 ) 에 바인딩.

---

Binding 이란 this 를 알맞은 객체로 바꿔사용한다는 것을 뜻한다.

 

 

call, apply 메서드 사용 시에 정의 해야할 부분.

• 어떤 객체에 바인딩할 것인가
• 함수의 인자는 무엇인가.
• 바로 call하는 함수인가?

call , apply 의 차이점은 인자를 어떻게 넣는 지의 차이이다. apply 메서드는 바인딩 객체 뒤에 [](array) 로 인자를 정의한다.

const obj = {name:'Tom'}

const say = function(city) {
    console.log(`Hello, my name is ${this.name}, I live in ${city}`);
} 


say('seoul')
 Hello, my name is , I live in seoul
 
 
 ///call
say.call(obj,'seoul');
 Hello, my name is Tom, I live in seoul
 
 ///apply
 say.apply(obj,['seoul']);
 Hello, my name is Tom, I live in seoul

---

Bind 함수는 객체에 바인딩 시킨 함수를 리턴한다.

const obj = {name:'Tom'};

const say = function(city) {
    console.log(`Hello, my name is ${this.name}, I live in ${city}`);
}

// 일반함수를 obj 객체에 바인딩시킨 함수 객체! 를 리턴한다.
const boundSay = say.bind(obj);

// 바인딩 된 함수에 인자를 주어 실행시킨다. this.name은 window가 아닌 obj 의 속성임을 알 수 있다.
boundSay("seoul")
 Hello, my name is Tom, I live in seoul
 
 
 // 궁금해서 찍어보았다.
 typeof boundSay
"function"