Javascript에서 This

This

javascript에서 기본적으로 this는 window이다. strict.mode일 경우는 차이가 있다.
this가 window가 아닌 경우

• 객체의 메소드 안의 this의 경우는 객체를 카리킨다.
• 명시적으로 this를 바꾸는 함수 3가지 bind, call apply를 사용할 경우 this가 객체를 가르키게 된다.
• 생성자 함수도 this가 객체를 가르키게 된다. 이 경우는 함수를 객체로 선언해야한다.

const people = new Person("~~~")

이런식으로 선언을 해주면 people.function형식으로 객체로 함수 밖에서도 객체로 사용할 수 있게 된다.

call

call을 사용하면 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this를 바인딩한다.

function myName(a, b, c){
    console.log(this.name);
    console.log(a, b, c)
}

const name = {
    name: "endol"
}

myName.call(name, 1, 2, 3);
//endol
//1 2 3

apply

apply를 사용하면 함수를 실행하고 함수의 첫 번쨰 인자로 전달하는 값에 this를 바인딩한다. call과 차이점은 인자를 배열 형태로 전달한다는 점이다.

function myName(a, b, c){
    console.log(this.name);
    console.log(a, b, c)
}

const name = {
    name: "endol"
}

myName.apply(name, [1, 2, 3]);
//endol
//1 2 3

bind

bind는 함수의 첫 번째 인자에 this를 바인딩하는 점은 같지만 함수를 실행하지 않으며 새로운 함수를 반환한다. 즉, 반환된 새로운 함수를 시행해야 원본 함수가 실행된다.

function myName(a, b, c){
    console.log(this.name);
    console.log(a, b, c)
}

const name = {
    name: "endol"
}

const nameBind = myName.bind(name);
nameBind(1, 2, 3)
//endol
//1 2 3

call 메소드는 함수를 실행하고, 첫번째 인자에 this를 바인딩하며, 이후의 값을 함수의 인자로 전달한다. apply 메소드는 함수를 실행하고 첫 번째 인자에 this를 바인딩하며, 이후의 값을 배열형태로 받아 차례로 함수의 인자를 전달한다. bind메소드는 함수를 실행하지 않으며, 첫 번째 인자에 this를 바인딩한 새로운 함수를 반환한다. 각 메소드를 통해 전달할 수 있는 인자의 개수에는 제한이 없다.