NodeJSとブラウザにおけるこのキーワードの違い

NodeJSとブラウザにおけるこのキーワードの違い

序文

JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問題を認識しているはずです。次のコードを見てください

varタイプ = 1
関数toWhere(){
	タイプ = 2;
}
どこにあるのか();
console.log(タイプ)

あなたはきっとこう思うでしょう:

ここでグローバル変数の型が宣言されます。type=1 が実行されると、値に 1 が割り当てられます。その後、toWhere 関数が呼び出されます。関数内で this を見ると、this がどこを指しているかがわかります。ここでは、this が wi​​ndow を指していることは明らかです。this.type=2 が実行されると、グローバル変数 type に値 2 が割り当てられます。

最後に、グローバル変数の型が出力され、結果は明らかに 2 になります。

ブラウザを開いて確認すると、そこには明らかに 2 が表示されます。

これで終わりですか?

Node を学習し、上記のコードを nodejs で再実行すると、違いがわかります。

1 が間違っていることに気が付きました。2 と同じではないでしょうか?

関連するデバッグ

上記の例から、同じ js コードをブラウザと nodejs で実行すると結果が異なることがわかります。

これは実はこの指摘の問題によるものですが、この指摘は私たちが通常知っているものとは異なります。このポインティング問題はノードの動作原理によって引き起こされます

varタイプ = 1
関数toWhere() {
 このタイプ = 2
 console.log("関数内の this が指している", this)
}
どこへ()
console.log(タイプ)
console.log("グローバルにこれ", this)

1.ブラウザでこれを印刷する

関数内のthisはwindowを指し、グローバルなthisもwindowを指しています。

2. これをNode.jsで印刷する

見つかりました。関数内のこれは、Object [global] を指します。

関数の this に値を割り当てると、その値は実際にはグローバル オブジェクトにアタッチされます。だから、世界的にこの価値は変わらないだろう

ノード原理分析

では、なぜこのようなことが起こるのか見てみましょう。

まず、Node.jsがどのように動作するかを理解する必要があります

ブラウザによってグローバルスコープで直接実行されるスクリプトファイル

Node では、すぐに呼び出される匿名関数内にコードが隠されます。global を使用してグローバル スコープにアクセスできます。

前回の説明で、外部に出力された this は空のオブジェクト {} を指していることがわかりました。実際、ノードで実行されるファイルは {} でラップされているため、スクリプトファイルは次のように独自のクロージャで実行されます。

{
	(関数(){
		//スクリプトファイル })()
}

前の例では、関数の外側では this は空のオブジェクト {} を参照し、関数の内側では this には指定された実行コンテキストがないため、グローバル オブジェクト - (匿名関数の実行コンテキストのグローバル スコープにアクセスできる) を参照します。

要約する

NodeJS とブラウザの this キーワードの違いについての記事はこれで終わりです。NodeJS とブラウザの this キーワードについての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Node.js を使用してコマンドライン ゲームを実装する方法
  • Nodejs は、複数の人が同時にオンラインでマウスを動かして小さなゲームを共有することを実現します。
  • Node.js を使用したマルチプレイヤー ゲーム サーバー エンジンの実装
  • Node.js リアルタイム マルチプレイヤー ゲーム フレームワーク
  • node.js はゲームのバックエンド開発に適していますか?
  • Nodejs でタイムドクローラーを実装する完全な例
  • Node.js の TCP 接続処理のコア プロセス
  • ゲームの Node.JS バージョンを作成する方法

<<:  MySQL データベースは SQL ステートメントを知っている必要があります (拡張バージョン)

>>:  Tencent Cloud で HTTPS を無料で導入する方法

推薦する

MySQL でスロークエリログ機能を有効にする方法

MySQL スロー クエリ ログは、問題のあるクエリを追跡するのに非常に役立ちます。現在のプログラム...

ウェブサイトデザインの経験 ウェブサイト構築におけるよくある間違いのまとめ

注意: 計画、設計、開発のいずれの場合でも、これらの間違いは避けなければなりません。 1. ナビゲー...

JS ベースの Ajax 同時リクエスト制御を実装する方法

目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...

JS で CSS 変数を使用する方法

JS で CSS 変数を使用する方法:export キーワードを使用して、js オブジェクトを le...

React NativeプロジェクトでLottieアニメーションを使用する方法

Lottie は、Airbnb が開発した iOS、Android、React Native 向けの...

HttpsページでBaiduシェアを使用するためのソリューション

サイト全体で https アクセスを有効にしてから、共有コードが利用できなくなり、有効になっていた小...

美容・スタイリングウェブサイト向けのカラーマッチングテクニックと効果表示

色はあらゆるウェブサイトにとって最も重要な要素の 1 つであり、閲覧者に大きな影響を与えるため、色の...

通知メッセージカルーセルを実装するための CSS3 トランジション

Vueバージョンをファイルにコピーして使用します <テンプレート> <!-- カル...

JavaScript フレームワーク デザイン パターンの詳細な説明

目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...

CSS のマージンの崩壊問題を解決する方法

まず、マージン崩壊が発生する 3 つの状況を見てみましょう。 1. 隣接する 2 つのブロックレベル...

HTML テーブルレイアウト例の説明

HTML ドキュメント内の要素は次々に配置され、ブロックレベル要素の前後に改行が追加されるだけで、合...

ウェブデザイン経験

<br />著者はかつてWebデザインの初心者でしたが、継続的な探求と実践を通じて、今で...

MySQLがbinlogファイルを手動で登録し、マスタースレーブ異常を引き起こす理由

1. 問題の原因友人の @水米田 から、POSITION に基づくマスタースレーブについて質問があり...

js でオブジェクトとオブジェクト メソッドを作成するいくつかの方法の詳細な説明

この記事は、JS レッドブックの第 8 章に記載されているオブジェクトに関する 2 番目の記事です。...

HTML で div+CSS を使用してシンプルな矢印アイコンを実装するコード

ウェブデザインでは、ウェブページを美しく見せるために矢印を装飾としてよく使用します。現在、多くのウェ...