Javascript & this

자바스크립트는 다른 언어와 다르게 this 키워드는 엄격 모드 , 비엄격 모드에서 일부 차이가 일어난다.

this의 값
실행 컨텍스트(global, function 또는 eval)의 프로퍼티는 비엄격 모드에서 항상 객체를 참조하며, 엄격 모드에서는 어떠한 값이든 될 수 있다.

function f1() {
  return this;
}

// 브라우저
f1() === window; // true

// Node.js
f1() === global; // true

this의 기본값으로 브라우저에서는 window인 전역 객체를 참조한다.

function f2(){
  "use strict"; // 엄격 모드 참고
  return this;
}

f2() === undefined; // true

화살표 함수(표현문)에서의 this

const obj = {
  name: 'console',
  sayName(){
    console.log(this.name)
	const inner = () => {
      console.log(this.name); // console
    }
    inner();
  }
}

obj.sayName(); //console

() => 화살표 함수일때 this는 부모요소를 가르킨다.

Funcion(선언문) 함수에서의 this

const obj = {
  name: 'console',
  sayName(){
    console.log(this.name)
	function inner() {
      console.log(this.name); // window
    }
    inner();
  }
}

obj.sayName(); //console

function 선언문에서 this는 window를 가르킨다.

call / apply / bind 를 사용해 this를 명시적으로 조작가능

call : 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출
apply : 주어진 this 값과 배열 (또는 유사 배열 객체) 로 제공되는 arguments 로 함수를 호출
bind : bind() 메소드가 호출되면 새로운 함수를 생성합니다. 받게되는 첫 인자의 value로는 this 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공

call()은 인수 목록을, 반면에 apply()는 인수 배열 하나를 받는다는 점이 중요한 차이가 있다.

const obj = {
  name: 'console',
  sayName(){
    console.log(this.name)
	function inner() {
      console.log(this.name); // console
    }
    inner.call(obj); 
    // inner.apply(obj)
    // inner.bind(obj)()
  }
}

obj.sayName(); //console

globalThis로 표준화!

전역 globalThis 속성은 전역 this 값을 가진 전역 객체를 반환한다.

바야흐로 오래전부터 Javascript 환경이지만 전역 범위에 접근 하는건 서로 다른 구문을 사용했다.
예로 들면 웹에서는 window, self, frames 를 사용할 수 있지만,
Web Workers에서는 self만 동작,
Node.js 에서는 global만 사용해야 한다.

하지만 globalThis를 사용하면 환경에 무관하게 전역 this값, 전역 객체에 접근하는 표준 방법을 제공 👍🏻

환경별 전역 접근 더 이상 필요하지 않습니다!

if (typeof globalThis.setTimeout !== 'function') {
  // no setTimeout in this environment!
}

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/globalThis