JavaScript でのプロトタイプの継承について議論する前に、なぜ継承が必要なのかを考えたほうがよいでしょうか?
2 つのオブジェクトがあり、そのうちのいくつかは同じプロパティを持ち、もう 1 つは異なるプロパティを持っているというシナリオを考えてみましょう。通常、優れた設計ソリューションは、同じロジックを抽出して再利用することです。
2 人の学生 xiaoMing liLei を例に挙げます。クラスメイトの二人はそれぞれ名前を持っており、自己紹介をします。プログラムオブジェクトとして抽象化すると以下のように表現できます。
var xiaoMing = { name : "xiaoMing", hello : function(){ console.log( 'Hello, my name is '+ this.name + '.'); } } var liLei = { name : "liLei", hello : function(){ console.log( 'Hello, my name is '+ this.name + '.'); } }
Java を使用したことのある学生は、この問題を解決するためにオブジェクト指向を使用することを最初に考えるかもしれません。 Person クラスを作成し、xiaoMing と liLei という 2 つのオブジェクトをインスタンス化します。 ES6 には、Java のクラスに似た概念、 class もあります。
以下では ES6 構文を使用し、オブジェクト指向の考え方を使用して上記のコードを再構築します。
class Person { constructor(name){ this.name = name } hello(){ console.log(this.name); } } var xiaoMing = new Person('xiaoMing'); var liLei = new Person('liLei');
クラスを使用してオブジェクトを作成すると、再利用の目的が達成されることがわかります。このロジックは、2 つ以上のオブジェクトが同様の構造と機能を持っている場合、テンプレートを抽象化し、そのテンプレートに従って複数の同様のオブジェクトをコピーできるというロジックに基づいています。
同じ設計図を何度も再利用して多数の自転車を製造する自転車メーカーと同じように、クラスを使用してオブジェクトを作成します。
もちろん、再利用の問題には複数の解決策があります。従来のオブジェクト指向クラスは、解決策の 1 つにすぎません。今度は、再利用の問題を別の角度から解決する主人公「プロトタイプ継承」が登場します。
JavaScript のオブジェクトは、通常のプロパティのコレクションとプロトタイプ プロパティの 2 つの部分で構成されます。
var o = { a : 'a', ... __proto__: prototypeObj }
通常の属性は を参照し、プロトタイプ属性は __proto__ を参照します。これは仕様の一部ではありませんでしたが、その後、chrome は __proto__ を通じて言語の基礎となるプロパティを公開し、徐々に誰もが受け入れ、ES6 仕様に追加されました。 o.__proto__prototypeObj の値は プロトタイプ オブジェクト です。プロトタイプ オブジェクトは実際には通常のオブジェクトです。プロトタイプ オブジェクトと呼ばれる理由は、それがプロトタイプ属性によって指定される値だからです。
プロトタイプ オブジェクトは、他のオブジェクトとそのプロパティを共有するという、通常のオブジェクトにはない機能があるため、特別です。 ES6 仕様では、次のように定義されています:object that provides shared properties for other objects
var prototypeObj = { hello: function(){ console.log( 'Hello, my name is '+ this.name + '.'); } // ... } var xiaoMing = { name : "xiaoMing", __proto__ : prototypeObj } var liLei = { name : "liLei", __proto__ : prototypeObj } xiaoMing.hello(); // Hello, my name is xiaoMing. liLei.hello(); // Hello, my name is liLei.
var deepPrototypeObj = { hello: function(){ console.log( 'Hello, my name is '+ this.name + '.'); } __proto__ : null } var prototypeObj = { __proto__ : deepPrototypeObj } var xiaoMing = { name : "xiaoMing", __proto__ : prototypeObj } var liLei = { name : "liLei", __proto__ : prototypeObj } xiaoMing.hello(); // Hello, my name is xiaoMing. liLei.hello(); // Hello, my name is liLei.
var prototypeObj = { hello: function(){ console.log( 'Hello, my name is '+ this.name + '.'); } // ... } var xiaoMing = Object.create(prototypeObj); var liLei = Object.create(prototypeObj); xiaoMing.name = "xiaoMing"; liLei.name = "liLei"; xiaoMing.hello(); // Hello, my name is xiaoMing. liLei.hello(); // Hello, my name is liLei.
。
上記は JavaScript プロトタイプの継承について詳しく説明しています。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。