JavaScript のいくつかの重要な概念の理解 - プロトタイプの構築chain_javascript スキル

Javascript のすべての関数にはプロトタイプ属性があり、このプロトタイプ属性はオブジェクト型オブジェクトです。この関数によって構築されたすべてのオブジェクトは、このプロトタイプの特性を持ちます。つまり、構築されたオブジェクトを使用してプロトタイプのプロパティとメソッドに直接アクセスできます。の上。
次のコードは、プロトタイプの使用方法を示しています:

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

function Staff(name) {
this.name = name;
}
Staff.prototype.say = function() {
alert(this.name "say hello");
}
var Staff1 = new Staff("hunter");
var Staff2 = new Staff("dan​​gjian");
staff1.say();

上記のプログラムを実行すると、プロトタイプのプロパティとメソッドが作成されたオブジェクト間で呼び出せることがわかります。さらに重要なのは、プロトタイプのプロパティとメソッドが同じオブジェクト間で共有されることです。 type

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

alert( Staff1.say == Staff2.say) ;

プロトタイプのもう 1 つの一般的な機能は、プロトタイプを通じてオブジェクトの継承関係を構築することです。基底クラスのオブジェクトをサブクラスのプロトタイプに割り当てることで、オブジェクト指向の継承関係をシミュレートできます。これは、JavaScript のオブジェクト指向メカニズムとよく呼ばれるものです。次のコード スニペットは、この機能を使用してオブジェクトを構築する際の継承関係を示しています。

コードをコピーします コードは次のとおりです。

function Staff(name) { // 基本クラス
this.name = name;
}
Staff.prototype.say = function() {
alert(this. name " こんにちは");
}
function ManStaff(name, age) { // サブクラス
this.name = name;
this.age = age; ManStaff.prototype = new Staff(); // 継承関係を確立します
var manStaff("hunter", 22);
var manStaff("dan​​gjian", 32); .say ();
manStaff2.say();


コードを実行すると、ManStaff オブジェクトが基底クラス Staff に Say メソッドを持っていることがわかります。 JavaScriptを実現しました。上記のプロトタイプの使用法はよくご存じかもしれませんが、プログラマとしては、その使用法を知るだけでなく、それがプロトタイプの内部メカニズムであることも理解する必要があります。プロトタイプの原理とプロトタイプチェーンの実装を分析してみましょう。
プロトタイプの仕組みを理解するには、JavaScript で関数がどのように作成されるかを理解する必要があります。
関数 Staff(name) {this.name = name;} に対してコードが実行されると、インタープリタは var Staff = new Function("name", "this.name = name") を実行することと同じになります。事前定義された Function() コンストラクターを使用して、関数型オブジェクト、つまり Staff を作成します。

次に、作成した Staff オブジェクトに __proto__ 属性を追加し、それを Function コンストラクターのプロトタイプに割り当てます。このステップは、var x = new X () メソッドなどを実行するときのすべてのステップです。 X のプロトタイプを :


Staff.__proto__ = Function.prototype;

次に、Staff のプロトタイプ属性を作成します。関数型オブジェクトを作成する手順と作成プロセス 次の疑似コード: コードをコピー

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

var o = new Object();
o.constructor = ベース;

From the above analysis, we can see that when an object is created, a private attribute __proto__ is created, and when a function is created, a prototype attribute is created. Because Staff is a function type object, it will have both properties.
These two properties are key properties for building a prototype chain. Let's analyze how the prototype is passed when executing the code var staff1 = new Staff("hunter").
According to the above analysis, staff1.__proto__ = Staff.prototype, and Staff.prototype is an object created by Object, that is, Staff.prototype.__proto__ = Object.prototype, so staff1.__proto__ .__proto__ points to Object. prototype, that is, staff1.__proto__ .__proto__ == Object.prototype, this is the prototype chain. When you want to read the properties of an object, JS first looks for whether the object itself has this property. If not, it will continue to search along the prototype chain. this property.
If you know the principle of prototype chain, it is easy to build object inheritance in Javascript based on this principle.
From the above analysis, we know that the top of the prototype chain is Object.prototype, which means that Object is the base class of all objects in the built inheritance relationship. You can run the following code verification.

Copy code The code is as follows:

Object.prototype.location = "China";
function Staff(name) { // Base class
this.name = name;
}
Staff.prototype.say = function() {
alert(this.name " say hello") ;
}
var ManStaff1 = new Staff("hunter");
var ManStaff2 = new Staff("dangjian");
alert(ManStaff1.location);
alert(ManStaff2. location);

The running results show that Object is the base class of Staff, so how to build a subclass of Staff?
Understanding the establishment principle of the above function, we can easily write the following code:

Copy the code The code is as follows:

function Staff(name) { // Base class
this.name = name;
}
Staff.prototype.say = function() {
alert(this .name " say hello");
}
function ManStaff(name, age) { // Subclass
Staff.call(this,name);
this.age = age;
}
ManStaff.prototype = new Staff(); // Establish inheritance relationship
var ManStaff1 = new ManStaff("hunter", 22);
var ManStaff2 = new ManStaff("dangjian", 32) ;
ManStaff1.say();
ManStaff2.say();

This is the sentence that establishes the inheritance relationship: ManStaff.prototype = new Staff(); , the inheritance relationship is calculated as follows ：ManStaff1.__proto__ = =ManStaff.prototype, ManStaff.prototype.__proto__ = Staff.prototype, Staff.prototype.__proto__ == Object.prototype; then ManStaff1.__proto__.__proto__.__proto__ == Object.prototype.
This inheritance relationship in JavaScript is looser than the traditional object-oriented inheritance relationship, and the construction method is more difficult to understand, but as a scripting language, its functions are already very powerful.