js hoisting -- 提升 学习笔记

Posted 2020-07-26 茗小铭

昨天碰到小伙伴在问js函数提升的问题，虽然知道一点，但感觉自己说不清楚，于是搜了一下，找到一篇说的比较明白的翻译，参考地址如下：

http://www.cnblogs.com/betarabbit/archive/2012/01/28/2330446.html

 

1、理解js的作用域是函数级作用域。

大学学的C语言，块级作用域（block-level scope）早已印刻在我婶婶的脑海里，所以经常写出来这样的代码：

function setPrice(num){
    if( num >0 ){
        var price = num;
    }else{
        var price = -num;
    }
}

于是webstorem就给我的两个var标红了，那就改改呗，改成了这样：

function setPrice(num){
    var price;
    if( num >0 ){
        price = num;
    }else{
        price = -num;
    }
}

感觉自己好机智，然而这是怎么回事奈？

因为JavaScript是函数级作用域(function-level scope)。

也就是只有函数才会创建新的作用域，函数内的if,else块公用一个function的作用域。

 

2、说说“变量”提升

叫它们“变量”并不是很合适，目前没有想出来它们的名字，先暂时这样写吧。

在一个函数里可能出现的有下面这几种“变量”：

（1）语言自身定义(Language-defined): 所有的作用域默认都会包含this和arguments。

（2）函数形参(Formal parameters): 函数有名字的形参会进入到函数体的作用域中。

（3）函数声明(Function decalrations): 通过function的形式。

（4）变量声明(Variable declarations): 通过var的形式。(这里需要注意的是，ES6 出现了let这个专门针对块级区域的变量哟~)

 

以前师傅总让我把函数里的变量的声明写在函数的最上面，一直不明白为什么，也没有想到过，确实函数的声明也应该写在函数的最上面，那么这是为什么奈？

那时因为一个神奇的事情，名叫hoisting（提升），就是说，无论你是函数声明还是变量声明都会在js解释的时候被提升到他们作用域的最顶端。

 

setPrice: function(orginPrice,discount,coupon){
    var price;

    if(discount){
        price = calculateDiscount(orginPrice,discount);

    }else{
        price = calculateCoupon(orginPrice,discount);
    }

    function calculateDiscount(price,discount){
        return orginPrice * ( 1 - discount);
    }

    function calculateCoupon(price,coupon){
        return orginPrice - coupon;
    }

    this.down(\'#price\').setData(price);
}

 

这里的calculateDiscount，calculateCoupon的两个方法写在了执行语句的下边，但是并不会影响函数的执行，就是因为函数在解释时被提升的缘故。

 

需要注意的是声明的赋值部分并没有被提升。

也就是说

function aaa(){

    var a = 0 ;

}

这段函数被解释后是

function aaa(){

     var a ;

     a = 0;

}

 

恩~差不多久是这个样子啦~