[자바스크립트 중급] call, apply, bind // 함수의 this 값을 정해보자

함수의 this 값을 정하는 메서드로 3가지가 있다.

 

1. call : 모든 함수에서 사용할 수 있으며 this를 특정 값으로 지정

- 함수.call(1번, 2번, ...) // 매개변수를 직접 받음 

- 매개변수 1번은 this 로 사용될 값임

- 매개변수 2번부터 순서대로 함수의 인수가 됨

// call 메서드

const mike = {

    name: "Mike"

}

const tom = {

    name: "Tom"

}

function showThisName() {

    console.log(this.name)

}

showThisName(); // window.name // 지정이 안됨

showThisName.call(mike); // Mike // 함수 안의 this가 mike가 됨

// call 메서드

const mike = {

    name: "Mike"

}

const tom = {

    name: "Tom"

}

// 생일과 직업을 인수로 받는 update라는 함수로 Object.assign처럼 활용

function update(birthday, occupation) {

    this.birthday = birthday;

    this.occupation = occupation;

}

update.call(mike, 230510, "학생"); // this는 mike가 되고 2번부터는 update 함수의 인수로 들어감.

console.log(mike); // { name: 'Mike', birthday: 230510, occupation: '학생' }

※ call로 배열을 받으려면?

spread(...)를 활용하면 됨 (1번 매개변수, ...배열명)

 

 

2. apply : 매개변수를 배열로 받는 것 제외하면 call과 같음

- 함수.apply(1번, 2번 배열)

- 매개변수 1번은 this 로 사용될 값임

- 매개변수 2번 배열의 요소가 순서대로 함수의 인수가 됨.

- 배열 요소를 함수 매개변수로 사용할 때 유용함

- 배열의 변수명을 넣어도 되고 [배열]을 직접 작성해도 됨. 

// 일단, call 구조에서 2번 매개변수만 배열로 변경

 

function update(birthday, occupation) {

    this.birthday = birthday;

    this.occupation = occupation;

}

update.apply(mike, [230510, "학생"]); // this는 mike가 되고 2번은 함수의 인수인데 배열을 넣음

console.log(mike); // { name: 'Mike', birthday: 230510, occupation: '학생' }

 

------------------------------------------------------------------------------------------------------------------

const arr1 = [230510, "학생"]

update.apply(mike, arr1); // 2번에 배열명을 넣어도 됨

console.log(mike); // { name: 'Mike', birthday: 230510, occupation: '학생' }

 

 

3. bind : this 값을 잃어버리지 않고 함수 생성

- let 새함수 = 함수.bind(this로 지정할 변수)

- 이때 새함수()는 this를 고정으로 반환한다.

// bind 메소드

const user1 = {

    name: "mike",

    showName: function () {

        console.log(`my name is ${this.name}`);

    }

}

user1.showName(); // 이건 그냥 객체안에 매서드를 실행한 것 뿐이야

let sayName = user1.showName; // 메서드를 실행하는 sayName 이라는 함수를 만들어보자

sayName(); // my name is undefined  // 그냥 선언하니까 this 값을 잃어버림.

sayName.call(user1); // my name is mike  // call 로 this를 지정해주니 나옴

// 그러면 this 값을 잃어버리지 않고 고정하는 함수를 만들고 싶다면?

const sayUser1 = sayName.bind(user1); // bind로 묶어준다.

sayUser1(); // my name is mike