JavaScript プロトタイプチェーンで注意すべきことのまとめ-jsチュートリアル-php.cn

この記事は、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 サイトの他の関連記事を参照してください。