This

Jung taeWoong·2021년 5월 10일

JavaScript

javascript

목록 보기

2/8

This

this는 현재 실행되는 코드의 실행 컨텍스트를 가리킨다.

실행 컨텍스트

자바스크립트 코드가 실행되는 환경
모든 javascript 코드는 실행 컨텍스트 내부에서 실행된다.
실행 가능한 코드를 형상화하고 구분하는 추상적인 개념
종류: 전역 실행컨텍스트, 함수 실행컨텍스트

Javascript This

다른 객체지향 언어의 this와 성격이 다르다
this는 함수 자신이나 함수의 렉시컬 스코프를 가리키는 레퍼런스가 아니라는 점을 분명히 인지
호출한 문맥에 따라서 this가 동적으로 변경된다.
자바스크립트의 this란 자기자신을 가리키는것이 아닌 함수 호출 시점에 바인딩되며 무엇을 가리킬지는 전적으로 함수를 호출한 코드에 달려있다.

console.log(this); // window 객체

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

logFunc(); // window 객체
/* 
global에서 호출하는것은 window에서 호출하는 것과 같다. === window.logFunc()
*/ 

class LogClass {
  log() {
    console.log(this);
  }
}
const bar = new LogClass();
bar.log(); // LogCLass 객체

class BoB {}
const bob = new Bob();
bob.run = test.log;
bob.run(); // BoB 객체 
/* 
run() 함수는 bob이 호출했기 때문에 this는 BoB을 가리킨다.
자바스크립트 this라는 정보를 가진 함수를 다른곳에 할당하는 순간 잃어버린다.
*/

변수는 글로벌 객체안에 등록이 되지 않는다.

자바스크립트에서 함수를 정의하면 기본적으로 정의된 함수는 global(window)에 등록되 접근이 가능하다.
let과 const 키워드로 변수를 할당시 global(window)에 등록이 되지 않는다.
var는 예외적으로 global(window)에 등록이된다.
- But, var는 hoisting과 재선언같은 문제로 사용하지 않는것이 좋다.
let과 const는 block scope, var은 function scope 이기 때문

class LogClass {
  log() {
    console.log(this);
  }
}
const bar = new LogClass();
const foo = bar.log(); 
foo(); // undefined
/*
let과 const로 등록된 변수는 윈도우에 등록되어져 있지 않으므로 선언한 변수를 
호출하는 것은 global(window)가 아니고 어떤 Object도 아니기 때문에 undefined
*/

This Binding

bind: 결속시키다, 묶다.

this를 특정 객체로 묶는 역할
this는 바인딩 우선순위를 결정하는 표준 바인딩 규칙을 가지고 있다.
new 바인딩 > 명시적 바인딩 > 암시적 바인딩 > 기본 바인딩

class LogClass {
  log() {
    console.log(this);
  }
}
const bar = new LogClass();
const foo = bar.log(); 
foo(); // undefined

const foo2 = bar.log.bind(bar); // bar(LogClass)로 바인딩

1. 기본 바인딩

가장 평범한 함수 호출인 단독 함수실행에 관한 규칙으로 나머지 규칙에 해당하지 않을 경우 적용되는 this의 기본 규칙
엄격 모드에서는 전역 객체가 기본 바인딩 대상에서 제외된다. (undefined)

2. 암시적 바인딩

호출부에서 콘텍스트 객체가 있는지 즉, 객체의 소유/포함 여부를 확인하는 것

암시적 소실

암시적으로 바인딩된 함수에서 바인딩이 소실되는 경우
const foo = bar.log;: bar 바인딩이 소실됨
ex: Callback Function

3. 명시적 바인딩

call(), apply(): Soft Binding
- 두 메서드는 this에 바인딩 할 객체를 첫 째 인자로 받아 함수 호출시 객체를 this로 세팅한다.
- this 바인딩이 도중에 소실되거나 프레임워크가 임의로 덮어져 써버리는 경우 해결 X
bind() Hard Binding
- 주어진 this 콘텍스트로 원본 함수를 호출하도록 하드코딩된 새 함수를 반환