자바스크립트 이해_11_생성자 구현 원리_자바스크립트 기술

생성자란

간단히 이해하면 생성자는 객체의 생성자를 말합니다. 다음 예를 참조하세요.

코드 복사 코드는 다음과 같습니다.

function Foo( ){};
var foo = new Foo();
alert(foo.constructor);//Foo
alert(Foo.constructor);//함수
alert(Object.constructor) ;//Function
alert(Function.constructor);//Function

foo.constructor가 Foo라면 foo의 생성자가 Foo이기 때문에 이해하기 쉬울 것이라고 생각합니다. Foo, Object, Function의 생성자가 Function이라는 사실에는 논란의 여지가 없다고 생각합니다. (Foo, Object, Function은 모두 함수 객체이고, 모든 함수 객체는 Function 객체에서 생성되기 때문에 생성자는 Function입니다. 자세한 내용은 "js_Function Object"를 참고하세요)

프로토타입 및 생성자

코드 복사 코드는 다음과 같습니다.

function Dog( ) {}
alert(Dog === Dog.prototype.constructor);//true

JavaScript에서 각 함수에는 "prototype"이라는 속성이 있습니다. 프로토타입 객체. 이 프로토타입 객체에는 함수 자체를 참조하는 "생성자"라는 속성이 있습니다. 이는 그림과 같은 순환 참조입니다.

생성자 속성은 어디에서 왔나요?
문자열을 구성하는 함수의 구성 과정을 살펴보겠습니다.

참고: 함수 생성자 모든 함수 객체의 프로세스는 동일하므로 String, Boolean, Number 등과 같은 내장 객체이든 사용자 정의 객체이든 생성 프로세스는 다음과 같습니다. 위 그림과 동일합니다. 여기서 문자열은 단지 대표일 뿐입니다!
그림에서 볼 수 있듯이 생성자는 함수 객체를 생성할 때 '프로토타입과 생성자의 관계'에서 언급했듯이 생성자는 함수 객체 프로토타입 체인의 속성입니다. 그것은 String=== String.prototype.constructor입니다.

또한 이론이 옳다는 것을 증명하기 위해 코드 조각을 사용하고 싶습니다.

코드 복사 코드는 다음과 같습니다.

function Person(){}
var p = new Person()
alert(p.constructor);//Person
alert( Person.prototype.constructor) ;//Person
alert(Person.prototype.hasOwnProperty('constructor'));//true
alert(Person.prototype.isPrototypeOf(p));//true
alert(Object.prototype .isPrototypeOf(p));//true
alert(Person.prototype == Object.prototype);//false

지금쯤이면 알 수 있을 것입니다. 이는 이전의 "프로토타입 체인"과 동일합니다. "구현 원리"의 기본 프로토타입은 Object.prototype을 가리키며 이는 충돌합니다. 분명히 당시의 이론은 그다지 포괄적이지 않았습니다.

특수 개체
주의 깊은 독자라면 이 질문을 할 수도 있습니다. 귀하의 이론은 개체에 적용되지 않습니다. 다음 코드는 위의 이론과 충돌하기 때문입니다.

코드 복사 코드는 다음과 같습니다.

alert(Object.prototype.hasOwnProperty('constructor'));//true
alert(Object.prototype.hasOwnProperty('isPrototypeOf'));//true, 위 이론에 따르면 여기서는 false가 반환되어야 합니다.

정말 그런가요? 아니요! 그럼 특수 객체가 어떻게 처리되는지 살펴보겠습니다.

이 그림의 원리는 위 그림의 원리와 동일하다는 것을 알 수 있습니다. 이는 Object.prototype.hasOwnProperty('isPrototypeOf')가 true임을 정확하게 설명할 수 있습니다.

생성자 탐색

코드 복사 코드는 다음과 같습니다.

function Animal(){}
function Person(){}
var person = new Person()
alert(person. constructor); //Person

이전 섹션의 내용을 토대로 이 코드의 결과를 올바르게 이해할 수 있습니까? 생각해 본 후 메모리 표현을 살펴보세요.

이 그림은 함수가 동물과 사람을 구성하는 과정을 명확하게 보여줍니다. 동시에 인스턴스 사람과 사람 간의 관계도 표시됩니다.

조금 더 깊이 들어가 보면 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

function Animal(){}
function Person(){}
Person.prototype = new Animal()
var person = new Person()
alert(person) .constructor); //Animal

이때 person의 생성자는 어떻게 설명할까요?

참고: 그림의 점선은 Person의 기본 프로토타입 포인터를 나타냅니다(참고용). 하지만 우리는 Person.prototype을 새로운 Animal로 지정했습니다.
이때 Person의 프로토타입은 Animal의 인스턴스를 가리키므로 person의 생성자는 Animal의 생성자가 됩니다.

결론: 생성자의 원리는 매우 간단합니다. 즉, 객체의 프로토타입 체인에서 생성자 속성을 찾는 것입니다.

참고: 이 기사의 내용을 정확하게 이해할 수 없다면 이전 장의 내용을 검토하시기 바랍니다.