• JS 会有变量提升和函数提升


           JavaScript变量函数声明提升(Hoisting)是在 Javascript 中执行上下文工作方式的一种认识(也可以说是一种预编译),从字面意义上看,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,在代码里的位置是不会动的,而是在编译阶段被放入内存中会和代码顺序不一样。变量函数声明提升虽然对于实际编码影响不大,特别是现在ES6的普及,但作为前端算是一个基础知识,必须掌握的,是很多大厂的前端面试必问的知识点之一。在这里分享,不是什么新鲜的内容,只是作为一个自己的学习笔记,加速对其的理解。

    变量知道是ES5中的 var 和 function 中的产物,ES6中的 let 、 const 则不存在有变量提升。

    变量提升

    JavaScript引擎的工作方式是先解析代码,获取所有声明的变量和函数,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(Hoisting)。

    这里说的变量声明,包括函数的声明,接下来看看代码:

    function hoistingVariable() {
    if (!devpoint) {
    var devpoint = 1;
    }
    console.log(devpoint);
    }
    hoistingVariable();
    // 下面是输出结果
    // 1

    变量所处的作用域为函数体内,解析的时候查找该作用域中的声明的变量,devpoint在if虽然未声明,根据变量提升规则,变量的声明提升到函数的第一行,但未赋值。实际的效果等同于下面的代码:

    function hoistingVariable() {
    var devpoint;
    if (!devpoint) {
    devpoint = 1;
    }
    console.log(devpoint);
    }
    hoistingVariable();

    接下再增加一些迷惑的代码,如下:

    var devpoint = "out";
    function hoistingVariable() {
    var devpoint;
    if (!devpoint) {
    devpoint = "in";
    }
    console.log(devpoint);
    }
    hoistingVariable();
    console.log(devpoint);
    // 下面是输出结果
    // in
    // out

    对于同名变量声明,个人理解是先找作用域,就近原则,函数体内声明(前提是有声明 var ),就只找函数内查找,并不受函数外声明的影响。

    把上面函数体内的声明语句去掉,输出情况也就不一样。

    var devpoint = "out";
    function hoistingVariable() {
    if (!devpoint) {
    devpoint = "in";
    }
    console.log(devpoint);
    }
    hoistingVariable();
    console.log(devpoint);
    // 下面是输出结果
    // out
    // out

    函数体内声明语句去掉后,这是就需要去函数体外找声明,根据这一条,函数外声明并赋值了,函数体内的 if 语句就不会执行。

    下面代码调整了赋值的顺序,代码如下:

    var devpoint;
    function hoistingVariable() {
    if (!devpoint) {
    devpoint = "in";
    }
    console.log(devpoint);
    }
    devpoint = "out";
    hoistingVariable();
    console.log(devpoint);
    // 下面是输出结果
    // out
    // out

    根据上面说的,函数体内的变量是外部声明的,但未赋值,函数是提升了,并为执行。在函数执行前赋值给devpoint,再执行就变成了out

    函数提升

    上面介绍过,变量提升,同样包括函数的声明,不同方式的函数声明,执行也有所不同。这种问题就是直接上代码。

    function hoistingFun() {
    hello();
    function hello() {
    console.log("hello");
    }
    }
    hoistingFun();
    // 下面是输出结果
    // hello

    上面的代码能够正常运行是因为函数声明被提升,函数 hello 被提升到顶部,运行效果跟下面代码一致:

    function hoistingFun() {
    function hello() {
    console.log("hello");
    }
    hello();
    }
    hoistingFun();
    // 下面是输出结果
    // hello

    如果在同一个作用域中对同一个函数进行声明,后面的函数会覆盖前面的函数声明。

    function hoistingFun() {
    hello();
    function hello() {
    console.log("hello");
    }
    function hello() {
    console.log("hello2");
    }
    }
    hoistingFun();
    // 下面是输出结果
    // hello2

    两个函数声明都被提升了,按照声明的顺序,后面的声明覆盖前面的声明。

    函数声明常见的方式有两种,还有一种是匿名函数表达式声明方式,这种方式可以视为是变量的声明来处理,当作用域中有函数声明和变量声明时,函数声明的优先级最高,将上面的代码更改后,结果就不一样了,如下:

    function hoistingFun() {
    hello();
    function hello() {
    console.log("hello");
    }
    var hello = function () {
    console.log("hello2");
    };
    }
    hoistingFun();
    // 下面是输出结果
    // hello

    上面的代码,编译逻辑如下:

    function hoistingFun() {
    function hello() {
    console.log("hello");
    }
    hello();
    hello = function () {
    console.log("hello2");
    };
    }
    hoistingFun();
    // 下面是输出结果
    // hello

    接下来再来看下,外部使用变量声明,函数体内使用函数声明的示例:

    var hello = 520;
    function hoistingFun() {
    console.log(hello);
    hello = 521;
    console.log(hello);
    function hello() {
    console.log("hello");
    }
    }
    hoistingFun();
    console.log(hello);
    // 下面是输出结果
    // [Function: hello]
    // 521
    // 520

    上面说过,在函数体内声明过的变量或者函数,只作用于函数体内,受限于函数体内,不受外部声明的影响,相当于函数体内作用域与外部隔离。上面代码的编译后的逻辑如下:

    var hello = 520;
    function hoistingFun() {
    function hello() {
    console.log("hello");
    }
    console.log(hello);
    hello = 521;
    console.log(hello);
    }
    hoistingFun();
    console.log(hello);
    在变量声明中,函数的优先权最高,永远提升到作用域最顶部,然后才是函数表达式和变量的执行顺序。

    来看下面的代码:

    var hello = 520;
    function hello() {
    console.log("hello");
    }
    console.log(hello);
    // 下面是输出结果
    // 520

    根据函数声明优先级最高的原则,上面代码的执行逻辑如下:

    function hello() {
    console.log("hello");
    }
    hello = 520;
    console.log(hello);

    为什么要提升?

    至于为什么要提升,这里不做详细介绍,提供一些参考文章,有兴趣的可以去查阅

    最佳实践

    现代JavaScript中,已经有很多方式避免变量提升带来的问题,使用letconst替代var,使用eslint等工具避免变量重复定义,在一些前端开发团队中,可以针对团队做一些规范化的脚手架,如项目初始化强制项目的目录、eslint的最佳配置等,用程序规范的过程比人督促要靠谱。

    下面的代码可以看到const 和 var 声明的变量的区别,const 声明的变量不会提升,具体的区别可以查阅《细说javascript中变量声明var、let、const的区别

    console.log("1a", myTitle1);
    if (1) {
    console.log("1b", myTitle1);
    var myTitle1 = "devpoint";
    }
    if (1) { // 这里的代码是有错误无法执行
    console.log("3c", myTitle2);
    const myTitle2 = "devpoint";
    }
    // 下面是输出结果
    // 1a undefined
    // 1b undefined

    总结

    通过自我学习变量函数提升,加深了对其理解,对于前端面试所涉及的类似问题可以自信的给出答案,算是一种收获。

  • 相关阅读:
    Linux安装Redis
    MySQL——Centos7下环境安装
    MSQL系列(六) Mysql实战-SQL语句优化
    Java多线程秘籍,掌握这5种方法,让你的代码优化升级
    trie树(前缀树)
    总结了一份Java架构师核心知识点PDF丨粉丝福利
    【Python爬虫】爬取淘宝商品数据——新手教程
    SSM+医保业财一体化管理系统 毕业设计-附源码151023
    跳跃游戏 I - VII
    04 随机梯度下降
  • 原文地址:https://www.cnblogs.com/houxianzhou/p/16423137.html