javascript 變量提升（Hoisting）

TwIStOy 發布于2019-08-26 13:35 / 1545人閱讀

摘要：簡介變量提升意味著變量和函數的聲明會在物理層面移動到代碼的最前面，但這么說并不準確。實際上變量和函數聲明在代碼里的位置是不會動的，而是在編譯階段被放入內存中。

簡介

“變量提升”意味著變量和函數的聲明會在物理層面移動到代碼的最前面，但這么說并不準確。  
實際上變量和函數聲明在代碼里的位置是不會動的，而是在編譯階段被放入內存中。

聲明變量的方法

var、let、const
不用以上關鍵字直接賦值的變量會掛載與windows環境下;

let a=9
const a=1
var a=6
c=5

聲明函數的方法

javascript中聲明函數的方法有兩種:函數聲明式和函數表達式。

//函數聲明
function say(){
    console.log("hello") 
}

//函數表達式
var say=function (){
    console.log("hello") 
}

提升的好處

JavaScript 在執行任何代碼段之前，將函數聲明放入內存中的優點之一是，這允許你可以在在聲明該函數之前使用一個函數。

/*** 正確的方式：先聲明函數，再調用函數 (最佳實踐)*/
function catName(name) {
    console.log("我的貓名叫 " + name);
}
catName("Tigger");
/*以上代碼的執行結果是: "我的貓名叫 Tigger"*/


/*** 不推薦的方式：先調用函數，再聲明函數 */
catName("Chloe");
function catName(name) {
    console.log("我的貓名叫 " + name);
}
/*代碼執行的結果是: "我的貓名叫 Chloe"*/

提升規則

var 聲明的變量，提升時只聲明，不賦值，默認為undefined；不用關鍵字直接賦值的變量不存在提升(demo1)

函數提升會連帶函數體一起提升,不執行；(deom2)

預解析的順序是從上到下；(demo4)

函數的優先級高于變量，函數聲明提前到當前作用域最頂端；(deom3)

變量重名，提升時不會重復定義；在執行階段后面賦值的會覆蓋上面的賦值；(demo4)

函數重名，提升時后面的會覆蓋前面；(demo5)

函數和變量重名，提升函數，不會重復定義，變量不會覆蓋函數；在執行階段后面賦值的會覆蓋上面的賦值;(demo8)

用函數表達式聲明函數，會按照聲明變量規則進行提升；(deom6)

函數執行時，函數內部的變量聲明和函數聲明也按照以上規則進行提升;(deom7)

let、const不存在提升;(demo9、demo10)

/**demo1**/
console.log("a=",a) //a=undefined
console.log("b=",b) // Uncaught ReferenceError: b is not defined
var a=1
b=6


/**deom2**/
console.log("a=",a)  // a=function  a() {console.log("func a()")}
function  a() {
console.log("func a()")
}

/**deom3**/
console.log("a=",a) // a=function  a() {console.log("fun a")}
var a=3
var a=4

function a(){
console.log("fun a")
}
var a=5
var a=6
console.log("a=",a) // a=6



/**deom4**/
console.log("a=",a)  // a=undefined
var a =2
console.log("a=",a) //
var a =3
var a =4
console.log("a=",a) // a=4
console.log("b=",b) //b= undefined
var b="b1"


/**deom5**/
console.log("a=",a) // a=function  a() {console.log("a2")}
function a(){
console.log("a1")
}
function a(){
console.log("a2")
}
console.log("a=",a) // a=function  a() {console.log("a2")}


/**deom6**/
console.log("a=",a) // a=undefined
var a=function(){console.log("a1")}
var a=3
var a=4
var a=5
console.log(a)
var a=function(){console.log("a2")}
console.log("a=",a) // a= ? (){console.log("a2")}


/**deom7**/
console.log("b=",b)
var a=3
function b(i){
    console.log("a=",a)
    var a=4
    function a(){
        console.log("fun a")
    }
    console.log("a=",a)
}
b()


/**demo8**/
console.log("a=",a) //a= function a(){ console.log("fun a")}
var a=2
function a(){
    console.log("fun a")
}
console.log("a=",a) // a=2
var a=3
var a=4
var a=5
console.log("a=",a) // a=5


/**demo9**/
console.log("a=",a) //Uncaught ReferenceError: a is not defined
let a=4


/****/

console.log("b=",b) // Uncaught ReferenceError: b is not defined
const b=5

參考資料

MDN

GPU云服務器云服務器 js變量聲明提升 javascript提升 Hoisting javascript變量

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109125.html

理解 JavaScript（二）

摘要：所以形式參數是本地的，不是外部的或者全局的。這叫做函數聲明，函數聲明會連通命名和函數體一起被提升至作用域頂部。這叫做函數表達式，函數表達式只有命名會被提升，定義的函數體則不會。 Scoping & Hoisting var a = 1; function foo() { if (!a) { var a = 2; } alert(a); }; ...

luxixing 2019-08-19 14:24 評論0 收藏0
(深究)聲明提前(Hoisting)

摘要：有意思的是，這意味著變量在聲明之前甚至已經可用。的這個特性被非正式地稱為聲明提前，即函數里聲明的所有變量但不涉及賦值都被提前至函數體的頂部。但實際上會將其看成兩個聲明和。第二個賦值聲明會被留在原地等待執行階段。簡介 JavaScript的函數作用域是指在函數內聲明的所有變量在函數體內始終是可見的。有意思的是，這意味著變量在聲明之前甚至已經可用。JavaScript的這個特性被非正式地...

陳偉 2019-08-22 18:18 評論0 收藏0
[翻譯] JavaScript Scoping and Hoisting

摘要：對于新手來說是最令人困惑的部分之一。函數聲明通過的形式。很明顯的，語言自身定義和函數形參已經處于作用域頂端。這就意味著，函數聲明比變量聲明具有更高的優先級。但是這卻不意味著對這個名稱的賦值無效，僅僅是聲明的部分會被忽略而已。原文鏈接：JavaScript Scoping and Hoisting 你知道下面的JavaScript代碼執行后會alert出什么值嗎？ var foo = ...

FingerLiu 2019-08-19 17:27 評論0 收藏0
JavaScript 變量聲明提升

摘要：輸出的結果為輸出的結果為提升后輸出的結果為重新定義了變量輸出的結果為如果定義了相同的函數變量聲明，后定義的聲明會覆蓋掉先前的聲明，看如下代碼輸出練習的值是多少的值是多少第二題的解析請看這里參考資料文章文章中文版鏈接文章推薦文章變量提升 JavaScript 變量聲明提升原文鏈接一個小例子先來看個例子： console.log(a); // undefined var a =...

fireflow 2019-08-20 10:39 評論0 收藏0
JS基礎篇--函數聲明與定義，作用域，函數聲明與表達式的區別

摘要：在中，有四種方式可以讓命名進入到作用域中按優先級語言定義的命名比如或者，它們在所有作用域內都有效且優先級最高，所以在任何地方你都不能把變量命名為之類的，這樣是沒有意義的形式參數函數定義時聲明的形式參數會作為變量被至該函數的作用域內。 Scoping & Hoisting 例： var a = 1; function foo() { if (!a) { var ...

TerryCai 2019-08-21 10:41 評論0 收藏0
JavaScript中的變量提升(Hoisting)

譯者按： let和var對于變量提升的影響不同。原文: What is Hoisting

Mr_houzi 2019-08-26 11:54 評論0 收藏0