ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript プロトタイプとは何ですか? JavaScriptプロトタイプの詳細説明

JavaScript プロトタイプとは何ですか? JavaScriptプロトタイプの詳細説明

不言
不言オリジナル
2018-09-03 10:05:591951ブラウズ

この記事の内容はJavaScriptプロトタイプとは何か? JavaScript プロトタイプの詳細な説明は、参考になると思います。

プロトタイプ

プロトタイプは非常に重要です。プロトタイプと言えば、プロトタイプとは何でしょうか。

コンストラクターが作成されると、この属性はポインターです。このオブジェクトはデフォルトで空のオブジェクトです。 a の目的は、特定の型のすべてのインスタンスで共有できるプロパティとメソッドを含めることです。
率直に言うと、コンストラクターでプロトタイプ属性を呼び出してプロトタイプを指すことができ、それによってそのオブジェクト インスタンスのプロトタイプ オブジェクトを作成できます。

プロトタイプを使用する利点は何ですか?

プロトタイプを使用する利点は、すべてのオブジェクト インスタンスがそれに含まれるプロパティとメソッドを共有できることです。

めまいがありますか?超汚くないですか?コンストラクター、プロトタイプ、インスタンス、心配しないでください。一言で説明します
コンストラクターで定義されたメソッドはすべてのインスタンスで共有できないため、すべてのコンストラクターは最終的にはインスタンスに進化して意味を成す必要がありますしたがって、プロトタイプであるコンストラクターの上位レベルのみを見つけることができます。プロトタイプで定義されたプロパティとメソッドは、すべてのインスタンスで共有できます。これがプロトタイプ オブジェクトの性質です。三人は三角関係です


分かりやすいですよね?それ自体でコンストラクター属性が見つかると、__proto__ を通じてプロトタイプ内でそれを見つけ、プロトタイプ ブリッジを通じてコン​​ストラクターをポイントします) JavaScript プロトタイプとは何ですか? JavaScriptプロトタイプの詳細説明Instance object.__proto__ = プロトタイプ
プロトタイプは印刷および表示できず、プロトタイプを介してのみ取得できます。
constructor.prototype
以下は、プロトタイプを取得するための他の 2 つのメソッドです

isPrototypeOf() メソッド

: このインスタンスのポインターがこのプロトタイプを指すかどうかを判断するために使用されます。 Object.getPrototypeOf() メソッド

: インスタンスのプロトタイプを取得します。このメソッドでサポートされているブラウザは、IE9 以降、Firefox 3.5 以降、Safari 5 以降、Opera 12 以降、Chrome であるため、インスタンスのプロトタイプを取得することをお勧めします。このメソッドを通じてオブジェクトを作成します。

假定有个Person构造函数和person对象
Person.prototype.isPrototypeof(person)  // 返回true说明前者是person1的原型
Object.getPrototypeOf(person) === Person.prototype // 获取person的原型

プロトタイプによって保存されたプロパティとメソッドを共有する複数のオブジェクト インスタンスの基本原理 コードがオブジェクトのプロパティを読み取るたびに、指定された名前のプロパティを対象として検索が実行されます。オブジェクト インスタンス自体から始めます。指定された名前の属性がインスタンス内で見つかった場合は、その属性の値が返されます。見つからなかった場合は、ポインタが指すプロトタイプ オブジェクトが検索され、そのプロトタイプ オブジェクト内で指定された名前の属性が検索されます。このプロパティがプロトタイプ オブジェクトで見つかった場合は、プロパティ値が返されます。
プロトタイプの値にアクセスできますが、プロトタイプの値を上書きすることはできません。インスタンスに属性を追加し、その属性名がプロトタイプと同じ名前である場合、この属性はインスタンスをブロック (上書き) します。そのプロパティのプロトタイプの値。

function Person() {}

Person.prototype.name = "George"
Person.prototype.sayName = function() {
    console.log(this.name)
}

let person1 = new Person();
let person2 = new Person();
person1.name = "命名最头痛";

// 在这一环节,person1.name会从他实例中找,若实例没找到,则继续搜索它的原型对象
console.log(person1.name); // 命名最头痛 
console.log(person2.name); // George
インスタンス オブジェクトにプロパティを追加すると、プロトタイプ内のそのプロパティにアクセスできなくなるだけで、そのプロパティは変更されません。

このプロパティを null に設定しても、このプロパティはインスタンスに設定されるだけで、プロトタイプへの接続は復元されません
インスタンスのプロパティを完全に削除したい場合は、delete 演算子を使用できます。これにより、プロトタイプ内のプロパティに再度アクセスできるようになります。

削除演算子の使用法

依旧用上面那个例子
delete操作符可用于删除对象的属性,无论是实例上的属性,还是在原型上的属性都可以删

delete person1.name    // 删除这个实例的属性
delete Person.prototype.name    // 删除原型上的属性
delete Person.prototype.constructor // 删除constructor属性,这样就没办法指回函数了

hasOwnProperty() メソッドを使用して、プロパティがインスタンスに存在するかプロトタイプに存在するかを検出できます。このメソッドは、指定されたプロパティがオブジェクト インスタンスに存在する場合にのみ true を返します。また、このプロパティがオブジェクト自体のプロパティであるかどうかを検出するために hasOwnProperty メソッドが使用されることも理解できます。 obj.hasOwnProperty('プロパティ名')

デモ:

function Person(){ 
  this.name = '命名最头痛'
}
var person = new Person()
Person.prototype.age = '18'
console.log(person.hasOwnProperty('name'))  // true
console.log(Person.prototype.hasOwnProperty('age')) // true
in演算子

in演算子には2つの用途があります

① for-inループで使用すると、for-inはアクセスできるすべてのオブジェクトを返すことができます。列挙可能) 属性 (列挙可能な属性が一目でわかる)

以上がJavaScript プロトタイプとは何ですか? JavaScriptプロトタイプの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。