JavaScript는 함수형 프로그래밍에 뿌리를 두고 객체 지향 프로그래밍(OOP) 기능을 갖춘 강력하고 유연한 언어입니다. JavaScript에서 OOP의 중심에 있는 두 가지 중요한 개념은 새로운 것입니다. 이러한 키워드는 간단해 보일 수 있지만 숙련된 개발자라도 마스터하기 어려울 수 있는 미묘한 차이가 있습니다. 이 블로그 게시물에서는 JavaScript에서 new 및 this의 작동 방식을 자세히 살펴보고 예제와 모범 사례를 통해 이들의 동작을 분석할 것입니다.
핵심적으로 이는 함수가 호출되는 객체를 참조하는 컨텍스트 종속 키워드입니다. this가 정적으로 바인딩되는 다른 언어와 달리 JavaScript에서는 함수가 호출되는 방법과 위치에 따라 this 값이 변경될 수 있습니다.
간단히 말하면:
나중에 블로그에서 예시를 통해 이러한 맥락을 살펴보겠습니다.
JavaScript의 new 키워드는 사용자 정의 객체나 Date, Array 등과 같은 내장 객체의 인스턴스를 생성하는 데 사용됩니다. 생성자 함수와 함께 new를 사용하면 새 객체가 생성되고 이를 해당 객체에 바인딩합니다. , 기본적으로 프로토타입에 연결됩니다.
예:
function Car(make, model) {
this.make = make;
this.model = model;
}
const myCar = new Car("Tesla", "Model 3");
console.log(myCar); // { make: 'Tesla', model: 'Model 3' }
new를 사용할 경우:
맞춤 함수를 사용하여 new의 동작을 시뮬레이션해 보겠습니다.
function simulateNew(constructor, ...args) {
const obj = {}; // Step 1: Create a new empty object
Object.setPrototypeOf(obj, constructor.prototype); // Step 2: Link the object to the constructor's prototype
const result = constructor.apply(obj, args); // Step 3: Bind this and execute the constructor
return result instanceof Object ? result : obj; // Step 4: Return the object
}
function Person(name) {
this.name = name;
}
const john = simulateNew(Person, "John Doe");
console.log(john.name); // John Doe
이 기능은 새 키워드와 동일한 단계를 따르며, 비하인드 스토리 메커니즘을 보여줍니다.
전역 컨텍스트(비엄격 모드)에서 이는 전역 개체(브라우저의 창)를 나타냅니다.
console.log(this === window); // true
function showThis() {
console.log(this); // window
}
showThis();
엄격 모드('use strict';)에서는 전역 컨텍스트에서 정의되지 않습니다.
function Car(make, model) {
this.make = make;
this.model = model;
}
const myCar = new Car("Tesla", "Model 3");
console.log(myCar); // { make: 'Tesla', model: 'Model 3' }
객체 메소드 내에서 사용될 경우 해당 메소드를 소유한 객체를 의미합니다.
function simulateNew(constructor, ...args) {
const obj = {}; // Step 1: Create a new empty object
Object.setPrototypeOf(obj, constructor.prototype); // Step 2: Link the object to the constructor's prototype
const result = constructor.apply(obj, args); // Step 3: Bind this and execute the constructor
return result instanceof Object ? result : obj; // Step 4: Return the object
}
function Person(name) {
this.name = name;
}
const john = simulateNew(Person, "John Doe");
console.log(john.name); // John Doe
여기서는 Greeting 메소드가 호출되는 컨텍스트이기 때문에 person 객체를 참조합니다.
생성자 함수에서는 새로 생성된 객체를 의미합니다.
console.log(this === window); // true
function showThis() {
console.log(this); // window
}
showThis();
"use strict";
function showThis() {
console.log(this); // undefined
}
showThis();
이벤트 리스너에서 화살표 함수를 사용할 때 이는 어휘적으로 바인딩되며 다음 요소를 참조하지 않습니다.
const person = {
name: "Alice",
greet() {
console.log(this.name); // 'Alice'
},
};
person.greet();
function Animal(type) {
this.type = type;
}
const dog = new Animal("Dog");
console.log(dog.type); // Dog
const button = document.querySelector("button");
button.addEventListener("click", function () {
console.log(this); // the button element
});
전역 함수에서 이 항목을 사용하지 마세요: 특히 엄격 모드에서 예상치 못한 동작이 발생할 수 있으므로 전역 함수에서는 이 항목을 사용하지 않는 것이 일반적으로 좋습니다.
클래스 구문: ES6부터 클래스 구문을 사용하면 this 및 new로 생성자 함수를 정의하는 보다 직관적인 방법이 제공됩니다.
button.addEventListener("click", () => {
console.log(this); // refers to the outer scope (e.g., window)
});
new 및 this 키워드는 JavaScript의 객체 지향 패러다임에서 중추적인 역할을 하며 객체와 그 동작을 생성하고 관리할 수 있게 해줍니다. 이것이 다양한 컨텍스트에서 어떻게 작동하는지, 그리고 새로운 객체 인스턴스가 어떻게 구성되는지 이해하는 것은 강력하고 확장 가능한 JavaScript 코드를 작성하는 데 중요합니다. 이러한 개념을 익히면 일반적인 함정을 피하고 더 깔끔하고 유지 관리하기 쉬운 코드를 작성할 수 있습니다.
이러한 핵심 JavaScript 개념에 대한 이해를 확고히 하기 위해 계속해서 실험하고 예제를 작성해 보세요!
재미있게 읽으셨나요? 이 기사가 통찰력이 있거나 도움이 되었다면 커피 한 잔 사서 내 작업을 지원해 보세요. 귀하의 기여는 이와 같은 콘텐츠를 더 많이 제공하는 데 도움이 됩니다. 가상 커피를 마시려면 여기를 클릭하세요. 건배!
위 내용은 JavaScript의 새로운 기능에 대한 심층 분석: 객체 지향 프로그래밍의 힘 활용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
