ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript アドバンスト シリーズ - プロトタイプ

JavaScript アドバンスト シリーズ - プロトタイプ

黄舟
リリース: 2017-02-07 17:20:08
オリジナル
1091 人が閲覧しました
  • プロパティの検索

  • プロトタイプのプロパティ

  • パフォーマンス

  • 組み込み型の拡張プロトタイプ

  • 概要

JavaScriptには従来のクラス継承モデルですが、プロトタイプのプロトタイプを使用しますモデル。

は JavaScript の欠点としてよく指摘されますが、実際、プロトタイプベースの継承モデルは従来のクラス継承よりも強力です。 従来のクラス継承モデルの実装は簡単ですが、JavaScript でのプロトタイプ継承の実装ははるかに困難です。 (たとえば、その上に古典的なモデルを構築することは非常に簡単ですが、その逆ははるかに困難な作業です。)

JavaScript はプロトタイプ継承に基づいて広く使用されている唯一の言語なので、両方の継承の違いを理解してください。パターンによっては時間がかかります。

違いは、JavaScript がプロトタイプ チェーン継承を使用する方法です。

function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};

function Bar() {}

// 设置Bar的prototype属性为Foo的实例对象
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

// 修正Bar.prototype.constructor为Bar本身
Bar.prototype.constructor = Bar;

var test = new Bar() // 创建Bar的一个新实例

// 原型链
test [Bar的实例]
    Bar.prototype [Foo的实例] 
        { foo: 'Hello World' }
        Foo.prototype
            {method: ...};
            Object.prototype
                {toString: ... /* etc. */};
ログイン後にコピー

上記の例では、テスト オブジェクトは Bar.prototype と Foo.prototype を継承しているため、Foo のプロトタイプ メソッドにアクセスできます。同時に、プロトタイプで定義された Foo インスタンスのプロパティ値にもアクセスできます。 new Bar() は新しい Foo インスタンスを作成するのではなく、そのプロトタイプでインスタンスを再利用するため、すべての Bar インスタンスは同じ value プロパティを共有することに注意してください。

プロパティ検索

オブジェクトのプロパティを検索すると、JavaScript は指定された名前のプロパティが見つかるまでプロトタイプ チェーンをたどります。

プロトタイプ チェーンの先頭 (つまり、Object.prototype) に到達しても、指定されたプロパティがまだ見つからない場合は、unknown が返されます。

注: Bar.prototype = Foo は使用しないでください。これは Foo のプロトタイプを実行せず、関数 Foo を指すことになります。 したがって、プロトタイプ チェーンは Foo.prototype ではなく Function.prototype に戻るため、メソッドは Bar のプロトタイプ チェーンには存在しません。

プロトタイプ属性

この属性を使用してプロトタイプ チェーンを作成すると、任意のタイプの値をそれに割り当てることができます (プロトタイプ)。 ただし、プロトタイプへのアトミック タイプの割り当ては無視されます。

function Foo() {}
Foo.prototype = 1; // 无效
ログイン後にコピー

上記の例に示すように、オブジェクトをプロトタイプに割り当てると、プロトタイプ チェーンが動的に作成されます。

パフォーマンス

プロパティがプロトタイプ チェーンの上位にある場合、検索時間に悪影響を及ぼします。特に、存在しないプロパティにアクセスしようとすると、プロトタイプ チェーン全体を横断することになります。

そして、for in ループを使用してオブジェクトのプロパティを反復処理すると、プロトタイプ チェーン上のすべてのプロパティがアクセスされます。

組み込み型のプロトタイプを拡張する

よく使用される間違った機能は、Object.prototype または組み込み型の他のプロトタイプ オブジェクトを拡張することです。

この手法はモンキー パッチングと呼ばれ、カプセル化を破壊します。これは Prototype などの一部の JavaScript ライブラリで広く使用されていますが、組み込み型にいくつかの非標準関数を追加するのは良い考えではないと思います。

組み込み型を拡張する唯一の理由は、Array.forEach などの新しい JavaScript との一貫性を保つためです。

概要

複雑な JavaScript アプリケーションを作成する前に、プロトタイプ チェーンの継承がどのように機能するかを完全に理解することは、すべての JavaScript プログラマーにとって必須です。 長いプロトタイプ チェーンによって引き起こされるパフォーマンスの問題に注意し、チェーンを短くしてパフォーマンスを向上させる方法を知ってください。 さらに、新しい JavaScript エンジンとの互換性を除き、組み込み型のプロトタイプを拡張しないでください。

注: これはバックポートと呼ばれるプログラミング分野で一般的に使用される方法で、古いバージョンに新しいパッチを追加することを意味します。

上記は JavaScript 上級シリーズ - プロトタイプの内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) をご覧ください。


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