JSのプロトタイプと寄生継承について詳しく解説（コード例）

この記事では、JS のプロトタイプ継承と寄生継承について詳しく説明します (コード例)。必要な方は参考にしていただければ幸いです。

前書き: 最近『JavaScript Advanced Programming』を読んでいますが、この本の中国語版には満足のいく翻訳が多くないため、自分の理解している範囲で解釈するようにしています。間違いや漏れがございましたら、ご指摘いただければ幸いです。この記事の内容のほとんどは『JavaScript Advanced Programming, Third Edition』から引用しています。

プロトタイプの継承

Douglas Crawford は、2006 年に「JavaScript におけるプロトタイプの継承 (JavaScript におけるプロトタイプの継承)」というタイトルの記事を書きました。

この記事では、厳密な意味でのコンストラクターを使用しない継承の実装方法を紹介します。

アイデアは、カスタム タイプを作成せずに、プロトタイプを使用して既存のオブジェクトに基づいて新しいオブジェクトを作成することです。

この目的を達成するために、彼は次のような関数を与えました。

function object(o) {
    function F(){};
    F.prototype = o;
    return new F();
}

object() 関数内では、最初に一時コンストラクターが作成され、次に渡されたオブジェクトがこのコンストラクターのプロトタイプとして使用され、最後にこの一時タイプの新しいインスタンス オブジェクトが返されます。

本質的に、object() は渡されたオブジェクトの浅いコピーを実行します。

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

var person = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}

var person1 = object(person);

/*
person1 = function object(person){
    function F(){};
    F.prototype = person1;
    return new F();
}()

person1 = function object({
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}){
    function F(){};
    F.prototype = {
        name: "Shaw",
        friends: ["Sharon", "Sandy", "Van"]
    }
    return {
    }
}

person1 = {

};

{}.__proto__ = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}
*/

person1.name = "Roc";
person1.friends.push("Roster");

var person2 = object(person);

person2.name = "Linda";
person2.friends.push("Jobs");

console.log(person.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]
console.log(person1.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]
console.log(person2.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]

Crockford が提唱したプロトタイプ継承では、別のオブジェクトの基礎となるオブジェクトが必要です。

そのようなオブジェクトがある場合は、それを object() 関数に渡し、特定のニーズに応じて取得したオブジェクトを変更できます。

ECMAscript5 は、新しい Object.create() メソッドを通じてプロトタイプの継承を標準化します。
このメソッドは 2 つのパラメーターを受け入れます。新しいオブジェクトのプロトタイプとして使用されるオブジェクトと、(オプションで) 新しいオブジェクトの追加プロパティを定義するオブジェクトです。

Object.create() メソッドと object() メソッドは、パラメーターを渡すときは同じように動作します。

var person = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}

var person1 = Object.create(person);
person1.name = "Roc";
person1.friends.push("Roster");

var person2 = Object.create(person);
person2.name = "Linda";
person2.friends.push("Messi");

console.log(person.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]
console.log(person1.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]
console.log(person2.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]

Object.create() メソッドの 2 番目のパラメーターは、Object.defienProperties() メソッドの 2 番目のパラメーターと同じ形式です。

各プロパティは、独自の記述子を通じて定義されます。 。

この方法で指定されたプロパティは、プロトタイプ オブジェクトの同じ名前のプロパティをオーバーライドします。

var person = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Selina"]
}

var person1 = Object.create(person, {
    name: {
        value: "Roc"
    }
})

console.log(person1.name); //"Roc"

Object.create() メソッドをサポートするブラウザには、IE9、Firefox 4、Opera 12、Chrome などがあります。

該当するシナリオ:

コンストラクターを作成するために多大な労力を費やす必要はないが、あるオブジェクトを別のオブジェクトと同様に保ちたいだけの場合は、プロトタイプ継承が十分に機能します。

プロトタイプ パターンを使用する場合と同様に、参照型の値を含むプロパティは常に対応する値を共有することを覚えておくことが重要です。

寄生継承

寄生継承はプロトタイプ継承と密接に関係する考え方であり、偉大なる神クロッカーフォードによって広められたものでもあります。

寄生継承の考え方は、寄生コンストラクターやファクトリ パターンと似ています。

継承プロセスを単純にカプセル化し、何らかの方法でオブジェクトを内部的に強化し、実際にすべての作業を行ったかのようにオブジェクトを返す関数を作成します。

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

function createAnother(original) {
    var clone = object(original); //通过调用函数创建一个新对象
    clone.sayHi = function(){ //以某种方式来增强这个对象
        console.log("hi");
    }
    return clone; //返回这个对象
}

この例では、createAnother() 関数は、新しいオブジェクトの基礎として使用されるオブジェクトである別のパラメーターを受け取ります。
次に、オブジェクト パラメーター (オリジナル) を object() 関数に渡し、返された結果を clone に代入します。

新しいメソッドsayHi()をクローン オブジェクトに追加し、最後にクローン オブジェクトを返します。

createAnother() 関数は次のように使用できます。

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

function createAnother(original) {
    var clone = object(original); //通过调用函数创建一个新对象
    clone.sayHi = function(){ //以某种方式来增强这个对象
        console.log("hi");
    }
    return clone; //返回这个对象
}

var person = {
    name: "Shaw",
    friends: ["Sandy", "Sharon", "Van"]
}

var anotherPerson = createAnother(person);

anotherPerson.sayHi(); //"hi"

この例のコードは、人 (anotherperson) に基づいた新しいオブジェクトを返します。新しいオブジェクトには、person のすべてのプロパティとメソッドがあるだけでなく、独自のsayHi() メソッドもあります。

寄生継承は、カスタム型やコンストラクターではなくオブジェクトが主な関心事である場合にも便利なパターンです。

継承モードの前のデモで使用した object() 関数は必要ありません。新しいオブジェクトを返すことができる関数は、このモードに適しています。

以上がJSのプロトタイプと寄生継承について詳しく解説（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。