ホームページ >ウェブフロントエンド >jsチュートリアル >jsプロトタイプとjs継承のプロトタイプチェーンの詳細な紹介

jsプロトタイプとjs継承のプロトタイプチェーンの詳細な紹介

不言
不言オリジナル
2018-08-17 11:36:481989ブラウズ
この記事の内容は、js プロトタイプとプロトタイプ チェーンの詳細な紹介です。次に、js プロトタイプの継承と js プロトタイプ チェーンの継承の内容を詳しく見ていきます。

jsプロトタイプチェーン

いわゆる言行連鎖とは、コンストラクターまたはオブジェクトAがAのプロトタイプはコンストラクターまたはオブジェクトBを指し、BのプロトタイプはコンストラクターまたはオブジェクトCを指すというものです。 、など、最終的なコンストラクター、またはオブジェクトの原点は、オブジェクトのプロトタイプを指します。これは、プロトタイプ チェーンと呼ばれるチェーン構造を形成します

js プロトタイプ チェーン サンプル コード:

// 原型链
function A(){
    this.a = 'a';
}
// 通过构造函数创建对象
var a = new A();

function B(){
    this.b = 'b';
}
// 将B的原型指向对象a
B.prototype = a;
// 通过构造函数创建对象
var b = new B();

console.log(b.b);// b
console.log(b.a);// a

function C(){
    this.c = 'c';
}
// 将C的原型指向对象b
C.prototype = b;
// 通过构造函数创建对象
var c = new C();

console.log(c.c);// c
console.log(c.b);// b
console.log(c.a);// a

js プロトタイプ チェーン コード。分析図:

jsプロトタイプとjs継承のプロトタイプチェーンの詳細な紹介

プロトタイプからのみ継承

サンプルコード:

// 原型链
function A(){
    // 将自有属性改写为原型属性
    // this.a = 'a';
}
A.prototype.a = 'a';

function B(){
    // this.b = 'b';
}

// 将B的原型指向
B.prototype = A.prototype;

B.prototype.b = 'b';
/*B.prototype = {
    b : 'b'
}*/

function C(){
    this.c = 'c';
}
// 将C的原型指向
C.prototype = B.prototype;

var c = new C();
console.log(c.c);// c
console.log(c.b);
console.log(c.a);// a

js プロトタイプチェーン継承実装の問題

1 プロトタイプチェーンは、実際には複数のコンストラクターまたはオブジェクト間でプロパティとメソッドを共有します。

2. 共通サブクラスのオブジェクトの場合、親コンストラクターにパラメーターを渡すことはできません

注: 実際の開発では、プロトタイプ チェーンが単独で使用されることはほとんどありません

サンプル コード:

// 原型链
function A(){
    // 将自有属性改写为原型属性
    // this.a = 'a';
}
A.prototype.a = 'a';

function B(){
    // this.b = 'b';
}

// 将B的原型指向
B.prototype = A.prototype;

B.prototype.b = 'b';

function C(){
    // this.c = 'c';
}
// 将C的原型指向
C.prototype = B.prototype;
C.prototype.c = 'c';

var c = new C();
console.log(c.c);// 调用结果为 c
console.log(c.b);// 调用结果为 b
console.log(c.a);// 调用结果为 a

var a = new A();

console.log(a.a);// 调用结果为 a
console.log(a.b);// 调用结果为 b
console.log(a.c);// 调用结果为 c

var b = new B();

console.log(b.a);// 调用结果为 a
console.log(b.b);// 调用结果为 b
console.log(b.c);// 调用结果为 c

関連する推奨事項:

JS プロトタイプとプロトタイプ チェーンの詳細な説明

JS コア シリーズ: プロトタイプ オブジェクトとプロトタイプ チェーンについての簡単な説明

以上がjsプロトタイプとjs継承のプロトタイプチェーンの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。