ホームページ ウェブフロントエンド jsチュートリアル JavaScriptの基礎知識まとめ (8) コンパイル前実行処理

JavaScriptの基礎知識まとめ (8) コンパイル前実行処理

Mar 10, 2018 pm 01:31 PM
javascript js コンパイル

今回は JavaScript の基礎知識まとめをお届けします。 基礎的な JavaScript の知識まとめ (8) 実践的なケースを見てみましょう。

JS 実行三部作

ステップ 1: 構文分析

パート 2: プリコンパイル

パート 3: 解釈と実行

プリコンパイル

構文分析は意味分析とも呼ばれ、構文分析は記事全体ですたとえば、実行のプロセス。これらのコードは実行されると、1 行ずつ解釈されて実行されます。ただし、システムは実行の最初のステップでコードをスキャンします。 は、低レベルの構文エラーです。たとえば、括弧や漢字などが少ない場合、テキスト全体をスキャンしますが、この全文スキャン プロセスは、スキャン後の構文解析と呼ばれます。全文だとプリコンパイルして一行解釈してから実行します 一行、つまり説明と実行

プリコンパイル前置き

imply global 暗示全局变量: 即任何变量,如果变量未经声明就赋值,自变量就位全局对象所有
eg : a = 123;
eg : var a = b = 123;
ログイン後にコピー

宣言されたグローバル変数は全て

ウィンドウのプロパティ

  eg:var a = 123;===> window.a = 123;
//例子:
   function test (){        console.log("a");
   }  
   test();//成功打印出a,
   box();//写在方法之前也成功打印出a,为什么能执行就是有预编译的过程
   function box (){        console.log("a");
   }    
   var a =123;    console.log(a);//输出123
   console.log(a);//输出undefined,不报错;
    var a = 123;    
    //但是如果直接打印会报错;
    console.log(b)//报错
    //也是预编译的效果
    
    //如果想偷懒记住两句话
    //函数声明整体提升
    //变量 声明提升
ログイン後にコピー

改善点を説明します。関数宣言の説明: 関数宣言を記述する場合、どこに記述しても、システムは常にこの関数をロジックの先頭に持ってくるため、どこで呼び出しても、上または下で呼び出されても、基本的にはこれは関数の下で呼び出され、常に関数の宣言をプロモートします。ロジックの先頭に移動します

変数宣言は、たとえば

var a = 123;//実際には 2 つの部分です。 of var a;//最初に変数を宣言します

a = 123;//変数に値を代入します

それでシステムは改善されます変数の代わりに変数が値と一緒に発生するので、例では a が出力されますout unknown;

これら 2 つの文は全能ではないことに注意してください

たとえば、

function a(a){    var a = 123;    var a = function(){        
    }
    a();
}var a = 123;
ログイン後にコピー

これはこれら 2 つの文では解決できません

上記を説明する前に、まず impiy global とは何かを理解する必要があります

imply globa: 暗黙グローバル変数: つまり、宣言されずに変数に値が割り当てられた場合、独立変数がすべてのグローバル オブジェクトの代わりになります

例: a = 123;

例: var a = b = 123;

a = 10; console.log(a); // 10 を出力し、window 属性に 10 を指定します。 var b = 20; // Window にはグローバル ドメインもあります


公式にプリコンパイルされています

AOオブジェクトを作成します

仮パラメータと変数宣言を探し、変数名と仮パラメータ名をAO属性名として使用します、値は未定義です

実パラメータ値と仮パラメータを変更します

関数本体内の関数宣言を探して、関数本体に値を代入します

function fn (a){    console.log(a);    
    var a = 123;    console.log(a);    
    function a (){};    console.log(a);    
    var b = function (){        
    }    console.log(b);        
}
fn(1);
ログイン後にコピー

この例では、パラメータ、変数、関数名をすべてaと呼びます まず、上書き現象が起こるのは確実です。これは、関数のプリコンパイルが関数の実行直前に実行されると言われていることと非常に矛盾しています

まず、プリコンパイル

。最初のステップ: AO オブジェクトを作成します。フルネームは です。 Activation オブジェクトはスコープであり、実行コンテキストとも呼ばれます

AO{    
}
ログイン後にコピー

ステップ 2: 仮パラメータと変数宣言を見つけ、変数名と仮パラメータ名を AO 属性名として使用します。値は未定義です

AO{    a : undefined
    b : undefined
}
ログイン後にコピー

ステップ3: 実パラメータの値を変更します仮パラメータで統一します

AO{    a : 1;    b : undefined
}
ログイン後にコピー

ステップ4: 関数本体内の関数宣言を見つけて、関数本体に値を代入します

AO{    a : 1,    b : undefined,    //b是是函数表达式,不是函数声明,所以不变
    //然后有a了 有b了,然后将这个函数声明的名作为AO对象挂起来
    d : 
}//然后值赋予函数体,也就是把a和b的属性值,变成函数体//覆盖掉a 和b的的属性值//也就变成下面的//因为第四步的优先级最高AO{    a : function a () {}
    b : undefined,    //b是是函数表达式,不是函数声明,所以不变
    d : function d () {}
}
ログイン後にコピー

この時点で、プリコンパイルプロセスが終了し、コードの実行を開始し、関数を実行します

次に、上記の例を見ていきます

//预编译结果AO{    a : function a () {}
    b : undefined,    d : function d () {}
}//开始执行代码function fn (a){    //第一步开始打印a
    //根据上面预编译的结果,
    //所以打印结果是function a () {}
    console.log(a);    
    //第二步执行 var a = 123;
    //因为在预编译的第二步里面,变量已经提升了
    //所以第二步只执行的赋值
    //a = 123;去AO对象里面去找a
    //也就变成
    //AO{
        //a : 123   这个才是a的存储值
        //b : undefined,
        //d : function d () {}
    //}
    var a = 123;    //所以打印出123
    console.log(a);    //因为这句在话在预编译的时候系统已经看了
    //所以不在看这句话
    function a (){};    //所以下面的console.log(a)
    //还是打印123;
    console.log(a);    //一样下面的var b这句话在预编译的时候已经看了,所以不在看
    //AO{
        //a : 123   
        //所以b的值变成function(){}
        //b : function(){}
        //d : function d () {}
    //}
    var b = function (){
        
    }    //所以打印出function(){}
    console.log(b);
        
}
ログイン後にコピー

fn(1);


例を見ていきます

function test(a , b){    console.log(a);
    c = 0;    var c;
    a = 3;
    b = 2;    console.log(b);    function b () {}    console.log(b);
}//这下我们就很快的得出打印的东西//a-->1//b-->2//b-->2
ログイン後にコピー

プリコンパイルは行われません関数本体でのみ発生しますが、グローバル コンテキストでも発生します

グローバル コンテキストの最初のステップは、最初に GO グローバル オブジェクトを生成することです。他は同じです

GO === window

次に問題は、 GO が先か、AO が先か

答えは、GO を先に実行することです

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 !

関連書籍:

JavaScriptの基礎知識のまとめ(6) 関数、初期スコープ(前編)


JavaScriptの基礎知識のまとめ(6) 関数、初期スコープ(後編)


JavaScriptの基礎知識まとめ(7)再帰

以上がJavaScriptの基礎知識まとめ (8) コンパイル前実行処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます 株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます Dec 17, 2023 pm 06:55 PM

株式分析に必須のツール: PHP および JS でローソク足チャートを描画する手順を学びます。特定のコード例が必要です。インターネットとテクノロジーの急速な発展に伴い、株式取引は多くの投資家にとって重要な方法の 1 つになりました。株価分析は投資家の意思決定の重要な部分であり、ローソク足チャートはテクニカル分析で広く使用されています。 PHP と JS を使用してローソク足チャートを描画する方法を学ぶと、投資家がより適切な意思決定を行うのに役立つ、より直感的な情報が得られます。ローソク足チャートとは、株価をローソク足の形で表示するテクニカルチャートです。株価を示しています

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

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

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する 株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した

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

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

jsとvueの関係 jsとvueの関係 Mar 11, 2024 pm 05:21 PM

js と vue の関係: 1. Web 開発の基礎としての JS、2. フロントエンド フレームワークとしての Vue.js の台頭、3. JS と Vue の補完関係、4. JS と Vue の実用化ビュー。

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

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

Apache PHP のコンパイルとインストールの詳細な手順 Apache PHP のコンパイルとインストールの詳細な手順 Mar 08, 2024 pm 01:15 PM

Apache と PHP は Web サイト開発で一般的に使用される 2 つのツールであり、これらをコンパイルしてインストールすることで、より柔軟な設定と管理が可能になります。以下では、Apache と PHP のコンパイルとインストール手順を、具体的なコード例も含めて詳しく紹介します。ステップ 1: Apache および PHP ソース コード パッケージをダウンロードする. まず、Apache および PHP ソース コード パッケージの最新バージョンをダウンロードする必要があります。 Apache 公式 Web サイト (https://httpd.apache.org) および PHP 公式 Web サイト (https:

See all articles