본문 바로가기

내가 당면한 문제와 해결방안

javascript this

// // const human = {
// //   age: 200,
// //   func: function() {
// //     console.log(this);
// //   }
// // };

// // human.func();

// // const func = human.func; 

// // func(); //window 객체 출력 




// const testFunc = function(){  
//   console.log(this);
// };

// const human = {
//   age: 200,
//   func: testFunc
// };

// // testFunc(); //window객체 출력

// // human.func(); //human





// // testFunc.call(); //windows
// // testFunc.call(human); //명시적으로 바인딩 해줌 

// // testFunc.apply(); //w
// // testFunc.apply(human); 

// // const testFunc = function(a,b,c,d,e){  
// //   console.log(this);
// //   console.log(a,b,c,d,e)
// // };

// // testFunc.call(human, 1,2,3,4);



// const animal = {
//   age: 30,
// };


// // testFunc.call(animal); //this 에 직접 바인딩 
// testFunc.apply(human);


// // const newFunc = testFunc; //window 
// // newFunc();


// const newFunc = testFunc.bind(human); //human 직접 bind - hard binding
// newFunc();

// const testFunc = function(){  
//    console.log(this);
//  };

// const human = {
//   age: 30,
//   func: testFunc,
//   funcTwo: () => {
//     console.log(this); // ~ ~ ~ arrow function 은 this에 바인딩이 안됨 ~ ~ ~
//   },
// };


// human.funcTwo();



/*
global : window 객체가 젤 상위

global execution context에서 실행하면~
this -> window객체


const testFunc = function(){  
  console.log(this);
};
testFunc();
-> 이렇게 하면 이 함수가 실행되는 context가 global이라서 window출력



const human = {
  age: 30,
  func: testFunc,
};
human.func();

-> 이렇게 호출하면 testFunc가 새로운 execution context를 만듬.
ec의 this가 human이 됨
: 이게 implicit binding 묵시적



const human = {
  age: 30,
  func: testFunc,
};

testFunc.apply(this); // window 가 this
testFunc.apply(human); // human을 this로 바인딩해줌
testFunc.call(human); //똑같 ㅇㅇ  //근데 call 과 apply bind해주는 시점에 호출이 동시에 됨. ㅇㅇ

->  explicit binding 명시적으로 this바인딩



//hard binding

const testFunc = function(){  
  console.log(this);
};

 
const human = {
  age: 30,
  func: testFunc,
};

const newFunc = testFunc;



const newFunc = testFunc;
newFunc(); //근데 이렇게 하면 그냥 global


1
이렇게 해야됨 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 
const newFunc = testFunc.bind(human); 
newFunc(); 


const newFunc = testFunc;
newFunc.bind(human)(); //newFunc.bind(human) 이만큼이 bind된 함수임 그것을 () 또 호출



*/


/*
  arrow function 은 자기 상위 scope
  
  
*/




const human = {
    age: 200,
    funcThree: function(){
      console.log(this); //a
      const greet = () => {
        console.log(this); //b 
        // a 랑 b랑 같음
      }
      
      greet();
    }
  };

//human.func

const newFunc = human.funcThree;
// newFunc(); //window : global execution context에서 호출 했기 때문ㅇ ㅔㅔㅔㅔㅔㅔㅔ
// newFunc.bind(human)(); // human bind 
human.funcThree(); //human context에서 실행하는거니깐