이 글에서는 주로 JavaScript 생성자와 new 연산자를 소개합니다. new 연산자의 이해, 코드 해석, 핵심 분석, new의 의미, 요약 등을 통해 지식 포인트를 종합적으로 소개합니다. 구체적인 작업 단계에 대한 자세한 설명은 아래에서 확인하실 수 있습니다. . 관심있는 친구들이 참고할 수 있습니다.
JS의 함수는 생성자일 수도 있고, new를 사용하여 객체를 생성할 때 해당 함수가 생성자이고, 객체를 통해 호출할 때 일반 함수로 호출될 수도 있습니다.
일반 함수를 만드는 방법에는 명시적 선언, 익명 정의, new Function() 세 가지가 있습니다.
new를 통해 새 객체가 생성되면 JS의 맨 아래 레이어는 새 객체의 프로토타입 체인을 생성자의 프로토타입 객체로 가리키므로 새 객체와 함수 객체 사이에 프로토타입 체인이 설정됩니다. 함수 개체 프로토타입의 새 개체 메서드 및 속성을 통해 액세스됩니다.
다른 고급 언어와 마찬가지로 Javascript에도 생성자와 새 연산자가 있습니다. new는 클래스를 인스턴스화하고 메모리에 인스턴스 객체를 할당하는 데 사용됩니다. 그런데 자바스크립트에서는 모든 것이 객체입니다. 왜 객체를 생성하기 위해 new를 사용해야 할까요? 이 기사에서는 Javascript의 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");
동물 자체는 일반적인 함수입니다. , 그러나 new를 통해 객체를 생성할 때는 Animal이 생성자입니다.
JS 엔진이 이 코드를 실행할 때 내부적으로 많은 작업을 수행합니다. 의사 코드는 다음과 같이 작업 흐름을 시뮬레이션하는 데 사용됩니다.
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<br/>
var L = A.__proto__; var R = B.prototype; if(L === R) return true;
(1)
(2)
obj의 proto를 생성자 함수 Animal의 프로토타입 개체 프로토타입에 지정합니다. 이때 obj 개체의 프로토타입 체인이 설정됩니다. obj->Animal.prototype->Object.prototype- >null(3)
In obj 객체의 실행 환경에서는 Animal 함수를 호출하고 "cat" 매개변수를 전달합니다. var result = obj.Animal("cat")과 동일합니다.(4)
3단계에서 반환된 반환 값을 살펴보세요. 반환 값이 없거나 개체가 아닌 값이 반환되는 경우 obj가 새 개체로 반환되고, 그렇지 않으면 반환 값이 다음과 같이 반환됩니다. 새로운 개체. 작동 메커니즘을 이해한 후에는 cat이 실제로 프로세스 (4)의 반환 값이라는 것을 알게 되므로 cat 객체에 대해 더 많이 알게 됩니다. cat의 프로토타입 체인은 다음과 같습니다.cat-> >Object.prototype->null<p>
cat에는 name
이라는 새로운 속성이 있습니다. cat의 생성 과정을 분석한 후 출력 결과를 살펴보겠습니다.
cat. ; 과정 (3)에서 obj 객체는 name 속성을 생성합니다. 따라서 cat.name은 여기서 obj.name입니다
또한 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运算符之后,我们再回到开篇提到的问题: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中的继承,而不仅仅是实例化了一个对象!
위 내용은 JavaScript 생성자 및 new 연산자 소개 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!