ホームページ ウェブフロントエンド jsチュートリアル JavaScript の var の事前解析と関数宣言の改善_javascript スキルを学ぶためにフォローしてください

JavaScript の var の事前解析と関数宣言の改善_javascript スキルを学ぶためにフォローしてください

May 16, 2016 pm 03:32 PM
javascript

1. var 変数のプリコンパイル

JavaScript の構文は C、Java、および C# に似ており、総称して C 類似構文と呼ばれます。 C または Java プログラミングの経験がある学生は、「最初に宣言し、後で使用する」というルールに精通している必要があります。宣言されていない変数や関数を使用すると、コンパイル段階でエラーが報告されます。ただし、JavaScript では変数や関数を宣言する前でも使用できます。以下でその謎を詳しく見ていきましょう。

まずコードの一部を見てみましょう:

(function() {
 console.log(noSuchVariable);//ReferenceError: noSuchVariable is not defined
})();
ログイン後にコピー

上記のコードを実行すると、すぐにエラーが報告されます。ただし、noSuchVariable 変数がまったく定義されていないため、これはまさに予想どおりです。次のコードを見てみましょう:

(function() {
 console.log(declaredLater); //undefined
 var declaredLater = "Now it's defined!";
 console.log(declaredLater);// "Now it's defined!"
})();

ログイン後にコピー

まず、上記のコードは正しいので問題ありません。しかし、なぜエラーが報告されないのでしょうか? declaredLater 変数は呼び出しステートメントの後に定義されていますか?出力が未定義なのはなぜですか?

これは実際には JavaScript パーサーによって発生します。パーサーは、現在のスコープで宣言されたすべての変数と関数をスコープの先頭に配置します。ただし、変数の宣言のみがスコープの先頭に進みます。そのまま残されています。上記のコードは実際にはパーサーからは次のように見えます:

(function() {
 var declaredLater; //声明被提前到作用域开始处了!
 console.log(declaredLater); // undefined
 declaredLater = "Now it's defined!"; //赋值操作还在原地!
 console.log(declaredLater);//"Now it's defined!"
})();
ログイン後にコピー

これが、上記のコードが例外を報告しない理由です。変数と関数が「高度」になった後、JavaScript 構文の定義に従って、declaredLater 変数は実際には宣言されたが割り当てられていない変数に自動的に割り当てられます。そのため、最初の出力は実行されます。 declaredLater 変数の値は未定義です。後で、declaredLater 変数に値を割り当てたので、変数を 2 回目に出力すると、「定義されました」と出力されます。

別の例を見てみましょう:

var name = "Baggins";
(function () {
 console.log("Original name was " + name);// "Original name was undefined"
 var name = "Underhill";
 console.log("New name is " + name);// "New name is Underhill"
})();
ログイン後にコピー

上記のコードでは、最初に変数名を宣言しています。本来の目的は、name 変数を初めて出力するときにグローバル スコープで定義された name 変数を出力し、次に関数内でローカルな name 変数を定義することです。グローバル変数をカバーし、最後にローカル変数の値を出力します。ただし、最初の出力結果は期待と完全に一致しません。その理由は、定義したローカル変数がそのスコープ内で「高度」であるためです。つまり、次の形式になります。

var name = "Baggins";
(function () {
 var name; //注意:name 变量被提前了!
 console.log("Original name was " + name);// "Original name was undefined"
 name = "Underhill";
 console.log("New name is " + name);//"New name is Underhill"
})();
ログイン後にコピー
JavaScript にはこのような「癖」があるため、常に注意を払うように変数宣言をスコープの先頭に配置することをお勧めします。

2. 関数宣言は「高度」です

先ほどは変数について話しましたが、次は関数について話しましょう。

関数が「高度な」状況には 2 つの状況があります。1 つは関数の宣言で、もう 1 つは関数が値として変数に代入されている状況、つまり関数式です。

まず最初の状況、コードについて話しましょう:

isItHoisted();//"Yes!"
function isItHoisted() { 
 console.log("Yes!");
}
ログイン後にコピー
上に示したように、JavaScript インタプリタでは関数宣言の前にそれを使用することができます。つまり、関数宣言は関数名だけでなく、関数定義全体も「高度」です。したがって、上記のコードは正しく実行できます。

2 番目のケース、関数式の形式を見てみましょう。コードから始めましょう:

definitionHoisted();// "Definition hoisted!"
definitionNotHoisted();// TypeError: undefined is not a function
function definitionHoisted() { 
 console.log("Definition hoisted!");
}
var definitionNotHoisted = function () { 
 console.log("Definition not hoisted!");
};
ログイン後にコピー
definitionHoisted 関数は最初のタイプに準拠して適切に実行されましたが、その割り当て (つまり関数) は高度ではありませんでした。つまり、これは先ほど説明した変数の「advancement」と完全に一致しており、「advancement」変数のデフォルト値が未定義であるため、報告されるエラーは「型の不一致」に属します。未定義は関数ではないためです。もちろん呼び出すことはできません。

概要
上記の説明をまとめると、次のようになります。

変数の宣言はスコープの先頭に進み、代入はそのまま残ります

関数宣言全体が「高度」です
関数式を使用する場合、変数のみが「高度」になり、関数は「高度」になりません

3. var の副作用

暗黙的なグローバル変数と明示的に定義されたグローバル変数の小さな違いは、削除演算子を使用して変数を未定義のままにできることです。

var を通じて作成されたグローバル変数 (関数の外のプログラムで作成されたもの) は削除できません。

var を使用せずに作成された暗黙的なグローバル変数は (関数内で作成されたかどうかに関係なく) 削除できます。
これは、技術的には、暗黙的なグローバル変数は実際にはグローバル変数ではなく、グローバル オブジェクトのプロパティであることを示しています。属性は delete 演算子を使用して削除できますが、変数は削除できません:

// 定义三个全局变量
var global_var = 1;
global_novar = 2;  // 反面教材
(function () {
 global_fromfunc = 3; // 反面教材
}());

// 试图删除
delete global_var;  // false
delete global_novar; // true
delete global_fromfunc; // true

// 测试该删除
typeof global_var;  // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"

ログイン後にコピー

在ES5严格模式下,未声明的变量(如在前面的代码片段中的两个反面教材)工作时会抛出一个错误。

4、单var形式声明变量

在函数顶部使用单var语句是比较有用的一种形式,其好处在于:

提供了一个单一的地方去寻找功能所需要的所有局部变量
防止变量在定义之前使用的逻辑错误
少代码(类型啊传值啊单线完成)
单var形式长得就像下面这个样子:

function func() {
 var a = 1,
  b = 2,
  sum = a + b,
  myobject = {},
  i,
  j;
 // function body...
}
ログイン後にコピー

您可以使用一个var语句声明多个变量,并以逗号分隔。像这种初始化变量同时初始化值的做法是很好的。这样子可以防止逻辑错误(所有未初始化但声明的变量的初始值是undefined)和增加代码的可读性。在你看到代码后,你可以根据初始化的值知道这些变量大致的用途。

以上就是针对javascript的var预解析与函数声明提升的学习内容,希望对大家的学习有所帮助。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

JavaScript で HTTP ステータス コードを簡単に取得する方法 JavaScript で HTTP ステータス コードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

JavaScriptでinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

See all articles