變數提升與函數提升

變數提升

var聲明的變數會提升到函數或全局作用域頂部

簡單例子

// 全局作用域變數提升例子
console.log(b)  // undefined
var b = 4

// 提升之後是這樣
var b;
console.log(b) // 所以 b 沒有值
b = 4

// 函數作用域中變數提升
var b = 5
function test() {
    console.log(b)  // undefined
    var b = 4
}

// 變數提升之後 
var b = 5
function test() {
    var b
    console.log(b)  // 所以這裡變數b 沒有賦值 undefined
    b = 4
}

函數提升

函數寫法:函數表達式、函數聲明、Function構造函數（這種不推薦）.其中函數表達式不會函數提升，函數聲明會函數提升。

// 在這例子中 var b 聲明的變數會提升,匿名函數不會.
var b = function() {
    //...
}
// 提升之後
var b ;
b = function(){}

我們都知道程式在執行時是從上往下執行的,而這裡test()在定義之前就調用了為什麼不報錯?

// 在編譯階段所有的函數聲明都會被提升到頂部.所以這裡可以在定義之前使用函數
test()
function test() {
    console.log('ss')
}
// 提升之後
function test() {
    console.log('ss')
}
test()

實例一

num 值為多少?

var foo = function(x, y) {
    return x - y;
};
function foo(x, y) {
    return x + y;
}
var num = foo(1, 2);  // -1

根據函數提升原理可得提升之後

// 函數提升之後代碼
function foo(x, y) {
    return x + y;
}
var foo = function(x, y) {  // 在這裡 foo 函數被重寫了
    return x - y;
};
var num = foo(1, 2);  // -1

實例二

y和z的最終結果為: ?

var m = 1,
    j = (k = 0);
function add(n) {
    return (n = n + 1);
}
y = add(m);
function add(n) {
    return (n = n + 3);
}
z = add(m);

這例子也是一樣的函數提升,只要把提升之後的代碼貼出來就能知道結果了

// 函數提升之後 如下:
function add(n) {
    return (n = n + 1);
}
function add(n) { // js中沒有函數重載,這隻是覆蓋了上面定義的add函數
    return (n = n + 3); // 相加完之後賦值給n 然後返回n
}
var m = 1,
    j = (k = 0);  // k 是一個非定義變數,在嚴格模式下是錯誤的.
y = add(m);  // 4
z = add(m);  // 4

實例三

控制台列印結果是什麼?

var b = 5;
(function test(b) {
    console.log(b);
    var b = 10;
})(b);
console.log(b);

這裡涉及了變數提升和參數與函數內部變數重覆聲明2個知識點

// 變數提升之後
var b = 5;
(function test(b) {
    var b; // 這裡是無效的,參數名與內部變數聲明重覆的情況下,重覆聲明是無效的.
    console.log(b); // 5
    b = 10;
})(b);   // 參數傳遞
console.log(b); // 5

實例四

這題為實例三變種類型,主要考察引用類型

var b = {
    x: 5
};
(function test(b) {
    console.log(b.x); // 5
    var b = { x: 10 };
    console.log(b.x) // 10
})(b);
console.log(b.x);  // 5

引用類型傳遞的是指針,指針指向了變數存儲地址.這例子里,2個b變數都指向了同一個地址,所以第一次輸出5,然後下麵修改了函數內部變數b的指向,它指向了一個新的存儲地址,這裡輸出的是10.全局變數b的指向並沒有變,所以這裡輸出的依然是5

個人博客地址 : https://www.zhuamimi.cn
文章地址 : https://www.zhuamimi.cn/archives/201