プロトタイプチェーンについて話す前に、まずカスタム関数と機能の関係が何であるか、およびコンストラクター、プロトタイプ、インスタンスの間の不可解な関係は何ですか?実際、すべての関数は関数のインスタンスです。コンストラクターにはプロトタイプのプロパティプロトタイプがありますが、これもオブジェクトです。次に、コンストラクターを指すプロトタイプオブジェクトにコンストラクタープロパティがあります。また、インスタンスオブジェクトには_Proto_プロパティがあり、プロトタイプオブジェクトも指し示されており、このプロパティは標準プロパティではなく、プログラミングには使用できません。このプロパティは、ブラウザの使用に内部的に使用されます。
// _proto_関数にプロパティプロトタイプがあります。この関数によって作成されたオブジェクトは、デフォルトでプロパティに接続されます。 //プロトタイプと_proto___の関係はオブジェクトの観点からのものであり、プロトタイプはコンストラクターの観点からです。
以下で、写真を見て話しましょう。
1.コンストラクター、プロトタイプ、インスタンスの関係
①+オブジェクト
②+関数+オブジェクト+配列
これらを理解した後、プロトタイプチェーンとは何かについて説明しましょう。率直に言って、実際には、有限インスタンスオブジェクトとプロトタイプの間に形成される有限チェーンであり、共有属性と継承を実装するために使用されます。次に、話すコードを見てみましょう。
var obj = new object();オブジェクトは、プロトタイプオブジェクトとプロトタイプオブジェクトobj._proto _._ proto _._ proto _._ proto _proto_もプロトタイプオブジェクトを持っているプロトタイプオブジェクトです。オブジェクトのプロトタイプオブジェクトが見上げられ続け、null //プロトタイプチェーンの例var arr = []; arr-> array.prototype-> object.prototype-> null var o = new object(); o-> object.prototype-> null; function foo1(){this.name1 = '1';} function foo2(){this.name2 = '2';} foo2.prototype = new foo1(); function foo3(){this.name = '3';} foo3.protototototototy = new foo2(); var foo3(); var foo3();次は継承の問題です。
2。継承
1)プロトタイプの継承
function animal(name){this.name = name; } function tiger(color){this.color = color; } // var tiger = new Tiger( 'Yellow'); // console.log(tiger.color); // console.log(tiger.name); //未定義// tiger.prototype = new Animal( 'Tiger'); // One Way Object.Prototype.Name = 'Big Tiger'; // 2番目の方法var tiger = new Tiger( 'Yellow'); console.log(tiger.color); console.log(tiger.name);ここには2つの主な問題があることは注目に値します。 parentタイプの参照タイプはすべてのインスタンスで共有されます
2)ES5は、継承を実装するためのObject.create()メソッドを提供します
- - 互換// shim shim function create(obj){if(object.create){return object.create(obj); } else {function foo(){} foo.prototype = obj; new foo()を返します。 }}この方法は、ES5の新機能であり、実際にコピーして継承しています。
3)継承をコピーします
var obj = {}; obj.extend = function(obj){for(var k in obj){this [k] = obj [k]; }}4)借入コンストラクターの継承 - 借りたコンストラクターのプロトタイプのメンバーは借用されていません
function animal(name){this.name = name;} function mouse(nickname){animal.call(this、 'mouse'); this.nickname = nickname;} var m = new Mouse( 'jerry'); console.log(m.name); console.log(m.nickname);既存の問題:プロトタイプ継承にパラメーターを渡す問題を解決できますが、親タイプのプロトタイプオブジェクトのメンバー(属性と方法)を継承することはできません
5)組み合わせ継承プロトタイプオブジェクトは動的です
function person(name){this.name = name;} person.prototype.showname = function(){console.log(this.name);} function sustent(name、age){person.call(this、name); this.age = age;} desustor.prototype = new person(); sustent.prototype.contructor = sudent; sustean.prototype.showage = function(){console.log(this.age);} var stu = new Student( 'Zhang san'、12); stu.showname(); stu.showage(); stu.showage();[プロトタイプの継承 +コンストラクターの借入継承]その特性は、インスタンスごとの属性のコピーを1つ、メソッドが共有されることです
[要約]それを非常に大まかな文に置くために、いわゆるプロトタイプチェーンは母親を見つける行動の方法であり、人間は人間によって生まれ、悪魔は悪魔によって生まれていることを理解することができます。実際、プロトタイプチェーンのコアは1つだけです。属性共有と独立制御です。オブジェクトインスタンスが独立した属性を必要とする場合、すべてのプラクティスの本質は、オブジェクトインスタンスに属性を作成することです。あまり考えない場合は、プロトタイプのプロパティを上書きするために必要な独立した属性を直接定義できます。要するに、プロトタイプの継承を使用する場合、プロトタイプの属性に特に注意を払う必要があります。なぜなら、それらはすべて全身に影響を与える存在であるからです。現在最も一般的な方法は、コンビネーションモードです。
1。プロトタイプチェーン
1)コンストラクター、プロトタイプ、インスタンスの関係
constructorconstructunctionsには、オブジェクト(オブジェクトのインスタンス)であるプロパティプロトタイプがあります。 prototypeオブジェクトにはコンストラクター属性があり、プロトタイプオブジェクトが属するコンストラクター関数を指します。 intenceインスタンスオブジェクトには_Proto_属性があり、コンストラクターのプロトタイプオブジェクトも指しています。非標準のプロパティであり、プログラミングには使用できません。ブラウザ自体で使用されます。 2)プロトタイプと_proto_の関係
①プロトタイプはコンストラクターの特性です
②_proto_はインスタンスオブジェクトの属性です
- どちらも同じオブジェクトを指します
[概要] i)関数はオブジェクトでもあり、オブジェクトは必ずしも関数ではありません。
ii)オブジェクトの本質:キー価値ペアの順序付けられていないセット。キー値のペアの値は、任意のデータ型の値になります
iii)オブジェクトは容器であり、コンテナには(プロパティと方法)が含まれています
3)属性検索
objectオブジェクトのメンバーにアクセスすると、まずオブジェクトに存在するかどうかを探します。
wurd現在のオブジェクトがない場合、コンストラクターのプロトタイプオブジェクトでそれを探してください
prototypeオブジェクトが見つからない場合、プロトタイプオブジェクトのプロトタイプを探してください
objectオブジェクトのプロトタイプオブジェクトのプロトタイプがnullであることを知っています
2。関数
- すべての関数は関数のインスタンスです
①ローカルオブジェクト:ホスト環境(ブラウザ)に依存しないオブジェクト - オブジェクト、配列、日付、regexp、関数、エラー、数字、文字列、ブール値を含む
buildingビルトインオブジェクト - 数学とグローバル(JSのグローバル変数であるウィンドウ)を含む、およびそれを使用するときは新しいものは必要ありません。
hostオブジェクト - カスタムオブジェクト、dom、bomを含む
上記は、JSプロトタイプチェーンを理解する方法の完全な説明です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!