this의 참조

실행 콘텍스트의 this 바인딩 컴포넌트에 바인딩되어 객체를 참조 

console.log(foo() === window.foo()); //true

 

기본적으로 this는 전역 객체를 참조한다. 

 

만약 어떠한 객체를 참조하고 있다면 this는 그 객체를 참조하게 된다.

 

function foo(){
    console.log(this);
}

foo()// window

const obj = { foo: foo };

obj.foo() // obj

 

또한 this는 객체 속성의 내부함수로 this가 있다면 그 this는 window를 가리키게 된다. 

콜백 함수의 this도 window 객체를 가리킨다.

 

내부 함수

const obj = {
    foo: function(){
        console.log(this); // obj
        function innerfoo(){
            console.log(this); //window
        }
        innerfoo();
    }
}

obj.foo();

 

콜백

 

const obj = {
    cb: function(){
       setTimeout(function(){
           console.log(this); //window
      }, 1000);
    }
}

obj.cb();

 

실행 콘텍스트가 실행문을 만나면 그때 메모리에 할당이 되기 때문이다. 

 

이것을 참조시키기 위해서 call, apply, bind ( 이 메서드들은 함수 객체가 가지고 있다)가 있으며

es6에서 arrow로써 해결할 수 있다.

 

내부 함수

const obj = {
 ...
     (() => {
     console.log(this); //obj
     })()
     innerfoo.call(this); //obj
     innerfoo.apply(this); //obj
     innerfoo.bind(this)(); //obj
   }
}

obj.foo();

콜백

const obj = {
    cb: function(){
       setTimeout(function(){
           console.log(this); //obj
      }.call(this), 1000);
    }
}

obj.cb();

 

es6의 화살표 함수의 this 참조는 객체를 참조하는 this의 차이가 있다.

 

const name =1

const foo = {
    name: 'foo',
    a: function(){
        function windowName(){
            console.log(this.name) //1
        }

        windowName();
        fooName=()=> console.log(this.name); // foo
        fooName()
    }
}

foo.a();

 

위와 같이 출력하게 된다면 windowName()는 1을 출력하게 된다.  이는 this가 호출될 때 정의되는데 참조할 대상이 없기 때문에 window객체를 참조하는 것이다. (내부 함수)

 

화살표 함수로 표현된 fooName()의 this는 함수를 정의할 때 결정된다. 그렇기 때문에 바로 foo객체를 this 참조하게 된다. 

 

this를 명시적 참조가 필요한 경우  bind(), call(), apply() 함수를 사용할 수 있다.

 

세 개가 비슷하며 this 참조를 바인딩해준다.

 

화살표 함수는 call이나 apply 메서드를 사용하여도 this값은 바뀌지 않는다.

 

const user = { name : 'a' , age : 18 };

const callName=()=>{
  return this.name;
}
console.log(callName.bind(user)()); //""
console.log(callName.call(user)); //""
console.log(callName.apply(user)); //""