js 프로토타입 체인 상속에 대한 몇 가지 세부 사항 블로그 카테고리: JavaScript

1. 상속받은 프로토타입만 구현하는 방법

먼저 다음 코드를 보세요:

Js 코드

function A(){

.name ="Li Keke" ) }

function B(){}

B.prototype=new A;//B는 A를 상속합니다

var cc=new B ;

cc.eat();//먹을 수 있어요

cc.name;//"Li Keke"

먹을 수 있는 것 A가 B의 모든 속성을 상속한다는 것을 알 수 있습니다. 그렇다면 B가 A.prototype 속성만 상속하고 A의 이름과 나이 및 많은 쓸모없는 것들을 원하지 않는다면 어떻게 해야 할까요?

다음과 같이 하면 되지 않을까요?

Js 코드

B.prototype=A.prototype

var cc =new B;

cc.eat();//먹을 수 있어요

cc.name;//undefine

아 딱 맞는 것 같은데요? 계속해서

Js 코드

B.prototype.fuck=function(){console.log("I fuck you!")}

var cc=new를 살펴보세요. B ,dd=new A;

cc.fuck();//좆까!

dd.fuck();//널 엿먹여

/ / 맙소사, 왜 둘 다 욕을 배웠는가

//하위 클래스 B의 프로토타입이 변경되면 A의 프로토타입에도 영향을 미치게 됩니다(물론 그 반대의 경우도 마찬가지). A.prototype이 B의 프로토타입을 가리키도록 하기 때문에 매우 간단합니다.

해결 방법:

함수를 구성하고 그 안에 빈 개체를 만든 다음 빈 개체의 프로토타입이 부모를 가리키도록 합니다. 마지막으로 객체의 인스턴스를 반환합니다. 코드는 다음과 같습니다

Js 코드

Object.createPro=function(pro){

function F (){}

F .prototype=pro;

return new F

}

테스트할 수 있습니다.

Js 코드

함수 A(){

this.name="Li Keke"

this.age=21;

A.prototype.eat=function (){ console.log("먹을 수 있어요") }

function B(){}

B.prototype=Object.createPro( A.prototype);//B는 A의 프로토타입 속성만 상속합니다

var cc=new B

cc.eat();//먹을 수 있습니다

cc.name; //

B.prototype.fuck=function(){console.log("I fuck you!")}//이제 B의 프로토타입을 변경합니다. 🎜>

var dd=new A;

dd.fuck();//TypeError 보고

//B.prototype의 변경이 A의 어떤 속성에도 영향을 미치지 않음을 나타냅니다.

하지만 그렇게 하기에는 너무 번거롭습니다. ES5는 이 문제를 해결하는 데 도움이 됩니다. Object와 함께 제공되는 정적 메서드 create()를 직접 사용할 수 있습니다:

Js 코드

함수 A(){

this.name="Li Keke";

this.age=21

A.prototype; .eat=function(){ console.log(" 먹을 수 있어요") }

function B(){}

B.prototype=Object.create(A.prototype);/ /A의 프로토타입만 상속

상속하는 동안 다음과 같이 B에 몇 가지 고유 속성을 추가할 수도 있습니다.

Js 코드

function A(){

this.name="리케케";

this.age=21;

}

A.prototype.eat=function(){ console.log(" 먹을 수 있어요") }

function B(){}

B.prototype=Object.create(A.prototype,{

p: { value: 42, writable: false, enumerable: true }// 쓸 수는 없지만 열거할 수 있는 속성 p를 추가합니다.

})

var pp=new B; pp.p;//42

pp.name;//정의되지 않음

pp.eat();//먹을 수 있어요

pp.p=666; 🎜>

pp.p ;//42(쓰기 불가)

두 번째 매개변수는 Object.defineproperties()와 매우 유사하며 여러 속성을 구성하고 일부 특수 권한 태그를 제공할 수 있습니다

물론 통과하려는 경우 이 메소드가 다음

Js 코드

B.prototype=Object.create(new와 같이 A의 모든 속성을 상속하는 것도 가능합니다. A);

Object.create 메소드의 호환성은 ES5와 호환되는 브라우저에서만 가능하거나 위의 Object.createPro 메소드와 같이 직접 시뮬레이션할 수 있습니다.

2. 생성자 포인팅 문제와 생성자의 열거성에 대하여

첫 번째 질문에서는 서로 다른 클래스 간의 상속을 구현하기 위해 Object.create 메소드를 사용했습니다. 그러나 이렇게 하면 다음과 같은 문제가 있습니다.

Js 코드

함수 A(){

this.name="리 케케";

this.age=21

A.prototype. function(){ console.log("먹을 수 있어요") }

function B(){}

B.prototype=Object.create(A.prototype)

var cc=new B;

cc.constructor;//A　 (여기서는 값이 B일 것으로 예상했지만 실제로는 A가 되었습니다)

그래서 위의 문제를 해결하는 방법은 무엇입니까?

Js 코드

//우리가 생각할 수 있는 가장 쉬운 방법은 다음과 같이 생성자 속성을 수동으로 설정하는 것입니다.

B.prototype.constructor=B; >

그러면 문제가 다시 발생합니다. 다음을 살펴보세요.

Js 코드

B.prototype.propertyIsEnumerable("constructor");//true(우리가 설정한 생성자 속성) 는 열거 가능)

당연히 이런 일이 발생하지 않기를 바라는데 어떻게 해야 할까요?

Js 코드

//Object.defineProperty 또는 Object.defineProperties 메소드를 사용하여 생성자의 열거 가능 항목을 false로 설정

Object.defineProperty(B.prototype," constructor",{

값:B,

열거 가능:false//열거 불가능

});

cc.constructor;//B

B.prototype.propertyIsEnumerable("constructor");//false

다음과 같이 객체 리터럴을 사용하여 클래스의 프로토타입을 다시 작성할 때 비슷한 문제가 있습니다.

Js 코드

function C(){}

C.prototype={}

var pp=new C

pp.constructor;/ / 객체(C로 예상)

C.prototype.constructor=C;

C.prototype.propertyIsEnumerable("constructor");//true(열거 가능)

//여기서 위의 방법을 사용하여 해결할 수도 있습니다

물론 다시 작성할 필요 없이 다음과 같이 속성을 추가하는 다른 방법도 있습니다.

Js 코드

function D(){}

D.prototype.x=1;

var gg=new D; 생성자; //D

D.prototype.propertyIsEnumerable("constructor");//false