[JavaScript] call, apply, bind

사용할 함수.call(this, 사용할 함수의 첫번째 인자, ..., 사용할 함수의 N번째 인자)

B라는 함수에서 A객체의 내용을 호출할 때 사용한다.

다시 말해서, 함수 밖의 객체를 함수로 불러와 사용할 때, 사용한다.

 

인자들은 사용할 함수의 형식을 따른다.

전달할 객체가 없는 경우에는 null, undefined를 넣는다.

const minu = {
    name: 'Minwoo',
};

const yewon = {
    name: 'Yewon',
};

function ShowName() {
    console.log(this.name);
}

ShowName(); // 아무것도 출력되지 않음
ShowName.call(minu); // Minwoo라는 값이 출력.

 

 

ShowName() 을 호출하면 아무 일도 일어나지 않는다.

왜냐하면 ShowName에는 출력할 값이 존재하지 않기 때문이다.

이럴 때, ShowName(minu)와 같이 this에 해당하는 값을 인자로 전달해주면 정상적으로 출력된다.

 

결과

 

 

사용하려는 함수(객체)에 this가 있어야하고, 함수를 호출할 때 인자로 this의 값을 입력해줘야 한다.

 

추가적으로 하나의 예시를 더 보도록 하겠다.

const minu = {
    name: 'Minwoo',
};

const yewon = {
    name: 'Yewon',
};

function ShowName() {
    console.log(this.name);
}

function AddData(age, gender) {
    this.age = age;
    this.gender = gender;
}

console.log(minu);
console.log(yewon);

AddData.call(minu, 23, 'M');
AddData.call(yewon, 23, 'F');

console.log(minu);
console.log(yewon);

 

AddData 라는 함수를 추가했다.

이 함수는 this로 받아온 객체에 age와 gender를 추가하는 함수이다.

 

AddData.call을 사용하여 AddData의 this로 값을 전달하는데, age와 gender 각각의 값을 순서대로 넣어주면 된다.

AddData.call(불러올 객체, AddData의 첫번째 인자, AddData의 두번째 인자) 와 같은 형식이다.

 

 

결과

 

 

그리고 나서 출력하면 데이터가 추가된 것을 확인할 수 있다.

 

 

사용할 함수.apply(this, 불러올 값의 배열)

call()과 가장 다른 점은 값을 배열로 받아온다는 것이다.

 

전달할 객체가 없는 경우에는 null, undefined를 넣는다.

const minu = {
    name: 'Minwoo',
};

const yewon = {
    name: 'Yewon',
};

function ShowName() {
    console.log(this.name);
}

function AddData(age, gender) {
    this.age = age;
    this.gender = gender;
}

console.log(minu);
console.log(yewon);

AddData.call(minu, 23, 'M');
AddData.call(yewon, 23, 'F');

console.log(minu);
console.log(yewon);

 

위 코드를 apply를 통해 변경한다면, 아래와 같이 변경될 것이다.

const minu = {
    name: 'Minwoo',
};

const yewon = {
    name: 'Yewon',
};

function ShowName() {
    console.log(this.name);
}

function AddData(age, gender) {
    this.age = age;
    this.gender = gender;
}

console.log(minu);
console.log(yewon);

AddData.apply(minu, [23, 'M']); // 인자값으로 배열 형태가 사용됨.
AddData.apply(yewon, [23, 'F']); // 인자값으로 배열 형태가 사용됨.

console.log(minu);
console.log(yewon);

 

 

call()과 apply()의 차이를 좀 더 극명하게 보면 아래와 같다.

AddData.call(minu, 23, 'M');
AddData.call(yewon, 23, 'F');

 

AddData.apply(minu, [23, 'M']);
AddData.apply(yewon, [23, 'F']);

 

call은 값이 , 를 기준으로 쭉 나열되어 있고, apply는 값이 [] 안에 들어가 있다.

 

헷갈리지 않도록 주의하자.

 

 

사용할 함수.bind(this, 사용할 함수의 인자1, ... 사용할 함수의 인자N)

 

위 call(), apply()와 헷갈릴 거 같아 예시를 통해 설명하겠다

const minu = {
    name: 'Minwoo',
    ShowName: function () {
        console.log('Hi,' + this.name);
    },
};

minu.ShowName(); // Hi, Minwoo 출력

let func = minu.ShowName; 

func(); // HI, 출력

 

위 코드에서 minu.ShowName()을 실행하면 Hi, Minwoo가 출력된다.

그리고 그 객체를 func라는 변수에 넣은 다음, func() 를 호출한다면 Hi, Minwoo가 출력될까 ?

 

결과

 

 

Hi, Minwoo가 아닌 Hi , undefined가 출력된 것을 확인할 수 있다.

ShowName의 앞에 오는 것이 this 값인데, func에 담으면서 this 값이 사라진 것이다.

 

const minu = {
    name: 'Minwoo',
    ShowName: function () {
        console.log('Hi,' + this.name);
    },
};

minu.ShowName();

let func = minu.ShowName;

func.call(minu); // Hi, Minwoo 출력
func.apply(minu); // Hi, Minwoo 출력

let bndfnc = func.bind(minu); // bndfnc에 this값을 minu로 설정하면서 담기

bndfnc(); // Hi, Minwoo 출력

 

위 코드의

let bndfnc = func.bind(minu);

 

부분은 변수에 담으면서 this가 사라지는 문제를 없애기 위한 방법이다.

minu라는 객체를 this로 설정하면서 bndfnc에 값을 넣는 것이다.

 

결과

 

 

순서대로

• minu.ShowName() 결과
• func.call(minu) 결과
• func.appluy(minu) 결과
• bndfnc() 결과

 

마지막에 bndfnc를 호출해보면 정상적으로 Hi, Minwoo 가 출력되는 것을 확인할 수 있다.

이처럼 bind는 객체에 값을 담을 때 this가 사라지는 것을 막기 위해 사용한다.