[자바스크립트] 동적바인딩

김치찌개 파스타

const korean = {
    favorite: '김치',
    makeStew: function (isHot, pots) {
        return `${isHot ? '매운' : '순한'} ${this.favorite}찌개 ${pots}냄비`;
    }
};

const italian = {
    favorite: '피자'
};

console.log(
    korean.makeStew(true, 1)
);

// 이탈리아인에게 한국인이 찌개 끓이는 법을 알려줌
italian.makeStew = korean.makeStew;

console.log(
    italian.makeStew(false, 2)
);

 

안되네

 

const korean = {
    favorite: '김치',
    makeStew: function (isHot, pots) {
        return `${isHot ? '매운' : '순한'} ${this.favorite}찌개 ${pots}냄비`;
    }
};

const italian = {
    favorite: '피자'
};

console.log(
    korean.makeStew(true, 1)
);

// 이탈리아인에게 한국인이 찌개 끓이는 법을 알려줌
italian.makeStew = korean.makeStew;

console.log(
    italian.makeStew(false, 2)
);

console.log(
    italian.makeStew.call(korean, false, 2)
);

console.log(
    italian.makeStew.apply(korean, [false, 2])
);

// ⭐ this가 바인딩된 새 함수를 만듦
italian.makeRightStew = korean.makeStew.bind(korean);

console.log(
    italian.makeRightStew(false, 2)
);

// 💡 추가 인자들까지 바인딩 가능
italian.makeClassicStew = korean.makeStew.bind(korean, true, 1);

console.log(
    italian.makeClassicStew()
);

 

바인딩된 함수를 내보내는 함수

 

 

const korean = {
    favorite: '김치',
    makeStew: function (isHot, pots) {
        return `${isHot ? '매운' : '순한'} ${this.favorite}찌개 ${pots}냄비`;
    },
    teachMakingStew: function () {
        return this.makeStew.bind(this);
    }
};

const italian = {
    favorite: '피자'
};

italian.makeStew = korean.teachMakingStew();

console.log(
    italian.makeStew(false, 2)
);

생성자일때

 

function Korean () {
    this.favorite = '김치';
    this.makeStew = function (isHot, pots) {
        return `${isHot ? '매운' : '순한'} ${this.favorite}찌개 ${pots}냄비`;
    };

    // 💡 여기서 바인딩을 고정시켜버림
    this.makeStew = this.makeStew.bind(this);
}

function Italian () {
    this.favorite = '피자';
}


const korean = new Korean();
const italian = new Italian();

italian.makeStew = korean.makeStew;

console.log(
    italian.makeStew(false, 2)
);

 

 

call apply의 다른 활용

 

 

 

 

 

 

// 객체들이 가져다 쓰도록 만든 함수
function intro (job) {
    return `${this.name}(${this.age}세) - ${job}`
}

const hong = {
    name: '홍길동',
    age: 20
};

const jeon = {
    name: '전우치',
    age: 25
};

// 동적 바인딩 특성 활용
hong.intro = intro;

console.log(
    hong.intro('개발자')
);

console.log(intro.call(hong, '개발자'));
console.log(intro.apply(jeon, ['사무직']));

const introHong = intro.bind(hong, '개발자');

console.log(
    introHong()
);