ホームページ ウェブフロントエンド jsチュートリアル Javascript の new キーワードとその他の _javascript テクニックの秘密

Javascript の new キーワードとその他の _javascript テクニックの秘密

May 16, 2016 pm 06:20 PM
new キーワード

( から続きます) まず、ベテランにとっては目新しいものではありませんが、初心者にとっては非常に興味深い写真を見てみましょう:

Javascript の new キーワードとその他の _javascript テクニックの秘密

それは一体何ですか?それはただのルンルンです。

新しい

上の図はさておき、前の記事で残った 2 番目の質問を見てみましょう。コンストラクターの関数本体に何かを追加して、何が起こるかを見てみましょう。

<div>
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000"> A(){</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.p </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #000000">1</span><span style="COLOR: #000000">}<br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000"> a </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> A()</span>
</div>
ログイン後にコピー

次の結果が得られます:

Javascript の new キーワードとその他の _javascript テクニックの秘密

new キーワードで構築された a が属性 p を取得するのはなぜですか?コードの新しい A() 行は何をするのでしょうか?前回の記事の関数作成プロセスのステップ 4 によると、オブジェクト A は Construct 属性を持ちます (コンストラクターではないことに注意してください。Consturct は ECMAScript 標準の属性であり、外部には見えないようです)。この属性の値が関数の場合、 new A( ) は A の Construct 関数を呼び出します。では、この Construct 関数は何をするのでしょうか?

1. x という名前のオブジェクトを作成します。

2. A.prototype がオブジェクトの場合 (通常はオブジェクトです)、A.prototype を x.__proto__ に割り当てます。それ以外の場合 (一般的ではありません)、ビッグボス オブジェクトにアクションを実行して Object.prototype を x.__proto__ に割り当てます。

3. A.call(x) を呼び出し、作成したばかりの x を最初のパラメーターとして渡します。以上です、A の関数本体の this.p = 1、これ this が x になります。したがって、x は属性 p を持ち、x.p = 1 になります。

4. 通常の状況では x が返されますが、このとき a は x です。ただし、特殊なケースがあります。A の関数本体が何かを返す場合、その型 (typeof) はオブジェクトです。この場合、a は x を指すのではなく、A 関数が返すものを指します。

疑似コードは次のとおりです:

<div>
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000"> x </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> Object(); </span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">事实上不一定用new来创建,我也不清楚。</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">x.__proto__ </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> A.prototype <br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000"> result </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> A.call(x)<br></span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000"> (</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">(result) </span><span style="COLOR: #000000">==</span><span style="COLOR: #000000"> </span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">object</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">){<br>  </span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000"> result;<br>}<br></span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000"> x;<br></span>
</div>
ログイン後にコピー

この例では、A 関数は未定義を返します (戻り値がないため)。したがって、a は x です。ただし、上記のステップ 4 の特殊な状況を検証する例を見てみましょう:

Javascript の new キーワードとその他の _javascript テクニックの秘密

確かにそうです。

オブジェクトのコンストラクタープロパティ

前の記事に残っている最初の質問を見てください

<div>
<span>function</span><span> Base(){}<br>Base.prototype.a </span><span>=</span><span> </span><span>1</span><span><br></span><span>var</span><span> base </span><span>=</span><span> </span><span>new</span><span> Base();<br><br></span><span>function</span><span> Derived(){}<br>Derived.prototype </span><span>=</span><span> base;<br></span><span>var</span><span> d </span><span>=</span><span> </span><span>new</span><span> Derived()</span>
</div>
ログイン後にコピー

上記のコードを実行すると、mybase.constructor が Base であることは容易に推測できますが、d.constructor はどうでしょうか?派生ですか?

Javascript の new キーワードとその他の _javascript テクニックの秘密

いいえ、それもBaseです、何が起こっているのですか?前の記事の内容を確認すると、これは非常に簡単であることがわかります。 d 自体にはコンストラクター属性がないため、d.__proto__ にアクセスして、これを見つけます。これは Derived.prototype です。オブジェクトbase、baseにはコンストラクター属性がないので、base.__proto__、つまりBase.prototypeを探します。これには Base 自体であるコンストラクター属性があります。実際、私がこれまでに知っている限り、コンストラクターのプロトタイプ(関数型オブジェクト)だけが実際にコンストラクター属性を持つ独自のオブジェクトを持ち、「constructor.prototype.constructor === コンストラクター」となっています。

のインスタンス

それでは、instanceof はどうでしょうか?

Javascript の new キーワードとその他の _javascript テクニックの秘密

図から分かるように、d は Base、Derived、Object のインスタンスです。非常に合理的ですが、これをどう判断すればよいでしょうか?これは次のようになります。 x インスタンスオブコンストラクターの式の場合、constructor.prototype が x のプロトタイプ (__proto__) チェーン内にある場合、true が返されます。明らかに、d の __proto__ チェーンは、 Derived.prototype、Base.prototype、Object.prototype となり、図の結果が得られることは間違いありません。したがって、instanceof はオブジェクトのコンストラクター プロパティとは何の関係もありません。

関数とオブジェクト

最後に、記事冒頭の写真について答えさせてください。

Function と Object 自体も関数型オブジェクトなので、両方とも Function() によって構築されると言えます (自分で構築します。これが事実かどうかはわかりませんが、考えるのはかなり合理的です)そう。)

言い換えると、次のコードを想像できます:

<div>
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000"> Function </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> Function()<br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000"> Object </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> Function() </span>
</div>
ログイン後にコピー

前の記事のルールによれば、Function.__proto__ === Function.prototype と Object.__proto__ === Function.prototype が存在します。それを確認してください:

Javascript の new キーワードとその他の _javascript テクニックの秘密

オブジェクトの関数インスタンス、これは明らかに当てはまります。関数の __proto__ チェーンは Function.prototype、Object.prototype を指します。

Function のオブジェクト インスタンス。Function.prototype は Object の __proto__ チェーン内にあるため、これも当てはまります。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

C 言語における static キーワードの役割と使用法の詳細な分析 C 言語における static キーワードの役割と使用法の詳細な分析 Feb 20, 2024 pm 04:30 PM

C 言語における static キーワードの役割と使用法の詳細な分析 C 言語では、static は関数、変数、データ型の定義に使用できる非常に重要なキーワードです。 static キーワードを使用すると、オブジェクトのリンク属性、スコープ、ライフサイクルが変更される可能性があるため、C 言語における static キーワードの役割と使用法を詳しく分析してみましょう。静的変数と関数: 関数内で static キーワードを使用して定義された変数は静的変数と呼ばれ、グローバルなライフサイクルを持ちます。

go は C 言語のキーワードですか?詳細な分析 go は C 言語のキーワードですか?詳細な分析 Mar 16, 2024 am 10:30 AM

タイトル: go は C 言語のキーワードですか?詳細な分析 C 言語では、「go」はキーワードではありません。 C 言語のキーワードは C 標準で指定されており、特定の文法構造または関数を表すために使用されます。コンパイラでは特別な意味を持ち、識別子や変数名として使用することはできません。たとえば、キーワード「int」は整数データ型を表し、「if」は条件ステートメントを表します。 「go」が C 言語のキーワードであるかどうかを確認したい場合は、それをテストするための簡単なプログラムを作成できます。以下に例を示します: #inc

PHP における var キーワードの役割と例 PHP における var キーワードの役割と例 Jun 28, 2023 pm 08:58 PM

PHP における var キーワードの役割と例 PHP では、var キーワードを使用して変数を宣言します。以前の PHP バージョンでは、var キーワードの使用がメンバー変数を宣言する慣用的な方法でしたが、その使用は推奨されなくなりました。ただし、場合によっては、引き続き var キーワードが使用されます。 var キーワードは主にローカル変数を宣言し、その変数をローカル スコープとして自動的にマークするために使用されます。これは、変数が現在のコード ブロック内でのみ表示され、他の関数やコード ブロックからはアクセスできないことを意味します。変数を使用する

C言語にはキーワードがいくつありますか? C言語にはキーワードがいくつありますか? Nov 22, 2022 pm 03:39 PM

C言語には32個のキーワードがあり、キーワードの機能によりデータ型キーワード、制御文キーワード、記憶型キーワード、その他のキーワードの4つに分類されます。 char、double、float、int などを含む 12 個のデータ型キーワードがあり、for、break、if、else、do などを含む 12 個の制御ステートメント キーワードがあり、auto、 static 、 extern など、他に const、sizeof などを含む 4 つのキーワードがあります。

PHP における extends キーワードの役割と使用法の詳細な説明 PHP における extends キーワードの役割と使用法の詳細な説明 Jun 28, 2023 pm 08:04 PM

PHP における extends キーワードの役割と使用法の詳細な説明 PHP プログラミングにおいて、extends はクラスの継承を実装するために使用される非常に重要なキーワードです。 extends キーワードを使用すると、1 つ以上の既存のクラスのプロパティとメソッドを継承できる新しいクラスを作成できます。継承はオブジェクト指向プログラミングにおける重要な概念であり、コードの再利用と拡張をより便利かつ柔軟にします。この記事では、extendsキーワードの機能と使い方を詳しく紹介します。伸びる

Go 言語キーワードの完全なリスト Go 言語キーワードの完全なリスト Apr 07, 2024 pm 02:15 PM

Go 言語のキーワードは次のとおりです。 基本キーワード: const、func、type、var、if、else、for、return データ型関連キーワード: bool、string、int、float64、interface{}、map、slice その他のキーワード:break、続行、延期、移動、選択、範囲

go 言語のキーワードは while ですか? go 言語のキーワードは while ですか? Jun 04, 2021 pm 05:01 PM

Go 言語では、while はキーワードではありません。for ステートメントと Break を使用すると、「for {sum++ if sum>10{break}else{...}}」など、while ループの効果を得ることができます。 go 言語には、break、default、func、select、case、defer、go、map、else、goto、for、if、var など 25 のキーワードがあります。

Javaで新しいキーワードを使用する方法 Javaで新しいキーワードを使用する方法 May 03, 2023 pm 10:16 PM

1. 概念 Java 言語では、「new」式はインスタンスを作成する役割を果たし、その中でコンストラクターが呼び出されてインスタンスを初期化します。コンストラクター自体の戻り値の型は void であり、「コンストラクターは新しく作成された値を返す」ではありません。オブジェクト参照」ですが、新しい式の値は新しく作成されたオブジェクトへの参照です。 2. 目的: 新しいクラスのオブジェクトを作成する 3. 動作メカニズム: オブジェクトのメンバーにメモリ領域を割り当て、デフォルト値を指定する メンバー変数を明示的に初期化し、構築メソッドの計算を実行し、参照値を返す 4. 新しい操作を頻繁にインスタンス化するメモリ内に新しいメモリを開くことを意味し、メモリ内のヒープ領域にメモリ空間が確保され、jvmによって制御され、メモリが自動的に管理されます。ここでは例として String クラスを使用します。プ

See all articles