자바스크립트에서 전에 없던 것처럼 '이것'을 배워보세요⚙️

JavaScript를 사용해 왔다면 'this'도 사용하면서 문제에 직면했을 것입니다.
주니어에서 시니어 개발자에 이르기까지 모든 사람은 'this' 키워드에 대해 어느 시점에서 문제를 겪었습니다.

So, in this article, I'll explain the 'this' keyword in JavaScript so you never get confused again.

'this' 키워드에 대해 알아보기 전에 JavaScript의 "use strict"에 대해 알아야 합니다.

JavaScript에서 "엄격한 사용"이란 무엇입니까?🤔

"엄격 모드"에서 코드를 실행하는 데 사용되는 리터럴 표현식입니다.

엄격 모드를 선언하려면:

엄격 모드는 스크립트 또는 함수의 시작 부분에 "use strict";를 포함하여 선언합니다.

"use strict";
x = 5.47;       // This will cause an error because x was not declared

"엄격한 사용"이 무엇을 위해 사용되는지에 대한 아이디어를 얻었기를 바랍니다. 엄격 모드에 대해 자세히 알아보려면 read this .

Fact: React and other frameworks "use strict" mode By default

이제 이 키워드로 돌아가겠습니다.
JavaScript에서 'this' 키워드는 다른 언어와 약간 다르게 동작합니다. 엄격 모드와 비엄격 모드도 다릅니다.
이것이 내가 엄격 모드를 처음 소개한 이유입니다.


이제 이 키워드는 개체를 나타냅니다.

글로벌 컨텍스트

console.log(this);

전역 실행 컨텍스트(함수 외부)에서 this는 엄격 모드인지 여부에 관계없이 Node.js의 전역 개체와 브라우저의 Windows 개체를 나타냅니다.

함수 컨텍스트

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

showThis();

엄격하지 않은 모드의 경우 함수 내에서 this는 Node.js의 전역 객체와 브라우저의 windows 객체를 참조합니다.
엄격 모드의 경우 이것은 정의되지 않은 것을 기본값으로 참조합니다.

함수가 객체 안에 있을 때

let obj = {
    name: 'myName',
    fun: function(){
        console.log(this);
    }
}

obj.fun();

개체 내부에 있는 함수 내에서 this를 사용하는 경우 this는 개체 자체를 참조합니다. 따라서 이것을 사용하여 해당 개체의 모든 키-값에 액세스할 수 있습니다.
엄격 모드와 비엄격 모드 모두 동일합니다.

객체 안에 있는 함수 안에 함수가 있을 때

let obj = {
    name: 'myName',
    fun: function(){
        function sec(){
            console.log(this);
        }
        sec();
    }
}

obj.fun();

엄격하지 않은 모드의 경우 이는 Node.js의 전역 객체와 브라우저의 windows 객체를 나타냅니다.
엄격 모드의 경우 이것은 정의되지 않은 것을 기본값으로 참조합니다.

클래스 컨텍스트

클래스는 내부에 있는 함수이므로 클래스와 함수 모두에서 this의 동작이 동일합니다. 그러나 특정 차이점과 제한 사항이 있습니다.

class Car {
  constructor(name) {
    this.myCar = name;
  }
}

x = new Car("Ford");
console.log(x.myCar);

이것은 클래스 함수 내의 일반 개체입니다.

다음은 우리가 배운 내용에 대한 간략한 설명입니다.

이 기사를 읽어 주셔서 감사합니다.