JavaScript プロトタイプチェーンで注意すべきことのまとめ

この記事は、JavaScript プロトタイプ チェーンで注意する必要があることをまとめたものです。必要な方は参考にしていただければ幸いです。

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

1 デフォルトのプロトタイプを忘れないでください

実際には、プロトタイプは前の例に示されているチェーンでは、1 つのリンクが欠落しています。

すべての参照型がデフォルトで Object を継承し、この継承もプロトタイプ チェーンを通じて実装されることは誰もが知っています。

すべての関数のデフォルトのプロトタイプは、Object のインスタンスです。なぜなら、関数のプロトタイプオブジェクトもオブジェクトだからです。オブジェクトはもちろん Object のインスタンスです。

したがって、関数のプロトタイプには、Object.prototype を指す内部ポインター (__proto__) が含まれます。

これは、すべてのカスタム型が toString() や valueOf() などのデフォルト メソッドを継承する根本的な理由でもあります。

したがって、前の例で示したプロトタイプのプロトタイプ チェーンには、別の継承レベルも含める必要があります。

次のコードは、完全なプロトタイプ チェーンを示しています。

//完整原型链的伪代码
function Object() {
}
Object.prototype = {
    constructor: f Object(),
    hasOwnProperty: f hasOwnProperty(),
    isPrototypeOf: f isPrototypeOf(),
    propertyIsEnumerable: f propertyIsEnumerable(),
    toLocaleString: f toLocaleString(),
    toString: f toString(),
    valueOf: f valueOf()
}
//SuperType 父类型
function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperProperty = function() {
    console.log(this.property);
    return this.property;
}
/*
SuperType.prototype = {
    constructor: f SuperType(),
    getSuperProperty: function() {
    console.log(this.property);
    return this.property;
    }, 
    __proto__ : {
        constructor: f Object(),
        hasOwnProperty: f hasOwnProperty(),
        isPrototypeOf: f isPrototypeOf(),
        propertyIsEnumerable: f propertyIsEnumerable(),
        toLocaleString: f toLocaleString(),
        toString: f toString(),
        valueOf: f valueOf()
    }
}
*/
//SubType 子类型
function SubType() {
    this.subproperty = false;
}
//子类型 继承 父类型
SubType.prototype = new SuperType();
//实际上子类型的原型是这样的。
/*SubType.prototype = {
    property: true,
    __proto__:  {
        constructor : SuperType,
        getSuperProperty：function() {
            console.log(this.property);
            return this.property;
        }
    }
}
*/
SubType.prototype.getSubProperty = function(){
    console.log(this.subproperty);
    return this.subproperty;
}
//那么现在子类型的原型对象是这样的
/*SubType.prototype = {
    property: true,
    getSubProperty: function()  {
    console.log(this.subproperty);
    return this.subproperty;
    },
    __proto__:  {
        constructor : SuperType,
        getSuperProperty：function() {
            console.log(this.property);
            return this.property;
        }
    }
}
*/

var subInstanceObject = new SubType();
console.log(subInstanceObject.getSuperProperty()); // true

つまり、SubType(サブタイプ)はSuperType(親タイプ)を継承し、

そしてSuperType(親タイプ)はObject(祖先)を継承します。

subInstanceObject.toString() を呼び出すと、実際に呼び出されるのは Object.prototype に保存されたメソッドです。

2. プロトタイプ オブジェクトとインスタンス オブジェクトの間の関係を決定する

プロトタイプとインスタンスの間の関係は 2 つの方法で決定できます。

最初の方法は、instanceof 演算子を使用することです。検出されたインスタンス オブジェクト内のプロトタイプ チェーンに、出現したコンストラクターが含まれている限り、結果は true を返します。
これは、それらすべてがインスタンス オブジェクトの作成に関与していることを意味するためです。

console.log(subInstanceObject instanceof Object); // true
console.log(subInstanceObject instanceof SuperType); // true
console.log(subInstanceObject instanceof SubType); // true

プロトタイプ チェーンにより、subIntanceObject は Object、SuperType、SubType のいずれかの型のインスタンスであると言えます。

2 番目の方法は、isPrototypeOf() メソッドを使用することです。同様に、プロトタイプチェーンに出現するプロトタイプであれば、プロトタイプチェーンから派生したインスタンスオブジェクトのプロトタイプであると言えます。

console.log(Object.prototype.isPrototypeOf(subInstanceObject)); //true
console.log(SuperType.prototype.isPrototypeOf(subIntanceObject)); // true
console.log(SubType.prototype.isPrototypeOf(subIntanceObject)); //true

3. メソッドを慎重に定義する

サブタイプでは、親タイプのメソッドをオーバーライドしたり、親タイプに存在しないメソッドを追加したりする必要がある場合があります。

ただし、何があっても、プロトタイプにメソッドを追加するコードは、プロトタイプを置き換えるステートメントの後に配置する必要があります。

function SuperType() {
    this.property = true;
}

SuperType.prototype.getSuperValue = function() {
    return this.property;
}

function SubType() {
    this.subproperty = false;
}

//继承了SuperType
SubType.prototype = new SuperType();

//给原型添加方法的代码一定要放在替换原型的语句之后
//添加新方法
SubType.prototype.getSubValue = function() {
    return this.subproperty;
}

//重写 超类型中 的 方法
SubType.prototype.getSuperValue = function() {
    return false;
}

var instance = new SubType();
console.log(instance.getSuperValue())

上記のコードでは、最初のメソッド getSubValue() が SubType に追加されます。
2 番目のメソッド getSuperValue() は、プロトタイプにすでに存在するメソッドです。
このメソッドをオーバーライドすると、サブクラスのプロトタイプが独自の getSuperValue() メソッドを見つけます。
getSuperValue() が SuperType インスタンス オブジェクトを通じて呼び出される場合、元のメソッドが引き続き呼び出されます。

もう一度言いますが、プロトタイプを SuperType のインスタンス オブジェクトに置き換えた後、2 つのメソッドを定義する必要があります。

もう 1 つ注意する必要があるのは、プロトタイプ チェーンを通じて継承が実装される場合、プロトタイプ メソッドの作成にオブジェクト リテラルを使用できないことです。これにより、プロトタイプ チェーンが書き換えられます。

function SuperType(){
    this.property = true;
}

SuperType.prototype.getSuperValue = function(){
    return this.property;
}

function SubType(){
    this.subproperty = false;
}

//继承SuperType
SubType.prototype = new SuperType();

/* 
现在的原型
SubType.prototype = {

    property: true,
    __proto__: {
        constructor: SuperType,
        getSuperValue: function() {
            return this.property;
        }
    }
}
*/

//使用对象字面量语法会改写原型，导致上一行代码无效
// SubType.prototype = new Object();
SubType.prototype = {

    getSubValue: function() {
        return this.subproperty;
    },

    someOtherMethod: function () {
        return false;
    }

    /*,
    __proto__ : {
        constructor: fn Object(),
        .......
    }
    */

}

var instance =  new SubType();
console.log(instance.getSuperValue()); // error: instance.getSuperValue is not a function

上記のコードは、SuperType のインスタンス オブジェクトをプロトタイプに代入し、プロトタイプをオブジェクト リテラルに置き換えるだけで発生する問題を示しています。

SubType のプロトタイプは実際には SuperType のインスタンス オブジェクトではなく Object のインスタンスを保存するため、このチェーンは壊れています。

4. プロトタイプ チェーンの問題

プロトタイプ チェーンは非常に強力で、継承の実装に使用できますが、常に欠点があります。完璧な方法はありません。世界で。

主な問題は、参照型の値を含むプロトタイプに起因します。

参照型値を含むプロトタイプ プロパティは、すべてのインスタンス オブジェクトによって共有されます。

これが、プロトタイプ パターンとコンストラクター パターンを組み合わせて使用​​する理由です。
コンストラクター モードでプロパティを定義し、プロトタイプ モードで共有メソッドを定義します。

プロトタイプを介してプロトタイプの継承を実装する場合、プロトタイプは実際には別の型のインスタンス オブジェクトになります。

元のインスタンス オブジェクトのプロパティは、現在のプロトタイプ プロパティになりました。

function SuperType() {
    this.colors = ['red', 'green', 'blue'];
}

function SubType() {
}

// 子类型继承父类型
SubType.prototype = new SuperType();

/*
SubType.prototype = {
    colors: ['red', 'green', 'blue'],
    __proto__: {
        constructor: fn SuperType(),
        .....
    }
}
*/

var instance1 = new SubType();

instance1.colors.push('black');

console.log(instance1.colors); // ['red', 'green', 'blue', 'black']

var instance2 = new SubType();

console.log(instance2.colors); // ['red', 'green', 'blue', 'black']

プロトタイプ チェーンの 2 番目の問題は、すべてのインスタンス オブジェクトに影響を与えずに親型のコンストラクターにパラメーターを渡す方法がないことです。

上記 2 つの問題のため、プロトタイプ チェーンがイベントで単独で使用されることはほとんどありません。

以上がJavaScript プロトタイプチェーンで注意すべきことのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。