麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

深入解讀JavaScript中的Hoisting機制

2019-11-20 11:50:34
字體:
來源:轉載
供稿:網友

hoisting機制

javascript的變量聲明具有hoisting機制,JavaScript引擎在執行的時候,會把所有變量的聲明都提升到當前作用域的最前面。

先看一段代碼

var v = "hello";(function(){ console.log(v); var v = "world";})();

這段代碼運行的結果是什么呢?
答案是:undefined
這段代碼說明了兩個問題,
第一,function作用域里的變量v遮蓋了上層作用域變量v。代碼做少些變動

var v = "hello";if(true){ console.log(v); var v = "world";}  

輸出結果為”hello”,說明javascript是沒有塊級作用域的。函數是JavaScript中唯一擁有自身作用域的結構。

第二,在function作用域內,變量v的聲明被提升了。所以最初的代碼相當于:

var v = "hello";(function(){ var v; //declaration hoisting console.log(v); v = "world";})();  

聲明、定義與初始化

聲明宣稱一個名字的存在,定義則為這個名字分配存儲空間,而初始化則是為名字分配的存儲空間賦初值。
用C++來表述這三個概念

extern int i;//這是聲明,表明名字i在某處已經存在了
int i;//這是聲明并定義名字i,為i分配存儲空間
i = 0;//這是初始化名字i,為其賦初值為0
javascript中則是這樣

var v;//聲明變量v
v = "hello";//(定義并)初始化變量v
因為javascript為動態語言,其變量并沒有固定的類型,其存儲空間大小會隨初始化與賦值而變化,所以其變量的“定義”就不像傳統的靜態語言一樣了,其定義顯得無關緊要。

聲明提升

當前作用域內的聲明都會提升到作用域的最前面,包括變量和函數的聲明

(function(){ var a = "1"; var f = function(){}; var b = "2"; var c = "3";})();  

 
變量a,f,b,c的聲明會被提升到函數作用域的最前面,類似如下:

(function(){ var a,f,b,c; a = "1"; f = function(){}; b = "2"; c = "3";})();

請注意函數表達式并沒有被提升,這也是函數表達式與函數聲明的區別。進一步看二者的區別:

(function(){ //var f1,function f2(){}; //hoisting,被隱式提升的聲明 f1(); //ReferenceError: f1 is not defined f2(); var f1 = function(){}; function f2(){}})();  

上面代碼中函數聲明f2被提升,所以在前面調用f2是沒問題的。雖然變量f1也被提升,但f1提升后的值為undefined,其真正的初始值是在執行到函數表達式處被賦予的。所以只有聲明是被提升的。

名字解析順序

javascript中一個名字(name)以四種方式進入作用域(scope),其優先級順序如下:
1、語言內置:所有的作用域中都有 this 和 arguments 關鍵字
2、形式參數:函數的參數在函數作用域中都是有效的
3、函數聲明:形如function foo() {}
4、變量聲明:形如var bar;

名字聲明的優先級如上所示,也就是說如果一個變量的名字與函數的名字相同,那么函數的名字會覆蓋變量的名字,無論其在代碼中的順序如何。但名字的初始化卻是按其在代碼中書寫的順序進行的,不受以上優先級的影響。看代碼:

(function(){  var foo;  console.log(typeof foo); //function  function foo(){}  foo = "foo";  console.log(typeof foo); //string})();  

如果形式參數中有多個同名變量,那么最后一個同名參數會覆蓋其他同名參數,即使最后一個同名參數并沒有定義。

以上的名字解析優先級存在例外,比如可以覆蓋語言內置的名字arguments。

命名函數表達式

可以像函數聲明一樣為函數表達式指定一個名字,但這并不會使函數表達式成為函數聲明。命名函數表達式的名字不會進入名字空間,也不會被提升。

f();//TypeError: f is not a function
foo();//ReferenceError: foo is not defined
var f = function foo(){console.log(typeof foo);};
f();//function
foo();//ReferenceError: foo is not defined
命名函數表達式的名字只在該函數的作用域內部有效。

再來看看下面例子:

var myval = "my global var";(function() { console.log(myval); // log "my global var"})();

以上代碼很顯然會輸出 "my global var",但是如果我們把以上代碼按如下方式稍加修改:

var myval = "my global var";(function() { console.log(myval); // log "undefined" var myval = "my local var";})();

執行結果是輸出了一個 undefined,出現這個結果的原因就是變量的聲明被提升了,以上代碼等同如下:

var myval = "my global var";(function() { var myval; console.log(myval); // log "undefined" myval = "my local var";})();

被提升的僅僅是變量的聲明部分,并沒有立即初始化,所以會輸出 undefined。

然而這種提升機制,不僅僅表現于在普通的變量,同時也表現在函數上。例如下面這段代碼并不能被正確執行:

(function() { fun(); // Uncaught TypeError: undefined is not a function var fun = function() { console.log("Hello!"); }})();

因為它等價于:

(function() { var fun; fun(); // Uncaught TypeError: undefined is not a function fun = function() { console.log("Hello!"); }})();

因為函數的聲明同樣被提升而沒有立即初始化,所以會出錯。

當然,這種定義函數的方式稱之為“函數表達式”,會有提升機制,如果是如下的這種“函數聲明”方式,則完全沒有提升機制方面的問題:

(function() { fun(); function fun() { console.log("Hello!"); // log "Hello!" }})();

這也是函數聲明與函數表達式的主要區別。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 国产精品一品二区三区四区18 | av不卡免费观看 | 欧美日韩大片在线观看 | 天天碰天天操 | 羞羞的视频免费观看 | 国产精品午夜未成人免费观看 | 日本娇小videos高潮 | 91av在线免费播放 | 欧美成人性生活片 | 免费三级大片 | 美国黄色小视频 | 国产激情精品一区二区三区 | 久久91久久久久麻豆精品 | 国产91九色 | 精品国产99久久久久久宅男i | 黄色av.com| 亚洲日本欧美 | 成人一级黄色大片 | 黄色网址免费在线 | 九九热精品在线视频 | 欧美成人小视频 | 一级在线免费观看视频 | 一级做a爰片性色毛片2021 | 草草在线视频 | 人人舔人人射 | 国产欧美亚洲精品a | www.射| 可以看逼的视频 | 依依成人精品视频 | 午夜视频亚洲 | 国产中文av在线 | 久久免费看毛片 | 久久国产亚洲精品 | 久久人人做 | 蜜桃视频最新网址 | 深夜免费福利视频 | free korean xxxxhd | 久久精品中文字幕 | 蜜桃成品人免费视频 | xxx18hd18hd日本| 久久成人午夜视频 |