循路觅宗师,形影不相离,师知吾亦知,吾乃成宗师。

BIBLE模型

发掘积累过程的快感

首页»BIBLE模型 Perfect»前端设计»Javascript»“hoisting”(声明提前)论述

JavaScript的函数作用域是指在函数内声明的所有变量在函数体内是始终可见的;有意思的是这意味着变量在声明之前甚至就可以使用,JavaScript的这个特性被非正式的称为“声明提前(hoisting)”。先看下面这段代码:

var demo=1;

!function () {
    console.log(demo);  //  undefined
    if(typeof demo ==="undefined"){
        var demo=2;
        
    }
    console.log(demo);  //  2
}()

要清楚这一段代码这样执行的结果,首先要非常熟悉JavaScript的hoisting。

Javascript Hoisting:In javascript, every variable declaration is hoisted to the top of its declaration context.

在Javascript语言中,变量的声明(注意不包含变量赋值)会被提升(置顶)到声明所在作用域的最顶端。在上面的哪个例子当中,自运行函数外面声明的那个demo相当于一个全局变量,函数体内部有一个var demo=2,虽然还没执行到这一步,但是JavaScript在编译的时候会将函数体内部的demo提升至当前作用域的最顶部初始化(不赋值),局部变量优先级高于全局变量。因此第一个是undefined,然后执行到条件中,给demo赋值2,因此第二个的结果是2。上面的例子等同于这样:

var demo=1;

!function () {
    var demo;
    console.log(demo);  //  undefined
    if(typeof demo ==="undefined"){
        demo=2;

    }
    console.log(demo);  //  2
}()

我们在编写JavaScript脚本的时候应当注意一个习惯,在当前作用域的最顶端声明需要的变量,后面直接赋值。

JavaScript的"hoisting"不仅仅有变量,针对函数也是有类似的效果,来看看JavaScript的函数提升部分先。

Javascript Function有两种类型:

函数声明(Function Declaration);
// 函数声明
function demo(n){
    return n;
}
函数表达式(Function Expression)
// 函数表达式
var demo2=function (m) {
    return m
}

上面的代码看起来很类似,感觉也没什么太大差别。但实际上,Javascript函数上的一个“陷阱”就体现在Javascript两种类型的函数定义上。

console.log(demo(2));   //  2
function demo(n) {
    return n;
}

console.log(demo2(3))   // Uncaught TypeError: demo2 is not a function
var demo2=function (m) {
    return m
}
用函数声明创建的函数demo可以在demo定义之前就进行调用;而用函数表达式创建的demo1函数不能在demo1被赋值之前进行调用。

为什么差距这么大呢,用函数声明创建的函数可以在函数解析后调用(解析时进行等逻辑处理)。而用函数表达式创建的函数是在运行时进行赋值,且要等到表达式赋值完成后才能调用。

不过函数的提升,并不能超过{}的作用域,请看下面的示例:

var demo;

console.log(typeof demo1)   // undefined
console.log(typeof demo);   //undefined

if(true){
    function demo1() {
        console.log("demo1");
    }

    demo = function() {
        console.log("demo2");
    }
}
console.log(typeof demo1)   //  function
console.log(typeof demo);   //function
demo1();    //  demo1
demo(); //demo2

关于hoisting的介绍就先到这里,在写JavaScript脚本时,养成良好的代码习惯,会有意想不到的收获。

猜你喜欢
互联网信息太多太杂,各互联网公司不断推送娱乐花边新闻,SNS,微博不断转移我们的注意力。但是,我们的时间和精力却是有限的。这里是互联网浩瀚的海洋中的一座宁静与美丽的小岛,供开发者歇息与静心潜心修炼。 “Bible”是圣经,有权威的书,我们的本意就是为开发者提供真正有用的的资料。 我的电子邮件1217179982@qq.com,您在开发过程中遇到任何问题,欢迎与我联系。
Copyright © 2017. All rights reserved. 本站由 Helay 纯手工打造