> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 프로토타입 및 상속 설명_js 객체 지향

JavaScript 프로토타입 및 상속 설명_js 객체 지향

WBOY
풀어 주다: 2016-05-16 18:25:34
원래의
859명이 탐색했습니다.
function A(x) 
{ 
this.x = x; 
} 
alert(A.prototype); 
alert(A.prototype.constructor);
로그인 후 복사

팝업 결과에 따르면 프로토타입 객체는 함수의 생성자에 의해 생성됩니다. 프로토타입 객체가 소유한 속성은 모든 객체에서 공유될 수 있습니다. 처음에는 프로토타입 객체가 Object 객체를 가리키고 정의합니다. 생성자 속성. 속성은 프로토타입 객체를 정의하는 생성자 자체를 가리킵니다. 다음 코드를 다시 살펴보세요.

코드

function A(x) 
{ 
A.prototype.x = x; 
} 
var obj = new A(10); 
alert(obj.x); 
alert(obj.constructor); 
로그인 후 복사

프로토타입 객체의 모든 속성은 생성자가 생성한 객체에 의해 공유될 수 있기 때문에 생성된 객체는 여기서 생성자 속성에 접근할 수 있습니다. 동시에 obj는 프로토타입 객체(prototype)가 생성한 인스턴스에 해당합니다. 그런 다음 생성자 속성을 재정의하면 결과는 어떻게 될까요?

코드

function A(x) 
{ 
A.prototype.x = x; 
} 

var objA = new A(10); 
objA.constructor = function(x){ alert("重写obj的constructor属性");this.x = 20 }; 
objA.constructor(); 
alert(objA.x); 

var objB = new A(10); 
alert(objB.x);
로그인 후 복사

결과에 따르면 가장 먼저 나타나는 것은 "Rewrite the constructor attribute of obj"이고 그 다음에는 20개, 생성자를 작성하고 다시 작성한 후에는 10개가 나타나는 것을 알 수 있습니다. objA 객체의 objB는 변경되지 않았습니다. 따라서 객체에 얼마나 많은 속성을 추가하거나 수정하더라도 프로토타입 객체의 속성의 원래 모양에는 영향을 미치지 않습니다. 실제로 이유를 이해하기 쉽습니다. Node.js가 이렇게 하는 이유는 한 개체의 동작이 다른 개체에 영향을 미칠 수 없기 때문입니다. 그렇지 않으면 혼란이 발생할 수 있습니다.

여기에서 위 코드의 규칙을 요약할 수 있습니다.

1. 객체를 호출할 때 먼저 객체 자체의 자체 정의된 속성을 확인하고 존재하는 경우 호출합니다.

2. 자체 속성이 존재하지 않는 경우 해당 생성자가 정의한 프로토타입 객체의 참조가 호출됩니다.

그러면 이 규칙에 따라 JavaScript의 프로토타입 체인이 형성되고, 이 규칙에 따라 상속 관계를 정의할 수 있습니다.

function A(x) 
{ 
A.prototype.x = x; 
} 

function B(x,y) 
{ 
B.prototype.y = y; 
A.call(this,x); 
}
로그인 후 복사

이 코드는 두 가지 함수를 보여줍니다. A.call(this.x)은 실행을 위해 B 개체 this를 전달하는 것을 의미합니다. 그런 다음 A 함수의 모든 특성을 포함하려면 B 함수로 생성된 개체도 필요하므로 이 문장을 추가해야 합니다.

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

B.prototype = 새로운 A()
경고(B.prototype.constructor)

먼저 B의 프로토타입이 A임을 지정합니다. 따라서 B 함수는 A 함수의 특성을 상속받습니다. 팝업 결과에 따르면 생성자가 A 함수를 가리키는 것을 알 수 있습니다. 우리 B 기능이 사라졌나요? 따라서 문장을 추가하고 최종적으로 연속 통합 코드를 제공해야 합니다.

function A(x) 
{ 
A.prototype.x = x; 
A.prototype.ShowA = function(){ alert("A的Show方法!"); }; 
} 

function B(x,y) 
{ 
B.prototype.y = y; 
A.call(this,x); 
B.prototype.ShowB = function(){ alert("B的Show方法!"); }; 
} 

B.prototype = new A(); 
B.prototype.constructor = B; 

var obj = new B(10,5); 
alert(obj.x); 
alert(obj.y); 
obj.ShowA(); 
obj.ShowB();
로그인 후 복사

질문이나 오류가 있으면 자유롭게 수정하고 토론해 주세요.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿