JS this 개념 및 활용

this가 존재하는 이유

함수를 호출하는 객체를 의미하며 다른 객체에서도 사용성을 늘릴 수 있다.

기본적인 사용 예

function  menuGlobal() {
    console.log("오늘 저녁은 "  +  this.name);
}

var  myDiner  = {
name:  "김치찌개",
menu:  menuGlobal
}

myDiner.menu(); // "오늘 저녁은 김치찌개"

var  yourDiner  = {
    name:  "된장찌개",
    menu:  menuGlobal
}

yourDiner.menu(); // "오늘 저녁은 된장찌개"

this 제어

call() 사용

call 메서드는 this 의 값을 바꿀 수도 있고, 함수를 실행할 때 사용할 인수도 전달할 수 있습니다.

function menuGlobal(item) {
    console.log("오늘 저녁은 " + item + this.name);
}

var myDiner = {
    name: "김치찌개"
}


var yourDiner = {
    name: "된장찌개"
}

menuGlobal.call(myDiner, "묵은지"); // "오늘 저녁은 묵은지김치찌개"
menuGlobal.call(yourDiner, "삼겹살"); // "오늘 저녁은 삼겹살된장찌개"

apply()

apply 메서드는 함수를 실행할 때 인수를 배열로 묶어 한번에 전달합니다

function menuGlobal(item1, item2) {
    // this 는 기본적으로 전역  window 를 가르킴 새로들어오는 값에 따라 변경됨
    [item1, item2].forEach(function (el) {
        console.log(this);
        console.log("오늘 저녁은 " + el + this.name)
    }, this);
}

var myDiner = {
    name: "김치찌개"
}


var yourDiner = {
    name: "된장찌개"
}

menuGlobal.apply(myDiner, ["묵은지", "삼겹살"]); // "오늘 저녁은 묵은지김치찌개" "오늘 저녁은 삼겹살김치찌개"
menuGlobal.apply(yourDiner, ["두부", "애호박"]); // "오늘 저녁은 두부된장찌개" "오늘 저녁은 애호박된장찌개"

bind()

bind 메서드는 es5 에서 추가되었습니다. this 값을 어디서 사용하든 호출 객체가 바뀌지 않게 고정시켜버립니다

function menuGlobal(item) {
    console.log("오늘 저녁은 " + item + this.name);
}

var myDiner = {
    name: "김치찌개"
}

var yourDiner = {
    name: "된장찌개"
}

var menuGlobalForMe = menuGlobal.bind(myDiner);
var menuGlobalForYou = menuGlobal.bind(yourDiner);


menuGlobalForMe("묵은지"); // "오늘 저녁은 묵은지김치찌개"
menuGlobalForYou("삼겹살"); // "오늘 저녁은 삼겹살된장찌개"


myDiner.menuMine = menuGlobalForYou;
myDiner.menuMine("묵은지"); // "오늘 저녁은 묵은지된장찌개"

화살표 함수와의 관계

※ 화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없고 바로 상위 스코프의 this를 할당합니다.

콜백함수를 만들때 쓰면 적절함

function menuGlobal(item1, item2) {
    [item1, item2].forEach((el) => {
        console.log("오늘 저녁은 " + el + this.name) // 상위 스코프의 객체를 받아 쓰므로 this 를 바로 사용 가능
    });
}

var myDiner = {
    name: "김치찌개"
}


var yourDiner = {
    name: "된장찌개"
}

menuGlobal.apply(myDiner, ["묵은지", "삼겹살"]);
menuGlobal.apply(yourDiner, ["두부", "애호박"]);

참고

https://www.inflearn.com/course/%EC%BD%94%EB%94%A9%EC%9D%B8%ED%84%B0%EB%B7%B0-js-%EC%96%91%EC%84%B1%ED%95%99%EA%B5%90