var的变量提升和函数提升

什么是提升(Hosting)?
引擎会在解释JavaScript代码之前首先对齐进行编译,编译过程中的一部分工作就是找到所有的声明,并用合适的作用域将他们关联起来,这也正是词法作用域的核心内容。
简单说就是在js代码执行前引擎会先进行预编译,预编译期间会将变量声明与函数声明提升至其对应作用域的最顶端。举例来说:
var变量提升

console.log(a);
var a = 3;

预编译后的代码结构可以看做如下:

var a; // 将变量a的声明提升至最顶端,赋值逻辑不提升。
console.log(a); // undefined
a = 3; // 代码执行到原位置即执行原赋值逻辑

函数提升

console.log(foo1); // [Function: foo1]
foo1(); // foo1
console.log(foo2); // undefined
foo2(); // TypeError: foo2 is not a function
function foo1 () {
    console.log("foo1");
};
var foo2 = function () {
    console.log("foo2");
};

即函数提升只会提升函数声明,而不会提升函数表达式。
再举一个小例子:

var a = 1;
function foo() {
    a = 10;
    console.log(a);//10
    return;
    function a() {};
}
foo();
console.log(a);//1

上面的代码块经过预编译后可以看做如下形式(只分析foo方法内部情况):

var a = 1; // 定义一个全局变量 a
function foo() { // 首先提升函数声明function a () {}到函数作用域顶端, 然后function a () {}等同于 var a =  function() {};最终形式如下
    var a = function () {}; // 定义局部变量 a 并赋值。
    a = 10; // 修改局部变量 a 的值,并不会影响全局变量 a
    console.log(a); // 打印局部变量 a 的值:10
    return;
}
foo();
console.log(a); // 打印全局变量 a 的值:1

函数提升与变量提升的优先级

console.log(a);    // f a() {console.log(10)}
console.log(a());    //  undefined
var a = 3;
function a() {
  console.log(10) //10
}
console.log(a)   //3
a = 6;
console.log(a());  //a is not a function;

上面的代码块经过预编译后可以看做如下形式:

var a = funtion () {
  console.log(10)
}
var a;
console.log(a);    // f a() {console.log(10)}
console.log(a());  //  undefined
a = 3;
console.log(a)   //3
a = 6;
console.log(a());   //a() is not a function;

由此可见函数提升要比变量提升的优先级要高一些,且不会被变量声明覆盖,但是会被变量赋值之后覆盖。

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值