jsプロトタイプとプロトタイプチェーンの詳細説明-jsチュートリアル-php.cn

jsプロトタイプとプロトタイプチェーンの詳細説明

php中世界最好的语言

リリース： 2018-03-19 14:52:51

オリジナル

1390 人が閲覧しました

今回はjsのプロトタイプとプロトタイプチェーンについて詳しく説明します。jsのプロトタイプとプロトタイプチェーンを使用する際の注意点は何ですか?実際のケースを見てみましょう。

作成するすべての関数にはプロトタイプ属性があり、この属性はプロトタイプオブジェクトを指すポインターであり、このプロトタイプオブジェクトが持つ

プロパティとメソッドはすべてのインスタンスで共有できます。

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.sayName = function(){
alert(this.name);
};var person1 = new Person();
person1.sayName(); //"Nicholas"var person2 = new Person();
person2.sayName(); //"Nicholas"alert(person1.sayName == person2.sayName); //true

ログイン後にコピー

1. プロトタイプオブジェクトを理解する

新しい関数が作成されるたびに、特定のルールセットに従ってその関数のプロトタイププロパティが作成されます。このプロパティは、関数のプロトタイプオブジェクトを指します。

デフォルトでは、すべてのプロトタイプオブジェクトは、プロトタイプ属性が配置されている関数へのポインターを含むコンストラクター (constructor) 属性を自動的に取得します。

新しいインスタンスを作成するためにコンストラクターが呼び出されるとき、インスタンスにはコンストラクターのプロトタイプオブジェクトを指すポインター (内部プロパティ) が含まれます。 ECMA-262 バージョン 5 では、このポインターを [[プロトタイプ]] と呼びます。

スクリプトで [[プロトタイプ]] にアクセスする標準的な方法はありませんが、Firefox、Safari、Chrome はすべてのオブジェクトでプロパティ proto をサポートしていますが、このプロパティはスクリプトにはまったく認識されません。

ただし、明確にしておくべき本当に重要な点は、この接続はインスタンスとコンストラクターの間ではなく、インスタンスとコンストラクターのプロトタイプオブジェクトの間に存在するということです。

Person コンストラクターと Person.prototype を使用してインスタンスを作成する前述のコードを例として、図 6-1 に各オブジェクト間の関係を示します。

ここで、 person.prototype はプロトタイプオブジェクトを指し、 Person.prototype.constructor は person を指します。

person1 と person2 には両方とも、person.prototype を指すだけの内部プロパティが含まれています。つまり、コンストラクターと直接の関係はありません。

person1.sayName() を呼び出すことができます。これは、オブジェクトのプロパティを見つけるプロセスを通じて実現されます。 (最初にインスタンスを検索し、見つからない場合はプロトタイプの検索を続けます。)

alert(Person.prototype.isPrototypeOf(person1)); alert(Person.prototype.isPrototypeOf(person2));

ログイン後にコピー

2. より単純なプロトタイプ構文

前の例では、「人」と入力する必要があります。属性とメソッドを追加するたびにプロトタイプを作成します。不必要な入力を減らし、プロトタイプの機能をより視覚的にカプセル化するために、すべてのプロパティとメソッドを含むオブジェクトリテラルでプロトタイプオブジェクト全体をオーバーライドすることが一般的です。

function Person(){
}
Person.prototype = {
　　name : "Nicholas",
　　age : 29,
　　job: "Software Engineer",
　　sayName : function () {
　　　　alert(this.name);
　　}
};

ログイン後にコピー

上記のコードでは、オブジェクトリテラルとして作成された新しいオブジェクトに person.prototype を設定しています。最終結果は同じですが、

1 つの例外があります: コンストラクタープロパティは person を指さなくなりました。

前述したように、関数が作成されるたびにそのプロトタイプオブジェクトも同時に作成され、このオブジェクトはコンストラクタープロパティも自動的に取得します。

var friend = new Person();
alert(friend instanceof Object); //truealert(friend instanceof Person); //truealert(friend.constructor == Person); //falsealert(friend.constructor == Object); //true

ログイン後にコピー

ここで、instanceof

operator を使用して Object と Person をテストすると、依然として true が返されますが、コンストラクターのプロパティは Object と等しく、Person と等しくありません。

コンストラクターの値が本当に重要な場合は、以下のように具体的に適切な値に戻すことができます。

function Person(){
}
Person.prototype = {    constructor : Person,
    name : "Nicholas",
    age : 29,
    job: "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};

ログイン後にコピー

3. ネイティブオブジェクトのプロトタイプ

すべてのネイティブ参照型 (Object、Array、String など) には、コンストラクターのプロトタイプでメソッドが定義されています。

たとえば、sort() メソッドは Array.prototype にあり、substring() メソッドは String.prototype にあります。変更することは可能ですが、ネイティブオブジェクトのプロトタイプを変更することはお勧めできません。

4. プロトタイプオブジェクトの問題

プロトタイプパターンの最大の問題は、その共有の性質によって引き起こされます。いずれかを変更すると、もう一方にも影響します。

function Person(){
}
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
};var person1 = new Person();var person2 = new Person();person1.friends.push("Van");alert(person1.friends); //"Shelby,Court,Van"alert(person2.friends); //"Shelby,Court,Van"alert(person1.friends === person2.friends); //true

ログイン後にコピー

五、原型链

其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。然后层层递进，就构成了实例与原型的链条，这就是所谓原型链的基本概念。

function SuperType(){
　　this.property = true;
}
SuperType.prototype.getSuperValue = function(){
　　return this.property;
};function SubType(){
　　this.subproperty = false;
}//继承了 SuperTypeSubType.prototype = new SuperType();SubType.prototype.getSubValue = function (){
　　return this.subproperty;
};var instance = new SubType();
alert(instance.getSuperValue()); //true

ログイン後にコピー

　一张图说明：