欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中變量提升和函數(shù)提升的詳解

 更新時(shí)間:2020年08月07日 15:47:11   作者:liuhe688  
這篇文章主要介紹了JavaScript中變量提升和函數(shù)提升的詳解,文章通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

第一篇文章中提到了變量的提升,所以今天就來介紹一下變量提升和函數(shù)提升。這個(gè)知識(shí)點(diǎn)可謂是老生常談了,不過其中有些細(xì)節(jié)方面博主很想借此機(jī)會(huì),好好總結(jié)一下。

今天主要介紹以下幾點(diǎn):

1. 變量提升

2. 函數(shù)提升

3. 為什么要進(jìn)行提升

4. 最佳實(shí)踐

那么,我們就開始進(jìn)入主題吧。

1. 變量提升

通常JS引擎會(huì)在正式執(zhí)行之前先進(jìn)行一次預(yù)編譯,在這個(gè)過程中,首先將變量聲明及函數(shù)聲明提升至當(dāng)前作用域的頂端,然后進(jìn)行接下來的處理。(注:當(dāng)前流行的JS引擎大都對源碼進(jìn)行了編譯,由于引擎的不同,編譯形式也會(huì)有所差異,我們這里說的預(yù)編譯和提升其實(shí)是抽象出來的、易于理解的概念)

下面的代碼中,我們在函數(shù)中聲明了一個(gè)變量,不過這個(gè)變量聲明是在if語句塊中:

function hoistVariable() {
  if (!foo) {
    var foo = 5;
  }
   console.log(foo); // 5
}hoistVariable();

運(yùn)行代碼,我們會(huì)發(fā)現(xiàn)foo的值是5,初學(xué)者可能對此不甚理解,如果外層作用域也存在一個(gè)foo變量,就更加困惑了,該不會(huì)是打印外層作用域中的foo變量吧?答案是:不會(huì),如果當(dāng)前作用域中存在此變量聲明,無論它在什么地方聲明,引用此變量時(shí)就會(huì)在當(dāng)前作用域中查找,不會(huì)去外層作用域了。

那么至于說打印結(jié)果,這要提到預(yù)編譯機(jī)制了,經(jīng)過一次預(yù)編譯之后,上面的代碼邏輯如下:

// 預(yù)編譯之后
function hoistVariable() {
  var foo;

  if (!foo) {
    foo = 5;
  }
  console.log(foo); // 5
}
hoistVariable();

是的,引擎將變量聲明提升到了函數(shù)頂部,初始值為undefined,自然,if語句塊就會(huì)被執(zhí)行,foo變量賦值為5,下面的打印也就是預(yù)期的結(jié)果了。

類似的,還有下面一個(gè)例子:

var foo = 3;

function hoistVariable() {
  var foo = foo || 5;

  console.log(foo); // 5
}

hoistVariable();

foo || 5這個(gè)表達(dá)式的結(jié)果是5而不是3,雖然外層作用域有個(gè)foo變量,但函數(shù)內(nèi)是不會(huì)去引用的,因?yàn)轭A(yù)編譯之后的代碼邏輯是這樣的:

var foo = 3;

// 預(yù)編譯之后
function hoistVariable() {
  var foo;

  foo = foo || 5;

  console.log(foo); // 5
}

hoistVariable();

如果當(dāng)前作用域中聲明了多個(gè)同名變量,那么根據(jù)我們的推斷,它們的同一個(gè)標(biāo)識(shí)符會(huì)被提升至作用域頂部,其他部分按順序執(zhí)行,比如下面的代碼:

function hoistVariable() {
  var foo = 3;
   {
    var foo = 5;
  }
   console.log(foo); // 5
}
 hoistVariable();

由于JavaScript沒有塊作用域,只有全局作用域和函數(shù)作用域,所以預(yù)編譯之后的代碼邏輯為:

// 預(yù)編譯之后
function hoistVariable() {
  var foo;

  foo = 3;
  
  {
    foo = 5;
  }

  console.log(foo); // 5
}

hoistVariable();

2. 函數(shù)提升

相信大家對下面這段代碼都不陌生,實(shí)際開發(fā)當(dāng)中也很常見:

function hoistFunction() {
  foo(); // output: I am hoisted

  function foo() {
    console.log('I am hoisted');
  }
}

hoistFunction();

為什么函數(shù)可以在聲明之前就可以調(diào)用,并且跟變量聲明不同的是,它還能得到正確的結(jié)果,其實(shí)引擎是把函數(shù)聲明整個(gè)地提升到了當(dāng)前作用域的頂部,預(yù)編譯之后的代碼邏輯如下:

// 預(yù)編譯之后
function hoistFunction() {
  function foo() {
    console.log('I am hoisted');
  }

  foo(); // output: I am hoisted
}

hoistFunction();

相似的,如果在同一個(gè)作用域中存在多個(gè)同名函數(shù)聲明,后面出現(xiàn)的將會(huì)覆蓋前面的函數(shù)聲明:

function hoistFunction() {
  function foo() {
    console.log(1);
  }

  foo(); // output: 2

  function foo() {
    console.log(2);
  }
}

hoistFunction();

對于函數(shù),除了使用上面的函數(shù)聲明,更多時(shí)候,我們會(huì)使用函數(shù)表達(dá)式,下面是函數(shù)聲明和函數(shù)表達(dá)式的對比:

// 函數(shù)聲明
function foo() {
  console.log('function declaration');
}

// 匿名函數(shù)表達(dá)式
var foo = function() {
  console.log('anonymous function expression');
};

// 具名函數(shù)表達(dá)式
var foo = function bar() {
  console.log('named function expression');
};

可以看到,匿名函數(shù)表達(dá)式,其實(shí)是將一個(gè)不帶名字的函數(shù)聲明賦值給了一個(gè)變量,而具名函數(shù)表達(dá)式,則是帶名字的函數(shù)賦值給一個(gè)變量,需要注意到是,這個(gè)函數(shù)名只能在此函數(shù)內(nèi)部使用。我們也看到了,其實(shí)函數(shù)表達(dá)式可以通過變量訪問,所以也存在變量提升同樣的效果。

那么當(dāng)函數(shù)聲明遇到函數(shù)表達(dá)式時(shí),會(huì)有什么樣的結(jié)果呢,先看下面這段代碼:

function hoistFunction() {
  foo(); // 2

  var foo = function() {
    console.log(1);
  };

  foo(); // 1

  function foo() {
    console.log(2);
  }

  foo(); // 1
}

hoistFunction();

運(yùn)行后我們會(huì)發(fā)現(xiàn),輸出的結(jié)果依次是2 1 1,為什么會(huì)有這樣的結(jié)果呢?

因?yàn)镴avaScript中的函數(shù)是一等公民,函數(shù)聲明的優(yōu)先級(jí)最高,會(huì)被提升至當(dāng)前作用域最頂端,所以第一次調(diào)用時(shí)實(shí)際執(zhí)行了下面定義的函數(shù)聲明,然后第二次調(diào)用時(shí),由于前面的函數(shù)表達(dá)式與之前的函數(shù)聲明同名,故將其覆蓋,以后的調(diào)用也將會(huì)打印同樣的結(jié)果。上面的過程經(jīng)過預(yù)編譯之后,代碼邏輯如下:

// 預(yù)編譯之后
function hoistFunction() {
  var foo;

  foo = function foo() {
    console.log(2);
  }

  foo(); // 2

  foo = function() {
    console.log(1);
  };

  foo(); // 1

  foo(); // 1
}

hoistFunction();

我們也不難理解,下面的函數(shù)和變量重名時(shí),會(huì)如何執(zhí)行:

var foo = 3;

function hoistFunction() {
  console.log(foo); // function foo() {}

  foo = 5;
  
  console.log(foo); // 5

  function foo() {}
}

hoistFunction();
console.log(foo);   // 3

我們可以看到,函數(shù)聲明被提升至作用域最頂端,然后被賦值為5,而外層的變量并沒有被覆蓋,經(jīng)過預(yù)編譯之后,上面代碼的邏輯是這樣的:

// 預(yù)編譯之后

var foo = 3;

function hoistFunction() {
  var foo;
  foo = function foo() {};
  console.log(foo); // function foo() {} 
  foo = 5;
  console.log(foo); // 5
}

hoistFunction();
console.log(foo);  // 3

所以,函數(shù)的優(yōu)先權(quán)是最高的,它永遠(yuǎn)被提升至作用域最頂部,然后才是函數(shù)表達(dá)式和變量按順序執(zhí)行,這一點(diǎn)要牢記。

3. 為什么要進(jìn)行提升

關(guān)于為什么進(jìn)行變量提升和函數(shù)提升,這個(gè)問題一直沒有明確的答案,不過最近讀到Dmitry Soshnikov之前的一篇文章時(shí),多少了解了一些,下面是Dmitry Soshnikov早些年的twitter,他也對這個(gè)問題十分感興趣:

然后Jeremy Ashkenas想讓Brendan Eich聊聊這個(gè)話題:

最后,Brendan Eich給出了答案:

大致的意思就是:由于第一代JS虛擬機(jī)中的抽象紕漏導(dǎo)致的,編譯器將變量放到了棧槽內(nèi)并編入索引,然后在(當(dāng)前作用域的)入口處將變量名綁定到了棧槽內(nèi)的變量。(注:這里提到的抽象是計(jì)算機(jī)術(shù)語,是對內(nèi)部發(fā)生的更加復(fù)雜的事情的一種簡化。)

然后,Dmitry Soshnikov又提到了函數(shù)提升,他提到了相互遞歸(就是A函數(shù)內(nèi)會(huì)調(diào)用到B函數(shù),而B函數(shù)也會(huì)調(diào)用到A函數(shù)):

隨后Brendan Eich很熱心的又給出了答案:

Brendan Eich很確定的說,函數(shù)提升就是為了解決相互遞歸的問題,大體上可以解決像ML語言這樣自下而上的順序問題。

這里簡單闡述一下相互遞歸,下面兩個(gè)函數(shù)分別在自己的函數(shù)體內(nèi)調(diào)用了對方:

// 驗(yàn)證偶數(shù)
function isEven(n) {
  if (n === 0) {
    return true;
  }
  return isOdd(n - 1);
}

console.log(isEven(2)); // true

// 驗(yàn)證奇數(shù)
function isOdd(n) {
  if (n === 0) {
    return false;
  }
  return isEven(n - 1);
}

如果沒有函數(shù)提升,而是按照自下而上的順序,當(dāng)isEven函數(shù)被調(diào)用時(shí),isOdd函數(shù)還未聲明,所以當(dāng)isEven內(nèi)部無法調(diào)用isOdd函數(shù)。所以Brendan Eich設(shè)計(jì)了函數(shù)提升這一形式,將函數(shù)提升至當(dāng)前作用域的頂部:

// 驗(yàn)證偶數(shù)
function isEven(n) {
  if (n === 0) {
    return true;
  }
  return isOdd(n - 1);
}

// 驗(yàn)證奇數(shù)
function isOdd(n) {
  if (n === 0) {
    return false;
  }
  return isEven(n - 1);
}

console.log(isEven(2)); // true

這樣一來,問題就迎刃而解了。

最后,Brendan Eich還對變量提升和函數(shù)提升做了總結(jié):

大概是說,變量提升是人為實(shí)現(xiàn)的問題,而函數(shù)提升在當(dāng)初設(shè)計(jì)時(shí)是有目的的。

至此,關(guān)于變量提升和函數(shù)提升,相信大家已經(jīng)明白其中的真相了。

4. 最佳實(shí)踐

理解變量提升和函數(shù)提升可以使我們更了解這門語言,更好地駕馭它,但是在開發(fā)中,我們不應(yīng)該使用這些技巧,而是要規(guī)范我們的代碼,做到可讀性和可維護(hù)性。

具體的做法是:無論變量還是函數(shù),都必須先聲明后使用。下面舉了簡單的例子:

var name = 'Scott';
var sayHello = function(guest) {
  console.log(name, 'says hello to', guest);
};

var i;
var guest;
var guests = ['John', 'Tom', 'Jack'];

for (i = 0; i < guests.length; i++) {
  guest = guests[i];
  
  // do something on guest

  sayHello(guest);
}

如果對于新的項(xiàng)目,可以使用let替換var,會(huì)變得更可靠,可維護(hù)性更高:

復(fù)制代碼 代碼如下:
let name = 'Scott';let sayHello = function(guest) { console.log(name, 'says hello to', guest);};let guests = ['John', 'Tom', 'Jack'];for (let i = 0; i < guests.length; i++) { let guest = guests[i]; // do something on guest sayHello(guest);}

值得一提的是,ES6中的class聲明也存在提升,不過它和let、const一樣,被約束和限制了,其規(guī)定,如果再聲明位置之前引用,則是不合法的,會(huì)拋出一個(gè)異常。

所以,無論是早期的代碼,還是ES6中的代碼,我們都需要遵循一點(diǎn),先聲明,后使用。

本文完。

參考資料:

http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

http://dmitrysoshnikov.com/notes/note-4-two-words-about-hoisting/

https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

http://stackoverflow.com/questions/7506844/javascript-function-scoping-and-hoisting

到此這篇關(guān)于JavaScript中變量提升和函數(shù)提升的詳解的文章就介紹到這了,更多相關(guān)JavaScript 變量提升和函數(shù)提升內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論