JavaScript 생성자 및 new 연산자(핵심 사항, 필수 읽기)

이 글에서는 주로 JavaScript 생성자와 new 연산자를 소개합니다. new 연산자의 이해, 코드 해석, 핵심 분석, new의 의미, 요약 등을 통해 지식 포인트를 종합적으로 소개합니다. 구체적인 작업 단계에 대한 자세한 설명은 아래에서 확인하실 수 있습니다. . 관심있는 친구들이 참고할 수 있습니다.

JS의 함수는 생성자일 수도 있고, new를 사용하여 객체를 생성할 때 해당 함수가 생성자이고, 객체를 통해 호출할 때 일반 함수로 호출될 수도 있습니다.

일반 함수를 만드는 방법에는 명시적 선언, 익명 정의, new Function() 세 가지가 있습니다.

new를 통해 새 객체가 생성되면 JS의 맨 아래 레이어는 새 객체의 프로토타입 체인을 생성자의 프로토타입 객체로 가리키므로 새 객체와 함수 객체 사이에 프로토타입 체인이 설정됩니다. 함수 개체 프로토타입의 새 개체 메서드 및 속성을 통해 액세스됩니다.

다른 고급 언어와 마찬가지로 Javascript에도 생성자와 새 연산자가 있습니다. new는 클래스를 인스턴스화하고 메모리에 인스턴스 객체를 할당하는 데 사용됩니다. 그런데 자바스크립트에서는 모든 것이 객체입니다. 왜 객체를 생성하기 위해 new를 사용해야 할까요? 이 기사에서는 Javascript의 new에 대한 미스터리를 탐구하게 됩니다...

1. new 연산자 이해하기

function Animal(name){
this.name = name;
}
 Animal.color = "black";
 Animal.prototype.say = function(){
console.log("I'm " + this.name);
 };
 var cat = new Animal("cat");

 console.log(
 cat.name, //cat
 cat.color //undefined
 );
 cat.say(); //I'm cat

 console.log(
 Animal.name, //Animal
 Animal.color //back
 );
 Animal.say(); //Animal.say is not a function

2. 코드 해석

1-3번째 줄은 Animal, 속성: name은 이에 대해 정의되며, name의 값은 함수가 실행될 때 형식 매개변수입니다.

Line 4는 정적 속성인 Animal 객체의 색상을 정의하고(동물 자체는 함수 객체임) 값 "black"을 할당합니다.

Line 5-7은 Animal 함수의 프로토타입 객체 프로토타입에 say()를 정의합니다. 메소드, say 메소드는 이것의 이름 값을 출력합니다.

라인 8은 새 키워드를 통해 cat이라는 새 객체를 생성합니다

라인 10-14 cat 객체는 이름과 색상 속성에 액세스하려고 시도하고 say 메소드를 호출합니다.

라인 16-20에서 Animal 객체는 이름과 색상 속성에 액세스하려고 시도하고 say 메서드를 호출합니다.

3. 핵심 분석

8번째 코드 라인이 핵심입니다:

var cat = new Animal("cat");var cat = new Animal("cat");

Animal 本身是一个普通函数，但当通过new来创建对象时，Animal就是构造函数。

JS引擎执行这句代码时，在内部做了很多工作，用伪代码模拟其工作流程如下：

new Animal("cat") = {

var obj = {};

obj.__proto__ = Animal.prototype;

var result = Animal.call(obj,"cat");

return typeof result === 'object'? result : obj;
}

（1）创建一个空对象obj;

（2）把obj的proto指向构造函数Animal的原型对象prototype，此时便建立了obj对象的原型链：obj->Animal.prototype->Object.prototype->null

（3）在obj对象的执行环境调用Animal 函数并传递参数“cat”。 相当于var result = obj.Animal(“cat”)。

（4）考察第3步返回的返回值，如果无返回值或者返回一个非对象值，则将obj返回作为新对象；否则会将返回值作为新对象返回。

理解了其运行机制以后，我们知道cat其实就是过程（4）的返回值，因此我们对cat对象的认知就多了一些：

cat的原型链是：cat->Animal.prototype->Object.prototype->null

Animal 자체는 일반적인 함수입니다. 하지만 new를 통해 객체를 생성할 때는 Animal이 생성자입니다.

JS 엔진이 이 코드를 실행할 때 내부적으로 많은 작업을 수행합니다. 의사 코드는 다음과 같이 작업 흐름을 시뮬레이션하는 데 사용됩니다.

var L = A.__proto__;
var R = B.prototype;
if(L === R)
return true;

(1)

빈 객체 obj 생성;

(2)

obj의 proto 지점을 생성자 Animal의 프로토타입 개체 프로토타입에 넣습니다. 이때 obj 개체의 프로토타입 체인이 설정됩니다. obj->Animal.prototype->Object.prototype->null

(3 )

obj 객체 실행 시 환경은 Animal 함수를 호출하고 매개변수 "cat"을 전달합니다. var result = obj.Animal("cat")과 동일합니다.

(4)

3단계에서 반환된 반환 값을 살펴보세요. 반환 값이 없거나 개체가 아닌 값이 반환되는 경우 obj가 새 개체로 반환되고, 그렇지 않으면 반환 값이 다음과 같이 반환됩니다. 새로운 개체.

작동 메커니즘을 이해한 후에는 cat이 실제로 프로세스 (4)의 반환 값이라는 것을 알게 되므로 cat 객체에 대해 더 많이 알게 됩니다.

cat의 프로토타입 체인은 다음과 같습니다. cat-> >Object.prototype->null

cat에 새로운 속성이 추가되었습니다: name

cat의 생성 과정을 분석한 후 출력 결과를 살펴보겠습니다:

cat.name - > (3) 과정에서 obj 객체는 name 속성을 생성합니다. 따라서 cat.name은 여기서 obj.name입니다

cat.color -> cat은 먼저 자신의 색상을 검색하고, 찾을 수 없으면 프로토타입 체인을 따라 검색합니다. Animal 객체의 색상은 프로토타입 체인에 정의되어 있지 않으므로 찾을 수 없습니다. cat.say -> cat은 먼저 자신의 say 메소드를 검색합니다. 발견되지 않으면 프로토타입 체인을 따라 검색합니다. 위 예에서는 Animal 프로토타입에 say를 정의했으므로 say를 찾았습니다. 프로토타입 체인 방식.

또한 this.name은 say 메소드에서도 액세스됩니다. 여기서는 호출자 obj를 참조하므로 obj.name의 값이 출력됩니다.

Animal의 경우 객체 자체이기도 하므로 속성 및 메서드에 액세스할 때 위의 검색 규칙도 따릅니다. 🎜🎜Animal.color -> "black"🎜🎜Animal.name -> , Animal은 먼저 자신의 이름을 검색하여 이름을 찾았지만 이 이름은 우리가 정의한 이름이 아니라 함수 개체의 내장 속성입니다. 🎜🎜일반적으로 함수 개체가 생성되면 이름 속성이 내장되어 있으며 함수 이름을 할당 값으로 사용합니다(함수 개체만 해당). 🎜🎜Animal.say -> Animal은 say 메소드 자체를 찾지 않고 프로토타입 체인을 따라 검색합니다. 🎜🎜테스트 결과: Animal의 프로토타입 체인은 다음과 같습니다. 🎜🎜Animal->Function.prototype->Object.prototype->null🎜🎜따라서 Animal의 프로토타입 체인에는 say 메소드가 정의되어 있지 않습니다! 🎜🎜🎜🎜4. new의 존재 의미🎜🎜🎜🎜new 연산자를 알게 된 후, 처음에 언급한 질문으로 돌아갑니다. JS의 모든 것은 객체입니다. 왜 객체를 생성하기 위해 new를 사용해야 할까요? ? 🎜

要弄明白这个问题，我们首先要搞清楚cat和Animal的关系：

通过上面的分析，我们发现cat继承了Animal中的部分属性，因此我们可以简单的理解：Animal和cat是继承关系。

另一方面，cat是通过new产生的对象，那么cat到底是不是Animal的实例对象？ 我们先来了解一下JS是如何来定义“实例对象”的？

A instanceof B
如果上述表达式为true,JS认为A是B的实例对象，我们用这个方法来判断一下cat和Animal

cat instanceof Animal; //true
从执行结果看：cat确实是Animal实例，要想证实这个结果，我们再来了解一下JS中instanceof的判断规则：

var L = A.__proto__;
var R = B.prototype;
if(L === R)
return true;

如果A的proto 等价于 B的prototype，就返回true

在new的执行过程（2）中，cat的proto指向了Animal的prototype，所以cat和Animal符合instanceof的判断结果。

因此，我们认为：cat 是Animal的实例对象。

5、总结

在Javascript中, 通过new可以产生原对象的一个实例对象，而这个实例对象继承了原对象的属性和方法。因此，new存在的意义在于它实现了Javascript中的继承，而不仅仅是实例化了一个对象！

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JS保留一位数字后移除非数字

JS DOM元素常见增删改查操作详解

JS保留两位小数输入数校验代码

위 내용은 JavaScript 생성자 및 new 연산자(핵심 사항, 필수 읽기)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!