조각조각 - this 종합 정리!!

eocode·2024년 3월 6일
this자바스크립트조각조각
0

자바스크립트 조각조각

목록 보기
6/11
post-thumbnail

목차

  1. this
    1. this란?
    2. 일급 함수와 this 바인딩 규칙
  2. this 바인딩 규칙
    1. 함수 형태(function 키워드 함수(일반 함수, 익명 함수) vs 화살표 함수)
    2. 전역 문맥 vs 함수 내부
      1. 전역 문맥에서 this
      2. 함수 내부에서의 this
        1. 기본 바인딩
        2. 암시적 바인딩
        3. new 바인딩
        4. 명시적 바인딩
  3. this 핵심 정리
    1. this 파악 과정 정리
    2. this 바인딩 규칙 정리 표
      1. 전역 문맥에서의 this 값 결정
      2. ⭐️ 다양한 함수 내부 this 값 결정
  4. 참고 자료

1. this

this란?

일반적인 객체 지향 언어에서 this는 함수가 속하는 객체를 가르키지만 자바스크립트의 this는 실행 컨텍스트에 따라 바인딩 값이 달라지는 특별한 식별자입니다.

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 추상화한 개념으로 자바스크립트 엔진이 코드를 실행하기 위해 필요한 모든 정보를 담고 있는 객체입니다. 실행 컨텍스트는 코드(함수)가 실행되는 순간 생성되어 콜스택(실행 컨텍스트 호출 스택)에 쌓이며 이때 this 바인딩 및 변수 환경, 어휘 환경 요소의 값이 결정됩니다.

callstack-this

위 그림을 보면 더 쉽게 이해가 가능합니다. 자바스크립트 코드가 실행되면 전역 실행 컨텍스트가 생성되고 콜스택에 올라갑니다. 이때 전역 실행 컨텍스트의 this 값이 this 바인딩 규칙에 따라 결정됩니다. 이후 코드(함수)가 실행되면 함수 실행 컨텍스트가 생성되고 콜스택에 올라갑니다. 마찬가지로 이때도 this 값이 this 바인딩 규칙에 따라 결정됩니다. 간단히 정리하자면 동적으로 코드(함수)가 실행되면 실행 컨텍스트가 생성되고 this 값이 결정됩니다.

이때 this 바인딩 규칙은 함수 호출 환경에 따라 달라집니다. 예를들어 '화살표 함수 형태인지 아닌지', '코드가 엄격모드로 동작하는지 아닌지' 등 다양한 함수 호출 환경에 따라 this 바인딩 규칙이 달라집니다.

일급 함수와 this 바인딩 규칙

함수 호출 환경에 따라 this 바인딩 규칙이 달라집니다. 함수 호출 환경이 다양하지 않다면 this 바인딩 규칙도 다양하지 않아 this 바인딩 값 파악이 비교적 쉬웠을 것입니다. 하지만 자바스크립트 함수 호출 환경은 매우 다양합니다. 그 이유는 바로 자바스크립트의 일급 함수 특성 때문입니다.

일급 함수는 함수를 일급 객체로 취급해 값처럼 사용하는 것을 말합니다. 이 덕분에 함수가 다양한 형태를 가지게됩니다. 예를 들어 함수를 다른 함수의 인자로 전달하거나 변수에 할당할 수 있습니다. 함수가 특정 객체의 속성 값으로 사용되는 경우 객체의 메서드로 동작합니다. 함수가 변수에 할당되면 함수 표현식으로 함수를 정의할 수 있습니다. 함수 표현식으로 함수를 정의할 수 있기 때문에 화살표 함수를 활용한 함수 정의도 가능해집니다.

이러한 특성 덕분에 다양한 방식으로 함수를 호출할 수 있습니다. 이것은 this 바인딩을 더욱 복잡하게 만듭니다. 함수가 어떤 컨텍스트에서 실행되는지, 어떤 방식으로 호출되는지에 따라 this의 값이 달라지기 때문에, this를 정확히 이해하고 사용하는 것이 중요합니다.

2. this 바인딩 규칙

⭐️ 함수 형태(function 키워드 함수(일반 함수, 익명 함수) vs 화살표 함수)

this 바인딩 규칙 중 가장 먼저 알아두어야할 것은 바로 화살표 함수입니다. 화살표 함수는 본인만의 this를 가지지 않고 외부 스코프에서 this를 받아와 사용합니다. 

//함수 표현식(익명함수 이용)
const f1 = function () {
	console.log(this);
}
//함수 선언식
function f2() {
	console.log(this);
}
//함수 표현식(화살표 함수 이용)
const f3 = () => {
	console.log(this);
};

f1(); //엄격 모드 : undefined, 비엄격모드 : window
f2(); //엄격 모드 : undefined, 비엄격모드 : window
f3(); //엄격 모드 : window, 비엄격모드 : window

위 코드에 function 키워드 함수(일반 함수, 익명 함수)를 이용한 함수 표현식, 함수 선언문과 화살표 함수를 이용한 함수 표현식이 나타나있습니다. 이때 function 키워드를 사용한 함수의 경우 함수 호출 방식에 따라 동적으로 this가 결정됩니다.

따라서 f1, f2 함수의 결과로 엄격모드에선 'undefined', 비엄격 모드에선 '전역 객체인 window 객체'가 출력됩니다.
(이 경우 함수 호출 방식이 전역 문맥에서의 독립 실행이기 때문입니다.)

반면에 화살표 함수를 사용한 함수 표현식의 경우 고유의 this를 가지지 못해 외부 스코프로 부터 this를 받아옵니다. 결과적으로 f3 함수의 결과로 전역 문맥의 this 값인 '전역 객체, window'가 출력됩니다.
(함수 내부가 아닌 전역 문맥에서의 this는 엄격모드 여부와 상관없이 전역 객체를 나타냅니다.)

f1(), f2()의 출력 결과가 위 처럼 정해진 이유나 전역 문맥의 this 값이 전역 객체인 이유는 아래에서 자세히 알아보겠습니다. 우선 중요한 것은 화살표 함수의 경우 this를 가지지 않고 외부 스코프에서 this를 받아와 사용한다는 것입니다. 즉 위 코드에서 화살표 함수의 this 값은 외부 스코프인 전역 문맥에서의 this를 받아와 사용됩니다. 따라서 화살표 함수의 this는 전역 객체인 window 객체'로 결정됩니다. 이때 외부 스코프의 기준은 함수 호출로 정해지는 것이 아니라 함수 선언 코드를 기준으로 정해집니다.

function 키워드 함수의 this화살표 함수의 this
함수 호출 환경에 따라 this 결정고유의 this를 가지지 않아 외부 스코프의 this를 대신 사용
(호출 환경 X, 함수 선언 코드를 기준으로 외부 스코프의 this를 가져와 사용)

전역 문맥 vs 함수 내부

전역 문맥에서의 this

함수 내부가 아닌 전역 문맥에서의 this는 전역 객체를(browser : window, node : global) 가르킵니다. 전역 문맥에서의 this는 엄격모드이든 아니든 상관없이 동일하게 전역 객체를 가르킵니다.

//전역 문맥, 엄격 모드
'use strict'
console.log(this); //window 전역 객체
if(true){
	console.log(this); //window 전역 객체
}
//전역 문맥, 비엄격 모드
console.log(this); //window 전역 객체
if(true){
	console.log(this); //window 전역 객체
}
this결정

자바스크립트 코드가 실행되면 전역 실행 컨텍스트가 생성되어 콜스택에 올라갑니다. 이때 전역 실행 컨텍스트의 this 바인딩 값은 전역 객체(window, global)를 가르키도록 정해져있습니다. '전역 문맥에서 사용되는 this는 전역 실행 컨텍스트의 this 바인딩 값이고 이는 전역 객체를 가르키도록 정해져있다'라고 이해하는 것이 편합니다.

함수 내부에서의 this

함수 내부가 아닌 전역 문맥에서 this가 어떻게 정해지는지 알아봤습니다. 이제 함수 내부에서 this가 어떻게 정해지는지 알아보겠습니다. 이때 다양한 함수 환경이 존재합니다. 대표적으로 4가지 함수 환경이 존재하며 이에 따른 4가지 바인딩 규칙이 존재합니다. 함수가 독립적으로 실행되는 경우 기본 바인딩 규칙, 객체의 메서드로 실행되는 경우 암시적 바인딩 규칙, 생성자 함수인 경우 new 바인딩 규칙, this를 지정해주는 메서드가 사용된 경우 명시적 바인딩 규칙을 따릅니다.

this 바인딩 규칙

  1. 기본 바인딩 (함수 독립 실행)
  2. 암시적 바인딩 (메서드 실행)
  3. new 바인딩 (생성자 함수 실행)
  4. 명시적 바인딩 (this 지정)

1. 기본 바인딩

독립실행함수();

위 코드 처럼 함수가 독립적으로 실행된 경우 기본 바인딩 규칙으로 this가 결정됩니다. 이 경우 this는 전역 객체를 가르킵니다. 단! 엄격모드 환경에서 this는 undefined를 가르킵니다.

1. 기본 형태

function f1(){
	console.log(this);
}
const f2 = function() {
	console.log(this);
}

f1(); //엄격 모드 : undefined, 비엄격모드 : window
f2(); //엄격 모드 : undefined, 비엄격모드 : window

function 키워드를 사용한 함수가 독립 실행될 때 this는 전역 객체를 가르킵니다.
(엄격모드 환경에서 this는 undefined)

function f1(){
	console.log(this);
}
function outer(){
	f1();//엄격 모드 : undefined, 비엄격모드 : window
}

outer();

함수가 전역 문맥이 아닌 다른 함수 내부에서 독립 실행 되어도 똑같이 기본 바인딩 규칙이 적용됩니다.

2. window.독립실행함수() 형태

function f1(){
	console.log(this);
}
window.f1(); //엄격 모드 : window, 비엄격모드 : window

이 경우 엄격 모드에서도 this는 window 객체를 가르킵니다. f1이 전역 객체인 window 객체의 메서드로 동작했기 때문에 암시적 바인딩 규칙이 적용되어 this는 window 객체를 가르킵니다.

callstack-this

🚨 전역 문맥에서 정의된 모든 함수가 window 객체의 메서드로 동작하는 것은 아닙니다. 함수 선언문과 var 타입 함수 표현식만 window 객체의 메서드로 사용이 가능합니다.

함수 선언문, var 타입 함수 표현식은 window 전역 객체의 메서드로 let, const 타입 함수 표현식은 선언적 환경 레코드에 저장되기 때문입니다.
(위 실행 컨텍스트 그림 참조)

var arrow () => {
	console.log(this);
}
window.arrow(); //엄격 모드 : window, 비엄격모드 : window

주의 할점은 위 처럼 var 타입 함수 표현식의 경우 window 객체의 메서드로 실행이 가능하지만 this가 암시적 바인딩으로 결정되는 것이 아닙니다. 화살표 함수이기 때문에 외부 스코프의 this를 가져온 값이 window 객체인것입니다.

⭐️⭐️ 같은 결과가 나와서 헷갈릴 수 있는데 화살표 함수는 고유의 this 값을 가지지 않는 다는 것을 잊으면 안됩니다!!!

3. A = B.메서드 할당 형태

const obj = {
	name: 'obj',
	f1: function () {
		console.log(this);
	},
	f2: () => {
		console.log(this);
	}
}

const f3 = obj.f1;

f3(); //엄격 모드 : undefined, 비엄격모드 : window

const f3 = obj.f1 이런 형태면 f3이 메서드로 존재해 암시적 바인딩 규칙을 따를 것 같지만 그저 obj.f1의 참조값이 복제된 것이어서 기본 바인딩 규칙으로 동작합니다. 따지고 보면 아래 코드와 같습니다.

	//const f3 = obj.f1;
	const f3 = function () {
		console.log(this);
	};

A = B.메서드 실행의 결과로 A가 메서드가 되는것은 아닙니다!! (그저 참조값 할당!!)

🚨 3. 화살표 함수로 정의된 함수가 독립 실행된 경우

const arrow = () =>{
	console.log(this);
}

arrow();

arrow 함수가 화살표 함수를 이용한 함수 표현식으로 정의 되었기 때문에 this를 가지지 않습니다. 따라서 외부 스코프로부터 this를 받아와 사용해야 합니다. 이 경우 그저 외부 스코프로 부터 this를 가져와 사용하는 것이기 때문에 기본 바인딩을 따르는 것이 아닙니다.

this 결정 과정
arrow 함수는 화살표 함수로 정의되어있다.
=> arrow 함수의 외부 스코프는? => 전역 문맥
=> 전역 문맥의 this는? => window 객체
==> arrow 함수 내부 this는 window 객체

화살표 함수의 외부 스코프 this = 화살표 함수가 선언된 위치의 스코프 this

2. 암시적 바인딩

메서드 내부 this는 암시적 바인딩 규칙을 따라 결정됩니다. 암시적 바인딩 규칙은 비교적 간단합니다. 그저 this는 메서드를 호출한 객체를 가르킵니다. 하지만 여기에서도 주의해야할 사항이 존재합니다. 앞서 계속 언급하였듯이 화살표 함수는 고유의 this를 가지지 않기 때문에 메서드가 화살표 함수로 정의되어있는지 확인하고 암시적 바인딩 규칙을 적용할지 외부 스코프의 this를 가져올 지 정해야 합니다.

const obj = {
	name : 'obj',
	f1 : function() {
		console.log(this);
	},
	f2 : () => {
		console.log(this);
	}
}

obj.f1(); //메서드를 호출한 객체를 출력 {name: 'obj', f1: ƒ, f2: ƒ}
obj.f2(); //외부 스코프에서 this를 가져와 출력 => 전역 문맥의 this인 window 객체

function 키워드가 사용된 메서드의 경우 암시적 바인딩 적용되어 f1 메서드를 호출한 obj 객체가 출력됩니다. 하지만 화살표 함수가 사용된 메서드인 f2 메서드는 외부 스코프로부터 this를 가져와 window 객체를 출력합니다.

함수this결정

즉, 메서드가 실행되어 콜스택에 실행 컨텍스트가 생성되 올라오면 위 그림처럼 this 바인딩 값이 메서드를 호출한 객체를 참조합니다.

3. new 바인딩

생성자 함수 내부의 this는 new 바인딩 규칙을 따라 결정됩니다. new 바인딩 규칙이 무엇인지 알아보기 전에 우선 생성자 함수가 무엇인지 알아야합니다. 이전 함수 정리글과 프로토타입 정리글에서 생성자 함수가 무엇인지 자세히 알아보았습니다. 간단히 정리하자면 생성자 함수는 공유하는 프로토타입을 가진 인스턴스(객체)를 만드는 함수입니다.

function MakeBicycle(name, color, wheel) {
	this.name = name;
	this.color = color;
	this.wheel = wheel;
	this.go = function () {
		console.log("go!");
	}
}

MakeBicycle.prototype.newMethod = function () {
	console.log(this.name + 'bang!!!');
};

const bicycleA = new MakeBicycle('aType', 'white', 4);

console.log(bicycleA) //MakeBicycle {name: 'aType', color: 'white', wheel: 4, go: ƒ}

//인스턴스인 bicycleA는 생성자 함수의 프로토타입에 추가된 newMethod에 접근해서 호출할 수 있다.
bicycleA.newMethod(); //aTypebang!!!

코드로 살펴보겠습니다. MakeBicycle 함수는 생성자 new 키워드와 함께 사용하여 인스턴스를 생성할 수 있습니다. 생성자 함수 내부를 살펴보면 this가 존재하는데 여기서 this가 가리키는 것은 생성자 함수로 생성되는 인스턴스 입니다. 즉 const bicycleA = new MakeBicycle('aType', 'white', 4); 코드가 실행되면 생성자 함수 내부의 this는 생성되는 인스턴스인 bicycleA 객체를 가리키게 됩니다. 그렇기 때문에 인스턴스가 생성되며 속성과 값이 결정될 수 있습니다. 메서드 또한 마찬가지입니다. 생성자 함수의 this가 생성되는 인스턴스를 가르키기 때문에 생성자 함수 내부의 코드로 인스턴스의 메서드가 결정됩니다.

간단하게 생성자 함수 내부에서 사용되는 this는 생성자 함수가 생성하는 인스턴스를 가르킵니다.

🚨🚨🚨 메서드 정의 함수 형태 구분 (function 키워드 함수 vs 화살표 함수)

function MakeBicycle(name, color, wheel) {
	this.name = name;
	this.color = color;
	this.wheel = wheel;
	this.go = function () { //메서드를 function 키워드를 사용해 정의
		console.log(this);
	};
	this.go2 = () => { // 메서드를 화살표 함수로 정의
		console.log(this);
	}
}

위 코드의 go, go2 메서드는 각각 function 키워드를 사용한 익명함수와 화살표 함수로 정의되어 있습니다. 이 경우 그냥 메서드로 사용되서 둘다 똑같은거 아닌가? 싶지만 그렇지 않습니다. 두 go, go2 메서드 내부에서 사용되는 this는 동일하지 않습니다.

  1. function 키워드를 사용해 메서드를 정의한 경우(일반 함수, 익명 함수)
    function 키워드를 사용해 함수를 정의하는 경우 정의된 함수는 고유의 this를 가집니다. 또 이 this는 함수가 어떻게 호출되느냐에 따라 동적으로 결정됩니다.
    따라서 메서드로 호출되면 this는 메서드를 호출한 객체 즉 인스턴스를 가르키지만 메서드가 아닌 형태로 호출되면 this가 인스턴스를 가르키지 않을 수 있습니다.
    한마디로 정리하자면 이 경우 어떤 방식으로 호출되었느냐에 따라 this가 달라집니다.

    이 이유로 메서드로 사용할 때 화살표 함수를 사용하는 것보단 function 키워드를 통해 메서드를 정의하는 것이 적합합니다.

    function MakeBicycle(name, color, wheel) {
	...
	this.go = function () { //메서드를 function 키워드를 사용해 정의
		console.log(this);
	};
}

const test = new MakeBicycle('A', 'Red', 4);

test.go()
// test 인스턴스 출력

const notMethod = test.go;
notMethod(); 
// 비엄격 모드 : window 객체, 엄격 모드 : undefined
// 독립 실행되었기 때문에 기본 바인딩 규칙을 따라 this가 결정됨

  2. 화살표 함수를 사용해 메서드를 정의한 경우
    화살표 함수는 고유의 this를 가지지 않습니다. 그렇기 때문에 함수 선언 코드에 따라 외부 스코프의 this를 가져와 사용합니다. 즉 외부 스코프인 생성자 함수의 this를 가져와 화살표 함수의 this가 사용합니다. 결과적으로 화살표 함수 내부 this는 항상 생성자 함수 내부 this와 동일합니다. 아래 코드를 보면 위 경우와 다르게 메서드 아닌 독립 실행된 경우에도 똑같이 인스턴스를 출력하는 것을 확인 할 수 있습니다.

    function MakeBicycle(name, color, wheel) {
	...
	this.go = () => { //메서드를 화살표 함수를 이용해 정의
		console.log(this);
	};
}

const test = new MakeBicycle('A', 'Red', 4);

test.go()
// test 인스턴스 출력

const notMethod = test.go;
notMethod(); 
// test 인스턴스 출력

  3. 다른 객체의 메서드로 사용되는 경우 살펴보기
    아래 코드를 보면 두 경우의 차이를 좀 더 확실하게 알 수 있습니다. function 키워드를 사용한 메서드는 호출 환경에 따라 this가 달라지기 때문에 obj 객체의 메서드로 사용될 때 obj 객체를 가르킵니다. 반면에 함수 선언 코드를 기준으로 외부 스코프의 this, 즉 생성자 함수의 this를 가져다 사용하는 화살표 함수 메서드는 다른 객체의 메서드로 사용되어도 그대로 인스턴스를 가르킵니다.

function MakeBicycle(name, color, wheel) {
	this.name = name;
	this.color = color;
	this.wheel = wheel;
	
	this.go = function () { //메서드를 function 키워드를 사용해 정의
		console.log(this);
	};
	this.go2 = () => { //메서드를 화살표 함수를 이용해 정의
		console.log(this);
	};
}

const test = new MakeBicycle('A', 'Red', 4);

const obj = {
	go: test.go,
	go2: test.go2
}

obj.go(); 
// {go: ƒ, go2: ƒ}
// obj 객체가 메서드를 호출했기 때문에 obj 객체가 출력됨
obj.go2();
// MakeBicycle {name: 'A', color: 'Red', wheel: 4, go: ƒ, go2: ƒ}
// obj 객체가 메서드를 호출했음에도 불구하고 기존 test 인스턴스가 출력됨

핵심 개념 1

-function 키워드를 사용해 함수를 정의하는 경우 고유의 this를 가집니다.
-함수가 어떻게 호출되느냐에 따라 this가 결정됩니다.

핵심 개념 2

-화살표 함수는 고유의 this를 가지지 않습니다.
-함수 선언 코드에 따라 외부 스코프의 this를 가져와 사용합니다.(정적)
-항상 외부 스코프인 생성자 함수의 this를 가져와 사용합니다.

4. 명시적 바인딩

자바스크립트에서 this는 특정한 규칙에 따라 자동으로 결정되지만, 때로는 이러한 자동 결정이 개발자에게 혼란을 줄 수 있습니다. 그래서 자바스크립트는 개발자가 this를 직접 지정할 수 있는 방법을 제공하는데, 이를 명시적 바인딩이라고 합니다.

즉, this가 예상치 못한 값을 가리킬 때, 또는 다양한 객체와 상호작용하는 메서드를 다룰 때 등 this 판단이 어려울때 명시적 바인딩을 활용합니다. 이때 call, apply, bind 메서드를 통해 this 값을 지정(명시적 바인딩)할 수 있습니다. 결과적으로 개발자는 코드의 동작을 더 명확하고 예측 가능하게 만들 수 있습니다.

명시적 바인딩 메서드

  • call 메서드: 함수를 즉시 실행하면서 this를 특정 객체에 바인딩할 때 사용합니다.
  • apply 메서드: call과 유사하지만, 함수의 인자를 배열로 전달할 수 있습니다.
  • bind 메서드: 새로운 함수를 반환하며, 이 함수는 특정 this 값에 영구적으로 바인딩됩니다.

3. this 핵심 정리

this 파악 과정 정리

  1. 함수 내부 this인지 단순 전역 문맥에서 사용되는 this 인지 확인합니다.
    1. 단순히 전역 문맥 내부에서 this는 window 전역 객체를 가르킵니다.
    2. 엄격모드이든 아니든 상관없이 window 전역 객체를 가르킵니다.
  2. 함수 내부 this라면 함수 정의 형태를 파악합니다.
    • function 키워드 사용 정의 vs 화살표 함수
  3. function 키워드를 사용하여 정의된 경우(함수 호출에 따라 this가 결정[동적])
    1. 함수를 호출한 객체를 파악합니다.

      1. 함수를 호출한 객체가 존재하는 경우 (메서드로 실행, 암시적 바인딩)
        this가 함수를 호출한 객체를 가르킵니다. (엄격 / 비엄격 모두)

        🚨 window.함수()로 실행된 경우는 함수를 호출한 객체가 window 객체이기 때문에 this는 window 객체를 가르킵니다.

      2. 함수를 호출한 객체가 존재하지 않는 경우 (함수가 독립적으로 실행, 기본 바인딩)

        1. this가 window 전역 객체를 가르킵니다. (비엄격 모드)
        2. this는 undefined입니다. (엄격 모드)
  4. 화살표 함수로 정의된 경우(함수 선언 코드로 this 결정[정적])
    1. 화살표 함수는 this값을 가지지 않아 외부 스코프의 this 값을 가져와 사용합니다.
    2. 함수 선언 코드로 외부 스코프를 파악하고 this 결정
  5. 생성자 함수, 바인딩 메서드는 모두 일반 함수로만 사용 가능(화살표 함수로 생성자 함수 정의가 불가능하며 명시적 바인딩 메서드 사용도 불가능합니다.)
    1. 생성자 함수의 this는 생성된 인스턴스를 가르킨다.
    2. 바인딩 메서드가 사용되면 this가 명시적으로 지정된다.

this 바인딩 규칙 정리 표

전역 문맥에서의 this 값 결정

비엄격 모드 엄격 모드
전역 문맥에서의 this (함수 내부 X) window 전역 객체

⭐️ 다양한 함수 내부 this 값 결정

일반 함수 화살표 함수
비엄격 모드 엄격 모드 비엄격 모드 엄격 모드
독립 실행 함수 내부 this window 전역 객체 undefined

💡 함수 선언문, var 타입 함수 표현식으로 정의된 경우 window.함수() 실행 가능, 이때 this는 window 전역 객체를 가르킵니다.		 함수 선언 위치에서의 this

window 전역 객체 (함수가 전역 문맥에서 정의된 경우)

💡 화살표 함수는 고유의 this를 가지지 않고 외부 this를 사용
메서드 내부 this 함수를 호출한 객체 함수 선언 위치에서의 this

💡 화살표 함수는 고유의 this를 가지지 않고 외부 this를 사용
생성자 함수 내부 this 생성자 함수로 생성된 인스턴스 X

💡 화살표 함수로 생성자 함수 정의 불가능
바인딩 메서드 적용 후 this 바인딩 객체 X

💡 화살표 함수는 바인딩 메서드 사용 불가능

4. 참고 자료

화살표 함수때문에 this가 많이 헷갈렸는데 별코딩님 화살표 함수2 영상이 정말 많은 도움이 되었습니다!

profile
eocode
프론트엔드 개발자
이전 포스트

조각조각 - 함수

다음 포스트

조각조각 - 자바스크립트 실행 과정 살펴보기 총정리

0개의 댓글