ホームページ > 記事 > ウェブフロントエンド > 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 ビデオ チュートリアル をご覧ください。