this

this 란?

• this란 객체지향 프로그래밍 언어에서 사용하는 키워드이며 이때 this는 해당 코드를 실행하는 클래스의 인스턴스를 나타낸다.
• 자바스크립트에서의 this는 조금 다르다. 자바스크립트의 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체나 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

 

this의 바인딩

function sayName() {
	const name = 'yunCow'
    
    console.log(this.name)
}

sayName(); // ?

• 코드만 딱 봤을땐 console.log에 'yunCow'를 보여줄 것으로 보인다. 하지만 그렇지 않다.
• 자바스크립트에서의 this가 참조하는 것은 함수의 호출 방식에 따라 결정된다. 이걸 this 바인딩이라 부른다.
• this 바인딩에는 5가지 종류가 있다.
  • 기본 바인딩
  • 암시적 바인딩
  • 명시적 바인딩
  • new 바인딩
  • 화살표 함수 바인딩

 

기본 바인딩

• 규칙이 적용되지 않는 기본 바인딩이다.
• 기본 바인딩일때 this는 전역 객체에 바인딩 된다. 위에있는 코드가 기본 바인딩이며 undefined를 반환하게 된다.

window.name = 'haha'

function sayName() {
	const name = 'yunCow'
    
    console.log(this.name)
}

sayName(); // 'haha'

//////////////////////////////
'use strict'

window.name = 'haha'

function sayName() {
	const name = 'yunCow'
    
    console.log(this.name)
}

sayName(); // TypeError: Cannot read property 'name' of undefined

• 전역객체 window에 name을 할당하면 name을 출력해준다.
• 하지만 엄격모드인 use strict를 적용하면 전역객체는 항상 제외되고 전역객체를 참조하는 this는 undefined를 반환한다.

 

암시적 바인딩

• 암시적 바인딩은 함수가 객체의 메서드로 호출되는 상황에서 this가 바인딩 되는 것 이다.
• 이때 this는 정의한 객체, 즉 컨텍스트 객체에 바인딩된다.

const sayName = {
	name:'yunCow',
    fun: function() {
    console.log(this.name)
    }
}

sayName.fun(); // 'yunCow'

setTimeout(sayName.fun,100) // ' '

• 객체의 함수를 호출하면 제대로 작동하지만 함수를 콜백함수로 넘겨 사용할땐 fun이라는 함수일 뿐 sayName의 컨텍스트를 가지고 있지 않기에 암시적 바인딩이 소실된다.
• 즉 setTimeout 내부에서 호출되는 콜백은 객체의 컨텍스트에서 실행되는 것이 아니기에 기본 바인딩이 적용되어 전역 객체에 바인딩 된다.

 

명시적 바인딩

• 자바스크립트의 Function은 call(), apply(), bind()라는 프로토타입 메소드가 있다. 이 3가지 중 하나를 호출하여 this 바인딩을 코드에 명시하는것을 명시적 바인딩이라 한다.
• this는 이렇게 명시적으로 선택하여 바인딩한 객체에 바인딩된다.

// call 사용

const sayName = { name:'yunCow' }

function test() {
    console.log(this.name)
}

test.call(sayName) // 'yunCow'

// apply 사용

const sayName = { name:'yunCow' }

function test() {
    console.log(this.name)
}

test.apply(sayName) // 'yunCow'

// bind 사용

const sayName = { name:'yunCow' }

function test() {
    console.log(this.name)
}

const test2 = test.bind(sayName)

test2(); // 'yunCow'

• test 함수에 call, apply를 적용해 sayName객체를 넣어줌으로 this의 컨텍스트를 sayName에 바인딩 해줄 수 있다.
• call과 apply의 차이점은 두번째 파라미터로 객체의 인자를 전달해 주는데 이때 call은 매개변수의 목록, apply는 배열을 받게된다.
• bind는 전달받은 객체로 this가 바인딩된 함수를 반환 한다. 이걸 하드 바인딩이라 부르며 이후 이 함수는 호출될 때마다 지정된 객체의 this 바인딩을 가지고 호출된다.

 

new 바인딩

• 자바스크립트의 new 키워드는 함수를 호출할 때 앞에 new 키워드를 사용하는 것으로 객체를 초기화할 때 사용한다.
• 이렇게 사용되는 함수를 생성자 함수라고 부른다. (생성자 함수는 대문자로 시작하는게 기본 컨벤션)
• 생성자 함수에서는 this키워드를 해당 생성자를 이용해 생성할 객체에 대한 참조로 사용한다.

function SayName() {
	this.name = 'yunCow'
}

const Name = new SayName();

console.log(Name.name) // 'yunCow'

• SayName 함수에 new 키워드로 호출하면 새로운 객체가 생성되고 그 객체에 this로 바인딩 된다.
• 생성된 객체에 name이라는 속성에 yunCow 가 할당되고 객체는 Name이라는 변수에 할당된다.

 

화살표 함수

• 화살표 함수는 ES6에 추가된 문법으로 this를 바인딩할 때의 규칙들이 적용되지 않는다.
• 화살표 함수는 렉시컬 스코프(자신이 선언된 곳을 기억하는 스코프)에 의해 컨텍스트 객체가 this에 바인딩된다.

const sayName = {
	name:'yunCow',
    fun: () => {
    console.log(this.name)
    }
}

sayName.fun(); // ' '


const sayName = {
  name: "yunCow",
  fun: function () {
    setTimeout(() => {
      console.log(this.name);
    }, 1);
  },
};

sayName.fun(); // 'yunCow'

• 첫번째 예시의 화살표 함수로 정의한 메서드는 객체를 가리키지 않고 상위 컨텍스트인 window를 가르키므로 메서드를 화살표 함수로 정의하는 건 바람직하지 않다. ( ES6의 축약 메소드 표현을 사용하는 것이 좋다. )
• 화살표 함수를 메서드 함수 내에 setTimeout 콜백함수로 사용할 경우 this는 sayName 객체를 가르키고 있으므로 실행될때의 name은 'yunCow' 를 가르키게 된다.
• this에서의 화살표 함수는 apply, bind 등 함수나 new함수로 오버라이드 할수 없다. 그러니 콜백함수에만 사용하도록 하자.