javascript_기본 지식으로 프로토타입 체인에 대한 심층적인 이해

프로토타입 체인을 이해하려면 먼저 함수 유형을 이해해야 합니다. 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,

코드 복사 코드는 다음과 같습니다. function a(){

this.name = 'a'

}

var a1 = new a()
alert(a1._proto_ == a.prototype)


결과: true

속성에 액세스할 때 먼저 a1 객체 내부를 검색합니다. 그렇지 않은 경우 _proto_가 가리키는 객체를 따라 검색하여 반환합니다. 값을 찾지 못하면 정의되지 않은 값을 반환합니다. 관용구를 사용하여 설명하려면 단서를 따르는 것입니다.

이제 프로토타입 체인의 의미가 나옵니다. 프로토타입 객체에도 _proto_ 포인터가 있으므로 차례로 다른 프로토타입을 가리키며 프로토타입 체인을 형성합니다. Object.prototype은 최상위 프로토타입이므로 Object.prototype의 속성을 수정하면 모든 객체에 영향을 미칩니다.

코드를 살펴보겠습니다

코드 복사 코드는 다음과 같습니다. 함수 a(){

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()에 의해 생성된 객체를 반환하는 일반적인 함수 호출일 뿐이라고 설명할 수 있습니다.