this

this 연습 ㅇㅇ 

 

느낀점

1 결국 ~ 사용법 익히는 거니깐 직접 쳐보는것이 중요.

2 예제는 재밋게 하면 덜 지루

3 너무 싫어서 죽을것같아도 결국 영어를 해야됨. 

4 jsbin 이 콘솔보다 낫군용 

5 혼자 단순히 짜다보니 버전을 낮게 편하게도 많이 썼고, 유지보수하기 더럽게 짜왔음. 그치만 되도록 변수명을 명시적으로 한다던지.. 하는 습관을 들이기.

6 적어놓을때는 이거 왜적어 ㅋㅋ 싶어도 쨋든 적은게 나음 

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

 human.func(); // human 출력

 const func = human.func; 
 func(); //window 객체 출력 

 

함수가 실행될 당시의 this가 무엇일지 생각하긔.

뭐 .. 당연한거지만  정 모르겠으면 찍어보면 된다.

 

 

 

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 . call과 같다.
testFunc.apply(human); //역시 명시적 바인딩.

const animal = {
   age: 30,
};


testFunc.call(animal); //this 에 직접 바인딩. animal을 줄수도 있쬬 
testFunc.apply(human); //휴먼휴먼

 

직접 주는것이 보이니 편하군

 

 

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

window 출력 되용. 느낌오져

 

 

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(); 

2 
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에서 실행하는거니깐 

 

참고

(https://tylermcginnis.com/javascript-visualizer/)