프로토타입 체인을 이해하려면 먼저 함수 유형을 이해해야 합니다. JavaScript에는 클래스라는 개념이 없으며 모두 함수이므로 함수형 프로그래밍 언어입니다. 클래스의 매우 중요한 기능은 클래스를 기반으로 생성자를 기반으로 하는 템플릿으로 객체를 생성할 수 있다는 것입니다. JavaScript에서 함수에는 두 가지 함수가 있습니다.
첫째, 일반 함수 호출로
둘째, 프로토타입 객체인 new()의 생성자
살펴보겠습니다.
function a(){
이것 . name = 'a';
}
함수를 만들면 어떻게 되나요?
첫 번째, 그 자체인 함수 객체를 생성합니다
두 번째, 프로토타입 객체 @a(@로 표시)를 생성합니다.
세 번째, 함수 객체에는 해당 프로토타입 객체를 가리키는 프로토타입 포인터가 있습니다. 여기서는 @a
를 가리킵니다. 넷째, @a 객체에는 생성자를 가리키는 생성자 포인터가 있습니다. 여기서는 0/을 가리킵니다. 중력/남동쪽
이 프로토타입 속성의 용도는 무엇인가요?
사실 프로토타입 속성은 현재 함수가 제어할 수 있는 범위를 나타냅니다(또는 현재 함수가 누구의 생성자인지 나타냅니다). 여기서 a는 @a 프로토타입 객체의 생성자이므로 이를 살펴보겠습니다. 작성방법
function a( ){
this .name = 'a';
}
var a1 = new a()
이것은 다른 일반 언어와 유사합니다. , new는 프로토타입을 호출하는 것입니다. 객체의 생성자는 (프로토타입 포인터를 통해) 새 객체 인스턴스를 생성합니다.
그런 다음 프로토타입이 가리키는 객체의 속성을 수정하면 이를 템플릿으로 사용하여 생성된 모든 인스턴스에 영향을 미칩니다.
function a(){
this.name = 'a'}
var a1 = new a();
a.prototype.age = 1;
alert(a1.age)
결과: 1
왜 a1 객체가 age 속성에 직접 접근할 수 있나요? a1 개체에 age 속성을 정의하지 않았습니다.
이는 모든 인스턴스가 이 프로토타입을 가리키는 참조 _proto_(fifox 및 chrome에서 직접 액세스, ie에서는 지원되지 않음)를 갖기 때문입니다. @a,
this.name = 'a'
}
var a1 = new a()
alert(a1._proto_ == a.prototype)
결과: true
속성에 액세스할 때 먼저 a1 객체 내부를 검색합니다. 그렇지 않은 경우 _proto_가 가리키는 객체를 따라 검색하여 반환합니다. 값을 찾지 못하면 정의되지 않은 값을 반환합니다. 관용구를 사용하여 설명하려면 단서를 따르는 것입니다.
이제 프로토타입 체인의 의미가 나옵니다. 프로토타입 객체에도 _proto_ 포인터가 있으므로 차례로 다른 프로토타입을 가리키며 프로토타입 체인을 형성합니다. Object.prototype은 최상위 프로토타입이므로 Object.prototype의 속성을 수정하면 모든 객체에 영향을 미칩니다.
코드를 살펴보겠습니다
this.name = 'a';
}
함수 b(){
this.age = 1; 🎜>
b .prototype = new a();
alert(new b().name);
b의 프로토타입을 a의 인스턴스로 명시적으로 지정합니다. 그런 다음 b의 인스턴스도 a의 속성에 액세스할 수 있습니다. 이는 JavaScript의 상속입니다. 그렇다면 b.prototype이 a.prototype을 직접 가리키는 대신 a의 인스턴스를 가리키는 이유는 무엇입니까?
코드 복사
코드는 다음과 같습니다. b.prototype = new a.prototype; 위와 같이 p.prototype의 속성을 수정하면 a의 프로토타입도 변경되며 이는 하위 클래스가 상위 클래스를 수정하는 것과 동일하며 하위 클래스와 상위 클래스의 속성이 혼합됩니다. 이는 분명히 부적절합니다. 즉, b도 @a의 생성자가 되었고, a와 b는 동등한 관계를 갖는다.
다음과 같이 정의할 수 있습니다.
함수 a는 함수 b의 프로토타입 인스턴스를 만드는 생성자인 함수 b를 상속합니다. 생성자에 선언된 속성은 함수 a의 속성입니다. own , 프로토타입 인스턴스의 속성은 b
코드 복사에서 상속됩니다. 코드는 다음과 같습니다.
var $ = jQuery = function(selector,context){
//자신의 생성자에서 자신을 다시 생성하는 것은 불가능하므로 다른 생성자의 인스턴스가 반환됩니다.
return new init(selector,context) );
}
jQuery.fn = jQuery.prototype = {
size:function(){
return this.length;
}
함수 init (selector ,context){
}
init.prototype = jQuery.fn;;
}
jquery를 사용할 때의 소스코드입니다. jquery, new 키워드를 사용하지 않는데 어떻게 객체를 구성하나요?
위의 지식을 사용하면 jquery는 jquery 프로토타입의 다른 생성자, 즉 new init()에 의해 생성된 객체를 반환하는 일반적인 함수 호출일 뿐이라고 설명할 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
