JavaScript의 this와 바인딩 , 화살표함수가 생겨나게 된 배경

this

함수를 호출할 때 결정된다

 

< 전역공간에서의 this >

• 브라우저 : window
• Node.js : global

< 전역객체 >

자바스크립트의 모든 변수는 특정 객체의 프로퍼티이다.

특정 객체 : 렉시컬 환경 (Lexical Environment)

 

실행컨텍스트는 변수를 수집해서 LE의 프로퍼티로 저장

어떤 변수가 호출 당했을 때 LE의 프로퍼티에서 값을 조회해봄

 

 

그렇다면 전역 객체의 프로퍼티와 전역벼수로 선언한 것이 같을까?

=   window.a와 var a가 같을까?

 

할당할 때는 별다른 차이가 보이지 않지만 삭제를 하게 되는 경우 차이가 있다.

var a = 'tami'
delete a;

console.log(a) // tami


window.a= 'tami'
delete window.a;

console.log(a) // Uncalught ReferecneErrror ( a is not defined)

바로 변수로 선언하게 되면 자바스크립트 엔진에서 자동으로 전역객체의 프로퍼티로 할당하면서 그 프로퍼티 

1. 변수로 선언

2. ( 자바스크립트 엔진에 의해 )전역객체의 프로퍼티로 할당됨 

3. 프로퍼티의 configurable속성을 false로 정의

  configurable :  변경 및 삭제 가능성

 

 

함수를 실행하는 방법 2가지  - 메서드와 함수

var foo = function(x){
	console.log(x, this)
}

foo(1) // 함수로 실행 1,Window


var obj ={
	method: foo
}

obj.foo(1) // 메서드로 실행 1,{ method: f}

 

함수로 호출 : this가 지정되지 않음  -> this는 전역 객체로 자동 bind

메서드로 호출: this가 지정됨 

 

우리가 원하는건 호출 주체가 명확하게 없을 때 자동으로 전역객체로 바인딩 하지  않고 주변환경의 this를 상속받았으면 좋겠다.

 

var obj = {
	
    method : functoin(){
    	console.log(this) // { method: f }
        
        var innerFoo = function () {
        	console.log(this) // Window 
        }
        
        innerFoo();
        
    }
}

이렇게 우회할 수 있어요.

var obj = {
	
    method : functoin(){
    	console.log(this) // { method: f }
        
        
        var self = this; //  1. 스코프에서 self에 this를 저장하면 
        var innerFoo = function () {
        	console.log(self) // {method: f }   // 2. 이렇게 사용할 수 있다.
        }
        
        innerFoo();
        
    }
}

그래서 ES6에서 화살표 함수가 생겨나게 되었다.

화살표 함수는 위의 우회법이 필요 없어집니다!

 

 

 

명시적으로 this 바인딩 하기 

1. 스코프 내에서 변수를 이용한 우회법
2. call ,bind ,apply

var obj = {
	
    method : functoin(){
    	console.log(this) // { method: f }
        
        var innerFoo = function () {
        	console.log(self) // {method: f }   // 함수에 this를 미리 적용 
        }.bind(this)
        
        innerFoo();
        
    }
}