美文网首页
函数作用域提升以及函数表达式指定命名

函数作用域提升以及函数表达式指定命名

作者: li4065 | 来源:发表于2018-05-08 22:39 被阅读9次
// 思考下面代码运行结果
print(); // 输出print
function print () {
   console.log('print');
}
...
print(); // 无输出
var print = function () {
    console.log('print');
}
...
print(); // 报错print is not defined
let print = function () {
    console.log('print');
}
  • 第一段代码可以运行并打印出结果是因为js解析时会把函数提升解析,所以虽然我们是在函数定义之前发生的调用,但一样可以调用成功

  • 第二段无输出,是因为按函数表达式声明,一样存在提升的问题,但这时浏览器提升的变量,所以这时会先定义print为undefined

  • 第三段原因是因为我们使用了let,let不存在变量提升,所以调用报错

一般情况下我们都是使用let去定义各种变量,但是为了兼容性,我们会使用babel对代码进行转码,转码后神奇的事情就出现了

'use strict';

print();
var print = function print() {
    console.log('print');
};

这时的代码就会变成和第二段代码一样,可以运行了,这个例子不是很正常的例子,因为错误明显,但在浏览器完全支持es6之前,我们还是要注意考虑变量提升的问题,虽然你用了let,但编译器还是会把它转为var,另外再思考下,为什么babel在对一个匿名函数表达式进行转换时,会加一个函数名呢?

// 匿名函数表达式
var add = function (a, b) {
    return a + b;
}
...
// 指定函数名的表达式
var add = function my_add (a, b) {
    return a + b;
}

我感觉这个地方是主要是为了方便调试,比如我们在控制台输入add

// 匿名函数表达式的控制台输出
ƒ (a, b) {
    return a + b;
}
...
// 指定函数名的表达式
ƒ my_add(a, b) {
    return a + b;
}

在现在这个简单函数我们当然可以一眼就看明白这些函数干什么的,但是如果函数很复杂呢,你还能直接明白这个函数是做什么?所以给函数加上一个描述的名词会方便你的调试,我猜测这也是为啥babel进行转换时会加上函数名的原因,这点在github上的一个讨论也验证了这个问题

相关文章

  • 函数作用域提升以及函数表达式指定命名

    第一段代码可以运行并打印出结果是因为js解析时会把函数提升解析,所以虽然我们是在函数定义之前发生的调用,但一样可以...

  • 函数

    1. 创建函数的方式与区别 函数声明函数声明提升 函数表达式 Function构造器作用域为局部作用域 2. th...

  • 一道面试题引发的讨论

    本文的示例代码参考scope 目录 面试题 作用域变量提升 块作用域重新绑定 函数作用域立即执行函数表达式 挑战题...

  • 命名函数表达式总结

    命名函数表达式 提到命名函数表达式,理所当然,就是它得有名字,但有一点需要记住:这个名字只在新定义的函数作用域内有...

  • 函数表达式---作用域的问题

    函数表达式的作用域为在函数定义时的作用域,只要b函数存在,a函数的作用域永远不会消失。b函数的作用域链中永远带有a...

  • 作用域

    标识符的作用域有函数原型作用域、局部作用域(块作用域)、类作用域和 命名空间(namespace) 作用域 函数原...

  • 变量声明、声明提前和作用域

    一. 作用域 分为全局作用域和函数作用域 函数作用域简言之就是:变量在声明他们的函数体以及这个函数体嵌套的任意函数...

  • 2019-11-11-本周学习周报

    学习总览 JavaScript 函数作用域、块级作用域 变量提升、函数提升 CSS 新增属性transition ...

  • zj3 函数与作用域

    讲解函数声明、函数表达式、声明前置、作用域、作用域链相关概念 函数声明和函数表达式有什么区别 什么是变量的声明前置...

  • es6块级作用域定义声明函数

    允许在块级作用域内声明函数。函数声明类似于var,即会提升到全局作用域或函数作用域的头部。同时,函数声明还会提升到...

网友评论

      本文标题:函数作用域提升以及函数表达式指定命名

      本文链接:https://www.haomeiwen.com/subject/mmrgrftx.html