[ZeroCho]인간 JS엔진 되기 1-6 this는 호출 때 결정된다.

https://www.youtube.com/watch?v=pgo6URFz8tc

요약 :
일반 함수의 this는 "호출"시 결정
화살표 함수의 this는 "선언"시 결정. (부모 참조)

{
    const obj = {
        name : "🍒",
        sayNameClassic : function(){console.log("sayNameClassic",this.name || "undefined");},
        sayName(){console.log("sayName",this.name || "undefined");},
        sayNameArrow : ()=>{console.log("sayNameArrow", this.name || "undefined");},
    };
    const sayNC = obj.sayNameClassic; 
    const sayN = obj.sayName; 
    const sayNA = obj.sayNameArrow; 
 
    obj.sayNameClassic(); //🍒
    sayNC();//undefined
 
    obj.sayName(); //🍒
    sayN();//undefined
    
    obj.sayNameArrow(); //undefined
    sayNA();//undefined
}
 
/* 생성자 함수 */
function Human(name){
    this.name = name;
    return this;
}//Human
 
const hm = new Human("moira");
 
function sayName(){console.log( "sayName : ", this.name || "undefined");}
sayName(); //unefined
sayName.call({name : "💗"}); //💗
sayName(); //undefined
 
//bind는 새로운 함수를 만드는거지 호출은 따로 해줘야함
const sayName_call = sayName.call({name : "call"}); //"call" < 즉시 실행
const sayName_bind = sayName.bind({name : "bind"})(); //"bind" < 한번 더 실행해줘야

 

console.log("----------------------\n\n\n\n")
//arrow function은 자체 this가 없으니 무조건 "선언"할 때 부모를 참조하고
//기존 function의 this는 "호출" 시점에 따라 갈린다.
 
//sayName의 this가 뭐냐 그건 호출될 때 정해지는거야 obj가 아닌거임.
 
console.log("this.는 호출할때 정해진다")
 
const obj = {
    name : "💚",
    sayName : function(){
        console.log("📍 sayName", this.name);
        function inner(param){
            console.log("sayName-inner", param , this.name);
        }
        inner(); //호출할 때 시점을 유의
        inner.call(this,"+ call");
 
        const inner_arrow = () =>{
            console.log("sayName-inner-arrow", this.name);
        }
        inner_arrow();
    },
    sayNameArrow : ()=>{
        console.log("📍📍 sayNameArrow", this.name, this);
        function inner(param){
            console.log("sayNameArrow-inner", param, this.name);
        }
        inner();
        inner.call(this,"+ call");
 
        const inner_arrow = () =>{
            console.log("sayName-inner-arrow", this.name);
        }
        inner_arrow();
    },
};
 
obj.sayName(); // sayName:"💚", sayName-inner : undefined , sayName-inner+call : "💚" , sayName-inner_arrow : "💚"
obj.sayNameArrow();// 전부 undefined
 
console.log('---------------');
 
const SN = obj.sayName; //걍 function sayName(){}이 호이스팅 된것임.
const SNA = obj.sayNameArrow;
 
SN(); //전부 undefined
SNA(); //전부 undefined
 
console.log('---------------');
 
SN.call({name : "🍅"}); //sayName:"🍅", sayName-inner : undefined , sayName-inner+call : "🍅",  sayName-inner_arrow : "🍅"
SNA.call({name : "🍅"}); ///전부 undefined
 
console.log('---------------');
 
/**
 * obj.sayName()의 호출스택을 보자
 * 
 * 
 * | obj.sayName().inner_arrow()      | this : obj
 * | obj.sayName().inner.call(this)   | this : obj
 * | sayName().inner()                | this : window
 * | obj.sayName() 의 console.log     | this : obj
 * | obj.sayName()                    | this : obj
 * | anonymous                        | this : window
 * ________
 */