JavaScript의 this 키워드는 일반 함수와 화살표 함수에서 다르게 동작하기 때문에 혼동될 수 있습니다. 이 블로그 게시물에서는 이것이 두 가지 유형의 함수에서 어떻게 작동하는지 설명하고, 이러한 차이점이 존재하는 이유를 탐색하고, JavaScript에서 이를 이해하는 데 필요한 기본 지식을 제공합니다.
JavaScript의 일반 함수는 function 키워드를 사용하여 정의됩니다. 이러한 함수에서 this의 값은 함수가 호출되는 방식에 따라 달라집니다. 다음은 몇 가지 예입니다.
function regularFunction() { console.log(this); } regularFunction(); // Logs the global object (window in browsers)
설명: 비엄격 모드에서 함수가 전역 컨텍스트(객체의 메서드가 아님)에서 호출될 때 이는 전역 객체(브라우저의 창 또는 노드의 전역)를 나타냅니다. .js).
'use strict'; function regularFunction() { console.log(this); } regularFunction(); // Logs undefined
객체의 메소드로 함수를 호출할 경우 해당 객체를 참조합니다.
const obj = { method: function() { console.log(this); } }; obj.method(); // Logs obj
설명: 이 경우 함수가 obj의 메소드로 호출되기 때문에 이는 obj를 가리킵니다.
함수를 생성자로 사용하는 경우(new 키워드로 호출) 새로 생성된 인스턴스를 참조합니다.
function Person(name) { this.name = name; this.sayHello = function() { console.log(`Hello, my name is ${this.name}`); }; } const person1 = new Person('Alice'); person1.sayHello(); // Logs "Hello, my name is Alice" const person2 = new Person('Bob'); person2.sayHello(); // Logs "Hello, my name is Bob"
설명: new로 호출할 때 Person 생성자 함수 내부의 this는 생성되는 새 인스턴스를 참조합니다. 각각의 새 인스턴스(person1 및 person2)는 고유한 이름 속성과 sayHello 메서드를 갖습니다.
호출, 적용 또는 바인딩을 사용하여 이를 명시적으로 바인딩할 수 있습니다.
function regularFunction() { console.log(this); } const obj = { value: 42 }; regularFunction.call(obj); // Logs obj regularFunction.apply(obj); // Logs obj const boundFunction = regularFunction.bind(obj); boundFunction(); // Logs obj
설명: 호출하고 적용하면 이 값이 obj로 설정된 함수가 즉시 호출되고, 바인딩은 이 값이 obj에 영구적으로 바인딩된 새 함수를 생성합니다.
ES6에 도입된 화살표 함수에는 자체 this 컨텍스트가 없습니다. 대신, 주변(어휘) 범위에서 이를 상속받습니다. 이는 특정 상황에서 화살표 기능을 유용하게 만듭니다.
화살표 함수는 정의된 범위에서 이를 상속받습니다.
const arrowFunction = () => { console.log(this); }; arrowFunction(); // Logs the global object (window in browsers)
설명: 화살표 함수에는 자체 this가 없습니다. 그들은 이것을 주변 범위에서 사용합니다. 여기서는 함수가 전역 범위에 정의되어 있으므로 전역 개체를 참조합니다.
'use strict'; const arrowFunction = () => { console.log(this); }; arrowFunction(); // Logs undefined
일반 함수와 달리 화살표 함수는 메서드로 호출될 때 자체 this를 가져오지 않습니다. 이는 바깥쪽 범위에서 상속됩니다.
const obj = { method: () => { console.log(this); } }; obj.method(); // Logs the global object (window in browsers) or undefined in strict mode
설명: 화살표 함수는 자체 this를 바인딩하지 않고 어휘 범위에서 상속합니다. 이 예에서는 obj가 아닌 전역 객체 또는 엄격 모드에서 정의되지 않은 객체를 나타냅니다.
화살표 함수가 다른 함수 내부에 정의되면 외부 함수에서 이를 상속받습니다.
function outerFunction() { const arrowFunction = () => { console.log(this); }; arrowFunction(); } const obj = { value: 42, outerFunction: outerFunction }; obj.outerFunction(); // Logs obj, because `this` in arrowFunction is inherited from outerFunction
설명: 이 경우 화살표 함수 내부의 this는 externalFunction의 this와 동일한 것을 의미하며 obj입니다.
이벤트 핸들러의 화살표 함수는 이벤트를 트리거하는 요소가 아닌 주변 어휘 범위에서 이를 상속합니다.
const button = document.querySelector('button'); button.addEventListener('click', () => { console.log(this); }); // Logs the global object (window in browsers) or undefined in strict mode
Explanation: The arrow function does not bind this to the button element; it inherits it from the surrounding scope, which is the global scope or undefined in strict mode.
The difference between regular functions and arrow functions lies in how they handle this:
To understand the behavior of this in JavaScript, you need to know the following concepts:
Understanding these distinctions will help you write more predictable and maintainable JavaScript code. Whether you're using regular functions or arrow functions, knowing how this works is crucial for effective JavaScript development.
위 내용은 \"this\" 키워드가 일반 함수와 화살표 함수에서 다르게 동작하는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!