JavaScript におけるこれの魔法とは何でしょうか?

このキーワードは、JavaScript の中で最も複雑なメカニズムの 1 つです。これは、すべての関数のスコープ内で自動的に定義される非常に特殊なキーワードです。しかし、経験豊富な JavaScript 開発者でも、それが正確に何を指しているのかを理解するのは困難です。 ＃＃＃＃＃＃これは何ですか？

関数自体を指しますか?

文字通りの意味を見ると、これは関数自体を指していると思われがちですが、本当にそうでしょうか?例を見てみましょう。

function foo() {
    this.count = this.count ? this.count + 1 : 1;
}

for (let i = 0; i < 5; i++) {
    foo();
}
console.log(foo.count); // undefined

ご覧のとおり、foo.count の出力は予想した

ではなく、最初に割り当てられた 0 です。言い換えれば、this は実際には関数自体を指しているわけではありません。 スコープを指しますか?

もう 1 つのよくある誤解は、これが関数のスコープを指しているということです。

function foo() {
    var a = 2;
    bar();
}
function bar() {
    console.log(this.a);
}

foo(); // undefined

このコードでは、bar は foo で実行され、

の出力は unknown です。言い換えれば、this は関数のスコープを指す ではありません。 これじゃない、あれじゃない、これは何ですか？

これのバインディング ルール

これのバインディングには 4 つのルールがあり、以下で 1 つずつ紹介します。

1. デフォルトのバインディング

ここで述べる独立関数は、以下の 3 つの状況を除いて、一般的な関数呼び出しとして理解できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// 非严格模式 var name = 'Willem'; function foo() {     console.log(this.name); } foo(); // Willem // 执行时启用严格模式 (function() {     'use strict';     foo(); // Willem     bar(); // Cannot read property 'name' of undefined })(); // 函数体使用严格模式 function bar() {     'use strict';     console.log(this.name); }</pre><div class="contentsignin">ログイン後にコピー</div></div>上記のコードでは、Willem が通常の環境で出力され、それが確かにポイントされているウィンドウ オブジェクトであることを示しています。特別な注意が必要な点が 1 つあります。

2. 暗黙的なバインディング

暗黙的なバインディングとは、関数の実行時に

function foo() {
    console.log(this.a);
}
var a = 1;
var obj = {
    a: 2,
    foo
};
obj.foo(); // 2
var obj2 = {
    a: 3,
    obj
};
obj2.obj.foo(); // 2

obj.a と同等です。オブジェクト プロパティ チェーン呼び出しでは、最後のレイヤーのみが呼び出し位置に影響します。つまり、最後のレイヤーがこの点に影響します。 多くのフロントエンドの友人がインタビュー中にこの質問を見たことがあるかもしれません:

function foo() {
    console.log(this.a);
}
var a = 1;
var obj = {
    a: 2,
    foo
};
var bar = obj.foo;
bar(); // 1

暗黙的損失: この方法でバインドされた隠し関数は失われます。バインディング オブジェクト

this は window|unknown# を指します。 ##。 古典的なコールバック関数のこのポインティングの問題もあり、これも暗黙的に失われます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function foo() {     console.log(this.a); } function doFoo(fn) {     fn(); } var a = 1; var obj = {     a: 2,     foo }; doFoo(obj.foo); // 1</pre><div class="contentsignin">ログイン後にコピー</div></div>要約: 暗黙的なバインディングでは、値を割り当てるとき (コールバックは暗黙的な代入です)、暗黙的な損失の問題に特別な注意を払う必要があります。

3. 表示バインディング JavaScript の

関数には

と

という 2 つのメソッドが用意されており、渡される最初のパラメータは次のとおりです。オブジェクトはこれをバインドします。このオブジェクト。プリミティブ値 (文字列、数値、ブール値) が渡された場合、その値はオブジェクト形式 (new String()、new Boolean()、new Number()) に変換されます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function foo() {     console.log(this.a); } var obj = {     a: 1 }; foo.call(obj); // 1</pre><div class="contentsignin">ログイン後にコピー</div></div>call と

を使用してこのポイントを明示的に指定できますが、バインディングが失われるという問題は依然として残ります。これは、いわゆる ハード バインディング (バインド関数) によって解決できるため、ここでは詳しく説明しません。 4. new最後に紹介したいのは、

を使用してこれのバインディングを変更することです。新しいものを手動で実装した子供にとっては、より明確になるはずです。 . js では new は他の言語の new とはまったく異なります。

空のオブジェクトの作成

1. 関数の実行結果または現在の空のオブジェクトを返します

2. function Foo(a) {
       this.a = a;
   }
   
   var bar = new Foo(2);
   bar.a; // 2

   ログイン後にコピー
new を使用して関数を呼び出す場合、新しいオブジェクトを構築し、関数呼び出しでこれにバインドします。
3. 優先度

最後に、優先度の関係について簡単に説明します: 新しい > 表示バインディング > 暗黙的バインディング > デフォルト バインディング。

推奨学習: 「

JavaScript 基本チュートリアル

」