자바스크립트 객체 고급 - 함수 call(), bind()

Deong_gu·2022년 3월 28일
0
post-thumbnail

call을 사용하여 독립된 함수를 특정 객체의 메소드로 호출할 수 있습니다.
자바스크립트의 모든 함수는 call이라는 메소드를 가집니다.
사실 자바스크립트에서는 함수도 객체이기 때문입니다.
call 메소드의 인자로 객체를 지정하게 되면 해당 함수의 this는 인자로 받은 객체가 됩니다.
call은 여러 인자를 가질 수 있습니다.

첫번째 인자는 this로 지정할 객체가 오고 그 뒤로는 함수의 인자로 들어갈 값이 들어가게 됩니다.

const woo = {codeName: 'MM', point: 200, cash: 3000}
const shin = {codeName: 'DG', point: 100, cash: 2000}
function sum(prefix) {
    return prefix + (this.point +this.cash);
}
//call() 함수
// 실행할 때 마다 어떤 함수의 this 값을 바꾸는, context를 바꾸는 함수
// sum();
console.log(sum.call(woo, '=>'));//3200
console.log(sum.call(shin,": "));//2100

bind 함수를 사용해 this가 고정된 새로운 함수를 생성할 수 있습니다.
bind는 호출한 함수를 변경하는 것이 아니라 인자로 받은 조건을 만족하는 새로운 함수를 리턴해줍니다.

//bind() 함수
//bind는 호출한 함수를 변경하는 것이 아니라 인자로 받은 조건을 만족하는 새로운 함수를 리턴
const wooS = sum.bind(woo, '-> ');
console.log(wooS());
profile
프론트엔드 개발자가 되기 위해 공부 중입니다.

0개의 댓글