JavaScript のプロトタイプとプロトタイプ チェーンを理解する

この記事では JavaScript のプロトタイプとプロトタイプチェーンを紹介します。必要な方は参考にしてください。

プロトタイプ

ご存知のとおり、JavaScript には従来のクラス継承モデルは含まれておらず、プロトタイプのプロトタイプ モデルが使用されます。コードの実装は大まかに次のとおりです。

function Student(name){
 this.name = name;
}
 
var Kimy = new Student("Kimy");
 
Student.prototype.say = function(){
 console.log(this.name + "say");
}

Kimy.say();
//Kimysay

Kimy 自体には Say メソッドがありません。自分のオブジェクトでメソッドが見つからない場合、プロトタイプに戻ってメソッドを見つけます。 Student.prototype オブジェクトで検索します。ここでは、コンストラクター Student

コンストラクター、__proto__ およびプロトタイプ チェーン

IE を除き、他のブラウザーは Object オブジェクトのインスタンス上にあります。 、非標準の __proto__ 属性 (前後 2 つのアンダースコア) がデプロイされ、オブジェクトのプロトタイプ オブジェクト、つまりコンストラクターのプロトタイプ属性を指します。

コードと画像の盗用

// 构造方法
function Foo(y) {
 this.y = y;
}
 
Foo.prototype.x = 10;
 
// 继承方法"calculate"
Foo.prototype.calculate = function (z) {
 return this.x + this.y + z;
};
 
// 使用foo模式创建 "b" and "c"
var b = new Foo(20);
var c = new Foo(30);
 
// 调用继承的方法
b.calculate(30); // 60
c.calculate(40); // 80
 
 
console.log(
 
 b.__proto__ === Foo.prototype, // true
 c.__proto__ === Foo.prototype, // true
 
 b.constructor === Foo, // true
 c.constructor === Foo, // true
 Foo.prototype.constructor === Foo // true
 
 b.calculate === b.__proto__.calculate, // true
 b.__proto__.calculate === Foo.prototype.calculate // true
 
);

各オブジェクトには __proto__ 属性が含まれており、 __proto__ はプロトタイプ属性を指していることがわかります。 Foo の b を構築するコンストラクター メソッドであり、Foo.prototype もオブジェクトであり、それを構築するコンストラクター メソッド Object を指す __proto__ プロトタイプもあります。 Object.prototype の __proto__ は null を指し、プロトタイプ チェーンを形成します。

ここでのコード部分も理解する必要があります:

Object instanceof Function
//true
Function instanceof Object
//true

new は何をするのか

ここにも小さな問題があります。 jsでは普通のことです。関数とコンストラクタの形式に大きな違いはないようです（最初の文字を大文字にする必要はありませんが、コンストラクタの最初の文字は通常大文字になります）。新しいキーワードは具体的に何をするのでしょうか?

例:

var Kimy = new Student();

new は次の 3 つのことを行います:

var Kimy = {}; 

Kimy.__proto__ = Student.prototype;

Student.call(Kimy);

1. 空のオブジェクトを定義します

2. そのプロトタイプ

3. 初期化オブジェクト

これにより、Kimy.__proto__ が Student.prototype (同じ参照) を指す理由が理解できます。new が重要な役割を果たしていることがわかります。

上記はこの記事の全内容です。その他の関連チュートリアルについては、JavaScript ビデオ チュートリアル をご覧ください。