자바스크립트 this 와 call, apply, bind

 

💡this란?

함수가 호출될 때 동적으로 결정되는 특별한 키워드로 '누가 나를 불렀느냐'를 뜻한다고한다  즉, 선언이 아닌 호출에 따라 달라진다

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)로 신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

 

🧩단독으로 쓴 this

전역 실행컨텍스트의 this, 즉 아무 함수에도 속하지 않은 범위에서 this는 전역객체를 참조한다

console.log(this); // window 객체 출력

 

🧩함수 안에서 쓴 this

함수 안에서 this는 함수의 주인에게 바인딩된다  =>window객체

 

✔ 일반적인  This

function myFunction() {
  return this;
}
console.log(myFunction()); //Window

✔ strict mode This

"use strict";
 
function myFunction() {
  return this;
}
console.log(myFunction()); //undefined

 

 

🧩메서드 안에서 쓴 this

메서드 호출 시 메서드 내부 코드에서 사용된 this는 해당 메서드를 호출한 객체로 바인딩된다

var person = {
  firstName: 'Kim',
  lastName: 'Sora',
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  },
};
 
person.fullName(); //"Sora Kim"

 

 

🧩이벤트 핸들러 안에서 쓴 this

이벤트를 발생시킨 DOM 요소를 참조한다=>이벤트를 받는 HTML 요소를 가리킨다

<button id="myButton">Click me</button>

const myButton = document.querySelector("#myButton");

myButton.addEventListener("click", function() {
  console.log(this);
}); // myButton 요소 출력

 

🧩명시적으로 this를 지정하는 방법  =>call, apply, bind 메서드를 사용

 

✔️call

메서드 호출 주체인 함수를  즉시 실행하는 메서드

func.call(thisArg[, arg1[, arg2[, ...]]])

 

 

let person1 = {
    name: 'Koding'
};

let person2 = {
    name: 'Kim',
    study: function() {
        console.log(this.name + '은 공부를 하고 있습니다.');
    }
};

person2.study(); //Kim은 공부를 하고 있습니다.

// call()
person2.study.call(person1);//Koding은 공부를 하고 있습니다.

 

 

person2.study()를 호출하면 person2 객체의 study 메서드가 실행되며, this.name으로 person2 객체의 name 프로퍼티 값인 'Kim'이 출력된다

call 메서드를 사용하여 person2.study 메서드를 person1 객체에서 호출하면, study 메서드 내부에서 this.name으로 참조되는 this가 person1 객체를 가리키므로, 'Koding'이 출력된다

 

✔️Apply

메서드 호출 주체인 함수를  즉시 실행하는 메서드

argsArray: func이 호출되어야 하는 인수를 지정하는 유사 배열 객체

 두 번째 매개변수를 배열 형태로 넣게 된다는 차이점이 있다(배열 또는 유사배열 객체)

fun.apply(thisArg, [argsArray])

 

function add(c, d) {
  return this.a + this.b + c + d;
}

let A = {a: 3, b: 3};

add.call(A, 6, 6); // 18

add.apply(A, [20, 10]); // 36

call은 인수를 각각 전달하는 방식이고, apply는 인수를 배열로 전달하는 방식이다

객체 A를 this로 설정하면서 add 함수를 호출하고, call은 인수를 각각 전달하고 apply는 배열로 전달한다

 

✔️bind

함수를 즉시 실행하지 않고 넘겨받은 인수를 바탕으로 새로운 함수를 반환하는 메서드이다

바인딩한 함수는 원본 함수 객체를 감싸는 함수로서 call, apply와 같이 함수가 가리키고 있는 this를 변경하게 되지만 해당 this가 호출되지는 않는다=> 변수를 할당하여 호출하는 형태로 사용

func.bind(thisArg[, arg1[, arg2[, ...]]])

 

let person1 = {
    name: 'Koding'
};

let person2 = {
    name: 'Kim',
    study: function() {
        console.log(this.name + '은 공부를 하고 있습니다.');
    }
};

person2.study();//Kim은 공부를 하고 있습니다.


// bind()
let student = person2.study.bind(person1);

student(); //Koding은 공부를 하고 있습니다.

person2 객체의 study() 메소드를 person1 객체에 바인딩하고, student() 함수를 호출한다