ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptプロトタイプ継承の基本的な仕組みの解析_javascriptスキル

JavaScriptプロトタイプ継承の基本的な仕組みの解析_javascriptスキル

WBOY
WBOYオリジナル
2016-05-16 18:02:59949ブラウズ

この言語機能の本質は、JavaScript の独自のプロトタイプ チェーン パターンに依存しています。
厳密に言えば、JavaScript はプロトタイプに基づいたオブジェクト指向言語です。つまり、すべてのインスタンス オブジェクトにはプロトタイプがあります。オブジェクトは、このプロトタイプからプロパティとメソッドを継承します。

1. コンストラクター

コンストラクターを使用すると、オブジェクトを簡単に作成できます。コンストラクターの this キーワードは、インスタンス オブジェクト自体を指します:

コードをコピー コードは次のとおりです:

function People(name){
this.name = name;
}

new 演算子とコンストラクターを使用してインスタンス オブジェクトを作成します:
コードをコピーします コードは次のとおりです。

var people = new People('Xiao Ming'); .log(people.name); //Xiao Ming

ただし、2 つのインスタンスが作成された場合、プロパティとメソッドを 2 つのインスタンス間で直接共有することはできません:

コードをコピーします コードは次のとおりです。
var people1 = new People('Xiao Ming');
var people2 = new People('Xiao Wang');
people1.sex = 'male'
console.log(people2.sex); //未定義

オブジェクトがインスタンス化されると、その属性とメソッドは独立して存在します。1 つの属性を変更しても、他のインスタンスには影響しません。


2. プロトタイプ
ということで、インスタンス オブジェクトの生成時に自動的に作成されるプロトタイプ プロパティがあります。これはそれ自体がオブジェクトであり、インスタンス間で共有できるプロパティとメソッドを備えています。インスタンス自体のプロパティとメソッドはコンストラクターに含まれます。つまり、コンストラクター内のプロパティとメソッドはインスタンス化後にローカルのプロパティとメソッドになりますが、プロトタイプ内のプロパティとメソッドはインスタンス内の参照にすぎないため、複数のインスタンスで共有して使用できます。

先ほどと同じコンストラクターです。プロトタイプ属性を追加します。

コードをコピーします コードは次のとおりです:
People.prototype.sex = '女性';
//または People.prototype = {sex: '女性'}; と記述されます。 people1.sex); // 男性
console.log(people2.sex); //女性


People コンストラクターのプロトタイプ属性パラメーターは、people1 と people2 の 2 つのインスタンスに直接影響します。 。

しかし、people1.sex が男性を出力するのはなぜでしょうか? これは、JavaScript ではプロトタイプの関係が再帰的な形式で存在するためです。オブジェクトのプロトタイプもオブジェクトであり、プロトタイプ自体がプロトタイプを持つ場合もあります。最上位のプロトタイプは、グローバル Object オブジェクトです。

これは、people1.sex が man に設定されると、プロトタイプ内の対応する値を公開できないことを意味します。 people1.sex 自体に値がない場合は、コンストラクターのプロトタイプ プロパティから値が読み取られ、同様に Object オブジェクトまで一度に 1 レベルずつ上方向に検索されます。

注: 「null」を使用してオブジェクトに値を割り当てると、カスタム オブジェクトが破棄され、メモリ リソースが解放される可能性があります。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。