• 你不知道的JS系列 ( 9 ) - 函数表达式


    在任意代码片段外部添加包装函数,可以将内部的变量和函数定义“隐藏”起来,外部作用域无法访问包装函数内部的任何内容。
    var a = 2;
    function foo() {
      var a = 3;
      console.log(a); // 3
    }
    foo();
    console.log(a); // 2

    虽然这种技术可以解决一些问题,但是会导致一些额外的问题。

    1、foo 这个名称本身污染了所在作用域(在这个例子中是全局作用域)
    2、必须显式地通过函数名调用才能运行
    为了解决额外的问题,如果函数名不需要(或者至少函数名可以不污染所在作用域),并且能够自动运行,将会更加理想
    var a = 2;
    (function foo(){
      var a = 3;
      console.log(a);
    })()
    console.log(a);

    比较一下两段代码,第一段 foo 被绑定在全局作用域中,通过 foo 来调用它。第二段 foo 被绑定在函数表达式自身的函数中,而不是所在的作用域。foo 变量名被隐藏在自身中不会污染外部作用域

    如果 function 是声明中的第一个词,那么就是一个函数声明,否则就是一个函数表达式
     
    函数表达式最熟悉的场景可能就是回调参数了,比如

    setTimeout(function(){
      console.log('i wait 1 second')
    }, 1000)
    这叫匿名函数表达式,函数表达式可以是匿名的,而函数声明则不可以省略函数名

    很多库和工具也倾向鼓励使用这种风格的代码。但是它有几个缺点
    1、匿名函数在栈追踪时不会显示有意义的函数名,使得调试很困难
    2、一个函数需要引用自身的例子,在事件触发后事件监听器需要解绑自身,这时候做不了
    3、匿名函数省略了代码可读性,一个描述性的名称可以让代码不言自明

    行内函数表达式非常强大且有用-匿名和具名之间并不会对这点有任何影响,防止上述缺点,给出一个最佳实践
    setTimeout(function timeoutHandler(){
      console.log('i wait 1 second')
    }, 1000)
  • 相关阅读:
    1363:小球(drop)
    ifstream ofstream c++中读写文件
    线性筛
    Network of Schools POJ
    Beautiful numbers CodeForces
    ipone6界面设计标准
    目前的前端框架有哪些
    什么是react native
    nth-child() 选择器
    html{height:100%}的意义以及body背景色的解析推断
  • 原文地址:https://www.cnblogs.com/wzndkj/p/12329912.html
Copyright © 2020-2023  润新知