变量提升与函数提升

变量提升

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