JavaScriptプロトタイプ継承の基本的なパターンの使い方と改善方法を事例とともに詳しく解説

Javascript では、各関数には独自のプロトタイプを指すプロトタイプ属性があり、この関数によって作成されたオブジェクトにもこのプロトタイプを指す __proto__ 属性があり、関数のプロトタイプはオブジェクトであるため、このオブジェクトにも__proto__ は独自のプロトタイプを指し、Object オブジェクトのプロトタイプに到達するまで層ごとに深く進み、プロトタイプ チェーンを形成します。

各関数は Function 関数によって作成されたオブジェクトであるため、各関数には Function 関数のプロトタイプを指す __proto__ 属性もあります。ここで指摘しておく必要があるのは、実際にプロトタイプ チェーンを形成するのは、関数のプロトタイプ属性ではなく、各オブジェクトの __proto__ 属性であり、これが非常に重要であるということです。

基本モード:

var Parent = function(){
    this.name = 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(){
    this.name = 'child' ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent() ;
var child = new Child() ;
console.log(parent.getName()) ; //parent
console.log(child.getName()) ; //child

これは、プロトタイプの継承を実装する最も簡単な方法です。親クラスのオブジェクトをサブクラスのコンストラクターのプロトタイプに直接割り当て、サブクラスのオブジェクトが親クラスとプロトタイプ内の親クラスのプロパティ。このメソッドの利点は明らかであり、実装は非常に簡単であり、特別な操作は必要ありません。同時に、サブクラスが親クラスのコンストラクターと同じ初期化アクションを実行する必要がある場合には、欠点も明らかです。サブクラスのコンストラクターで実行する必要があります。親クラスで操作を再度繰り返します。

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    this.name = name || 'child' ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

上記の場合、必要なのは name 属性の初期化だけです。初期化の作業が増え続ける場合、このメソッドは非常に不便です。したがって、次の改良された方法があります: コンストラクターを借用する

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    Parent.apply(this,arguments) ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

上記のメソッドは、サブクラスのコンストラクターで apply を介して親クラスのコンストラクターを呼び出すことによって同じ初期化作業を実行します。そのため、親クラスに関係なく、初期化作業がどれだけ行われるかに応じて、サブクラスも同じ初期化作業を実行できます。しかし、上記の実装にはまだ問題があり、親クラスのコンストラクターはサブクラスのコンストラクター内で 1 回、サブクラスのプロトタイプを割り当てるときに 1 回実行されます。これはまだ改善の必要があります。

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    Parent.apply(this,arguments) ;
} ;
Child.prototype = Parent.prototype ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

この方法では、子クラスのコンストラクターで親クラスのコンストラクターを一度実行するだけで済み、同時に親クラスのプロトタイプに属性を継承できます。これも本来の意図に沿っています。ニーズを再利用するためのプロトタイプの作成 コンテンツはプロトタイプに配置されます。

以上がJavaScriptプロトタイプ継承の基本的なパターンの使い方と改善方法を事例とともに詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。