JavaScript プロトタイプチェーンを簡単に理解する_JavaScript スキル

この記事の例では、JavaScript のプロトタイプ チェーンについて説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

JavaScript プロトタイプ チェーンについては、非常に奥深いものだと思っていましたが、今日いくつかの紹介文を読んだ後、この図を見つけました。つまり、これほど明確に説明できる言語はないということです。写真。

この写真を見た後、私は突然 JavaScript を定性的に理解しました。

JavaScript プロトタイプ チェーンには、明示的と暗黙的な 2 つのタイプがあります。

明示的なプロトタイプ チェーン: は共通のプロトタイプです。

暗黙的プロトタイプ チェーン: 通常の状況ではアクセスできません。つまり、FireFox では __proto__ を介してアクセスできます。暗黙的プロトタイプ チェーンは、JavaScript エンジン内でプロトタイプ チェーンを検索するために使用されます。 . プロトタイプチェーンを表示することで設定されます。
1. プロトタイプと __proto__ の概念
プロトタイプは関数の属性です (各関数にはプロトタイプ属性があります)。この属性はオブジェクトを指すポインターです。変更されたオブジェクトのプロトタイプを表示するプロパティです。

__proto__ はオブジェクトが所有する組み込み属性です (注意: プロトタイプは関数の組み込み属性であり、__proto__ はオブジェクトの組み込み属性です)。これは JS によって内部的に使用される属性です。プロトタイプチェーンを見つけるために。

chrome と FF はどちらもオブジェクトの __proto__ 属性にアクセスできますが、IE はアクセスできません。

2. 新しいプロセス

var Person = function(){};
var p = new Person();

新しいプロセスは次の 3 つのステップに分かれています:

(1) var p={} つまり、オブジェクト p

を初期化します。 (2) p.__proto__ = person.prototype;

(3) Person.call(p); つまり、p を構築します。これは初期化 p
とも呼ばれます。
鍵は 2 番目のステップにあります。それを証明しましょう:

var Person = function(){};
var p = new Person();
alert(p.__proto__ === Person.prototype);

このコードは true を返します。これは、ステップ 2 が正しいことを示しています。

3. 例

var Person = function(){};
Person.prototype.sayName = function() {
  alert("My Name is Jacky");
};
Person.prototype.age = 27;
var p = new Person();
p.sayName();

p は person を参照するオブジェクトです。 page.age を実行するときに、sayName メソッドと age 属性を定義しました。まず、この内部 (つまり、コンストラクター内) を検索します。見つからない場合は、プロトタイプに沿って追跡します。鎖。

ここでの上向きのトレースバックはどのように上向きに機能しますか?ここでは、__proto__ 属性を使用して、検索用のプロトタイプ (つまり、Person.prototype) にリンクする必要があります。ついにプロトタイプの age 属性を発見しました。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。