javascriptプロトタイプとプロトタイプチェーンの理解と応用例の分析

5472 ワード

本論文の実例はjavascriptプロトタイプとプロトタイプチェーンの理解と応用を述べている.皆さんに参考にしてあげます.具体的には以下の通りです.
javascriptではすべて対象ですが、クラスの概念がないので、対象と対象の関係をうまく表現できません.
例えば、オブジェクトAとオブジェクトBとの間に、それらの2つは相対的に独立した個体であり、互いに干渉しない.オブジェクトAが自身の属性を修正することは、オブジェクトBに影響を与えない.
これはいいですが、オブジェクトAとオブジェクトBが一つの方法を持っていて、コードも同じです.オブジェクトAとオブジェクトBはそれぞれ独立して一つのルン()方法の完全なコードを持っています.これは資源で保存する必要があります.
私たちのプログラムでは、オブジェクトが多すぎると、このような資源の消費は巨大になります.オブジェクトAとオブジェクトBがいくつかの共通の属性と方法を持つようにする方法がありますか?
対象Aと対象Bのうち一つのプロトタイプがこのモンオブジェクトを指しています.
もちろん、オブジェクトAやオブジェクトBの属性や方法を呼び出すとき、自分のオブジェクトの中に見つけられなかったら、プロトタイプという属性が指すオブジェクトの上に行きます.
comonオブジェクト自体もprototype属性がもっと上のレベルのcomonオブジェクトを指しています.そしてnullのために探して、停止します.
このような絶えない下から上へ行くルートは、チェーンのように、私達はそれをプロトタイプチェーンと呼びます.
構造関数を見に来ました.

function Base(name) {
  this.name = name;
}
let A = new Base('A');
let B = new Base('B');
//         prototype  ,          
console.log(Base.prototype);
//            ,     constructor,      
console.log(Base.prototype.constructor === Base);
//        constructor            
console.log(A.constructor === Base);
console.log(B.constructor === Base);
//           __proto__  ,              
console.log(A.__proto__ === Base.prototype);
console.log(B.__proto__ === Base.prototype);

1、各関数にはプロトタイプの属性があり、その関数のプロトタイプのオブジェクトを指します.
2、原型の対象も対象で、自分のコンストラクタもあります.コンストラクタベースを指します.言い換えれば、プロトタイプオブジェクトも構造関数ベース()の一例である.ただ特殊なもので、公共の属性と方法を保存するものです.
3、各構造関数Base()によって作成された例示的なオブジェクトには、それらを作成するためのコンストラクタがあります.
4、どの対象にも一つの_uがあります.プロト.属性は、構造関数Base()の原型オブジェクトを指します.言いかえればプロト.原型を直列にしてチェーンを作る鍵です.対象Aと対象Bはいずれも原型オブジェクト上の共通属性と方法を見つけることができません.

function Base(name) {
  this.name = name;
}
//              
Base.prototype.status = '  ';
//              
Base.prototype.run = function() {
  console.log(this.name + ' run ...');
};
let A = new Base('A');
let B = new Base('B');
A.run();
B.run();
console.log(A.status);
console.log(B.status);
//        ,           
Base.prototype.status = '  ';
console.log(A.status);
console.log(B.status);

プロトタイプとプロトタイプチェーンを通して、対象と対象との間に関係ができます.
プロトタイプとプロトタイプチェーンを通して、もう一つのコンストラクタを他のコンストラクタに継承するにはどうすればいいですか?
例えば、構造関数Childに構造関数Baseを継承させるには、Childのプロトタイプをベースのプロトタイプに向けるだけでいいですか?

function Base(name) {
}
Base.prototype.name = 'Base';
Base.prototype.run = function () {
  console.log(this.name + ' run ...');
};
function Child() {
}
Child.prototype = Base.prototype;
//      ,Child.prototype   constructor     Base
//          Child       ,   constructor     Base,   Child,      。
//        Child.prototype.constructor  Child
Child.prototype.constructor = Child;
let c = new Child();
console.log(c.name);
c.run();

このように一つの問題があります.Child.prototypeとBase.prototypeは同じ原型の対象を指しています.どのようなChild.prototypeに対する修正もBase.prototypeの上に反映されます.
この時、Base.prototype.com nstructorはChildを指しています.これは明らかに問題があります.
プロトタイプの指向性は,中間の空構造関数を通してのみ達成できた.

function Base(name) {
}
Base.prototype.name = 'Base';
Base.prototype.run = function () {
  console.log(this.name + ' run ...');
};
function Child() {
}
//            
function Mid() {
}
//        prototype  Base     
Mid.prototype = Base.prototype;
//  Child prototype             
Child.prototype = new Mid();
//  ,   Child.prototype.constructor ,Base.prototype       
Child.prototype.constructor = Child;
let c = new Child();
console.log(c.name);
c.run();
//Base.prototype constructor    Base,      
console.log(Base.prototype.constructor);

プロトタイプとプロトタイプのチェーンを通して、相手を別のオブジェクトに継承するにはどうすればいいですか?
例えば、対象Bを対象Aに継承したいというのは、対象Aの属性と方法を取得したいということにほかならない.プロト.  対象Aを指すなら、実現できるのではないでしょうか?

let A = {
  name: 'A',
  run() {
    console.log(this.name + ' run ...');
  }
};
console.log(A.name);
A.run();
let B = {};
//   B __proto__    A
B.__proto__ = A;
//   B  run()         ,     ,   __proto__   
//  __proto__    A,        A   run()  
B.run();
B.__proto__.name = 'B';
console.log(A.name);
console.log(B.name);

このように問題があります.プロト.name='B';の場合、対象Aも影響を受けます.
私たちはES 5から提供されたObject.creat()によってこの問題を解決できます.Object.create()は指定された原型オブジェクトを通じて新しいオブジェクトを作成することができます.

let A = {
  name: 'A',
  run() {
    console.log(this.name + ' run ...');
  }
};
console.log(A.name);
A.run();
let B = {};
//  Object.create()       A         
//   B __proto__      
//     B.__proto__        A   。
B.__proto__ = Object.create(A);
B.run();
B.__proto__.name = 'B';
console.log(A.name);
console.log(B.name);

興味のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます.http://tools.jb51.net/code/HtmlJsRun上記コードの運転効果をテストします.
JavaScriptの関連内容については、当駅のテーマを見ることができます.「JavaScript常用関数技術まとめ」、「javascript対象入門教程」、「JavaScript検索アルゴリズム技術まとめ」、「JavaScriptエラーとデバッグ技術まとめ」、「JavaScriptデータ結構とアルゴリズム技法のまとめ」及び「JavaScript数学用法まとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます.