Javascriptの新しいキーワードの使用法

怪我咯
リリース: 2017-07-07 10:36:18
オリジナル
1600 人が閲覧しました

私は JavaScript の初心者です。これが私のような初心者にとって役立つことを願っています。また、専門家が私を批判して修正してくれることを願っています。

(続き)まず、ベテランにとっては新鮮ではないが、初心者にとっては非常に興味深い写真を見てみましょう:

Javascriptの新しいキーワードの使用法

それは一体何ですか?

新しい

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

<p><!--<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></p>
ログイン後にコピー

は次の結果を取得します:

Javascriptの新しいキーワードの使用法

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

1. x という名前であると仮定して、オブジェクトを作成します。

2. A.prototype がオブジェクトの場合 (通常はそうです)、A.prototype を x.proto に割り当てます; それ以外の場合 (珍しい)、大ボス Object に介入してもらい、Object.prototype を x に割り当てます。プロト。

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 関数が返すものを指します。 疑似コードは次のとおりです:

<p><!--<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;</span></p>
ログイン後にコピー

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

Javascriptの新しいキーワードの使用法 案の定。

オブジェクトのコンストラクター属性

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

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

上記のコードを実行した後、mybase.constructor が Base であることは簡単に推測できますが、d はどうなるでしょうか。コンストラクタ?派生ですか?

Javascriptの新しいキーワードの使用法いや、それもBaseだよ、どうしたの?とても簡単です

おさらい

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

Instanceof

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

Javascriptの新しいキーワードの使用法 図からわかるように、dはBase、Derived、Objectのインスタンスです。非常に合理的ですが、これをどう判断すればよいでしょうか?これは次のようになります: x インスタンスオブ コンストラクターの

expression

の場合、constructor.prototype が x のプロトタイプ (プロト) チェーン内にある場合、true が返されます。当然、dのプロトチェーンは、Derived.prototype、Base.prototype、Object.prototypeとなり、図のような結果が得られることは間違いありません。したがって、instanceof はオブジェクトのコンストラクター プロパティとは何の関係もありません。

関数とオブジェクト

最後に、記事の冒頭の画像に答えてください。

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

また、つまり、次のコードが想像できます:

<p><!--<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></p>
ログイン後にコピー

前の記事のルールに従って、Function.proto === Function.prototype、および Object.proto === が存在します。 Function.prototype、検証してください:

オブジェクトの関数インスタンス、これは明らかに当てはまります。すべてがオブジェクトによって管理され、関数のプロト チェーンは Function.prototype、Object.prototype を指します。

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

以上がJavascriptの新しいキーワードの使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!