なぜ私はこの“”についてのブログを決めた

私は、ファンの大ファンですSyntax.fm ポッドキャストWes Bos and Scott Tolinski , そして、WESが本当にJavaScriptのまわりでサイトを構築する必要がある開発者のポイントに何かを言ったエピソードを聞くのを覚えていますthis 私たちの開発者は、多くの場合、多くの場合、多くの場合、さまざまなコンテキストで使用しようとすると取得します.
もちろん、すでに話題についての多額のドキュメンテーションがあります.また、私はそれのうちのどれかを照らすつもりはありません.むしろ、私のサイトと一緒のこのブログシリーズusethis.dev うまくいけば、開発者がコンテンツについて自分自身をクイズする機会を提供するだけでなく、集中的な記事やドキュメントを達成することができます.
それで、それ以上の導入なしで、始めましょう!

私たちがこのシリーズで学んでいるもの

JavaScriptの基本を学びますthis 様々な文脈でのキーワード、BIND、ウィンドウオブジェクト、ブロック、関数スコープの使用、および通常の関数と矢印関数の違い、および順番に、それらがthis キーワード)

このポストで学ぶことは何でしょうか

今日、我々は世界を議論するwindow オブジェクト、ブロック、関数スコープ、JavaScriptデータ型、および一般的な理解this は与えられた環境で出力される.

これは動作中

簡単な概要として、ここでは、トピックの簡潔な声明ですthis MDN Webドキュメントから:

In most cases, the value of this is determined by how a function is called (runtime binding).

-- MDN

それは欺瞞的に単純かもしれないが、this キーワードはJavaScriptの他のキーワードのようではありません.それは、それが呼ばれるところで完全に決定されます.たとえば、下のコードでは、我々は使用しているthis 関数ではなく、単に裸のHTMLスクリプトタグ内に.

<script>
  console.log(this) // Window { window: Window, self: Window, document, name: "..."} etc.
</script>

また、任意のブラウザで開発ツールを開くことによって、同じ結果を得ることができますthis 以下のようにChromeで示します.

以下の出力の背後にある推論は、他のオブジェクト(後のこの重要な用語を覚えている)がカプセル化されていないことですthis その環境を想定するキーワード.ウィンドウオブジェクトのみがカプセル化されますthis キーワード.
さらに説明するには、他の2つの例を見てみましょう.

例

// Example 1
const wrapperFunction = function () {
  console.log(this)
}

// Example 2
const wrapperObjectWithFunction = {
  key: function () {
    console.log(this)
  },
}

これらは何を出力すると思いますか?答えを表示するには、スクロールダウンする前に、ください.
何
Are
The
回答
行く
To
ビー
こちら?

結果

// Example 1
const wrapperFunction = function () {
  console.log(this) // Window { window: Window, self: Window, document, name: "..."} etc.
}

// Example 2
const wrapperObject = {
  log: function () {
    console.log(this) // {log: ƒ}
  },
}

私たちの最初の例では、何が記録されていることを再度驚かれるかもしれないwindow オブジェクト.さて、なぜですか?
JavaScript変数に式を含めることができます.シンプルで無意味な表現は

const sum = 1 + 1 // 2

多くのプログラマーが持っている比喩の一般的な誤解は、値を保持しているボックスとして変数を考えることです(すなわち、値2を保持しているサム).
代わりに、変数はポインタとして機能します.変数はプリミティブのどちらかを指します(すなわち、文字列、数値、boolean、bigint、symbol、undefined、null、null )、関数、オブジェクト.(もし1万フィートのビューを得るのではなく、このトピックで深く行きたいならば、あなたは間違いなくコースをチェックするべきですJust JavaScript )
したがって、我々が記録しているときthis 関数の中では、関数を割り当てられた変数を実際にロギングしていません.変数が式の評価であるので、それは少しのoxymoronであるでしょう.簡単に言えば、関数は本当に特定のタスクを実行するための式のグループです.したがって、我々はそれを得ることを意味するwindow 変数がグローバルスコープ内で定義されているため、最初の例で対象となります.
変数について、プリミティブ、関数、オブジェクトのどちらかのポインターであることを忘れないでください.よく、同じ属性はオブジェクトキーを表します.番目の例ではlog keyは、console.log メソッド.唯一の違いは、オブジェクトがthis . この例では、関数はObjectWrapper変数が指すオブジェクト内で定義されているログキーによって示されています.その結果、関数はグローバルウィンドウオブジェクトにバインドされませんが、代わりにそれが定義されているオブジェクトに局所的に結び付けられます{log: f}次の記事では、さらにその違いを見ていきますthis キーワードは、矢印の機能だけでなく、ブロックのスコープは、さまざまな変数を持っています.