ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript プロトタイプチェーンを簡単に理解する_JavaScript スキル

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

WBOY
リリース: 2016-05-16 16:00:04
オリジナル
1297 人が閲覧しました

この記事の例では、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 プログラミング設計に役立つことを願っています。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート