少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景


发布者 ourjs  发布时间 1481605990996
关键字 JS学习  JavaScript 

在ES6大行其道的今天,不应用点ES6特性似乎有些政治不正确。最近刚好有个Node的项目,最低要支持到nodejs 4.0,在node.green看了下ES6的支持度,我想使用的特性基本都有支持,遂决定在新项目中采用ES6来写。

当然第一件事情就是毫不留情地消灭var,项目中能用const的地方不用let,能用let的地方不用var。

第二件事情就是使用劳动人民喜闻乐见的箭头函数替代function。当我心满意足地看到满屏的=>时,现实给了我一记响亮的耳光——改过之后的程序错误百出!

所以,当我们使用箭头函数时,一定要搞清楚箭头函数是什么回事,适用于什么场景。本文就针对以上问题来讨论下箭头函数。

箭头函数是什么?

箭头函数的语法我就不讲了,相信大家都见识过。跟我一样,大家喜欢箭头函数90%的原因是它好看。除了好看,它是不是与function等价呢?肯定不等价,因为TC39不可能仅因为好看而引入一个语法糖(class除外)。

箭头函数的渊源可以追溯到上古时期一个叫lambda演算的东西。lambda演算是数学家提出来的,有些数学家跟我们程序员一样也很懒,数学定理那么多,今天要证三角定律,明天要证勾股定律,累不累!那能不能将所有的证明问题用一个统一的体系进行形式化描述,然后由机器来完成自动推导呢?lambda演算就是干这个的,图灵也搞了一套体系叫图灵机,两者是等价的。

关于lambda演算说了这么多,好像跟今天要讲的箭头函数没什么关系?其实是有关系的,lambda演算深刻影响了箭头函数的设计。数学家们喜欢用纯函数式编程语言,纯函数的特点是没有副作用,给予特定的输入,总是产生确定的输出,甚至有些情况下通过输出能够反推输入。要实现纯函数,必须使函数的执行过程不依赖于任何外部状态,整个函数就像一个数学公式,给定一套输入参数,不管是在地球上还是火星上执行都是同一个结果。

箭头函数要实现类似纯函数的效果,必须剔除外部状态。所以当你定义一个箭头函数,在普通函数里常见的thisargumentscaller是统统没有的。

箭头函数没有this

箭头函数没有this,那下面的代码明显可以取到this啊:

function foo() {
  this.a = 1
  let b = () => console.log(this.a)

  b()
}

foo()  // 1

以上箭头函数中的this其实是父级作用域中的this,即函数foothis。箭头函数引用了父级的变量,构成了一个闭包。以上代码等价于:

function foo() {
  this.a = 1

  let self = this
  let b = () => console.log(self.a)

  b()
}

foo()  // 1

箭头函数不仅没有this,常用的arguments也没有。如果你能获取到arguments,那它一定是来自父作用域的。

function foo() {
  return () => console.log(arguments[0])
}

foo(1, 2)(3, 4)  // 1

上例中如果箭头函数有arguments,就应该输出的是3而不是1。

一个经常犯的错误是使用箭头函数定义对象的方法,如:

let a = {
  foo: 1,
  bar: () => console.log(this.foo)
}

a.bar()  //undefined

以上代码中,箭头函数中的this并不是指向a这个对象。对象a并不能构成一个作用域,所以再往上到达全局作用域,this就指向全局作用域。如果我们使用普通函数的定义方法,输出结果就符合预期,这是因为a.bar()函数执行时作用域绑定到了a对象。

let a = {
  foo: 1,
  bar: function() { console.log(this.foo) }
}

a.bar()  // 1

另一个错误是在原型上使用箭头函数,如:

function A() {
  this.foo = 1
}

A.prototype.bar = () => console.log(this.foo)

let a = new A()
a.bar()  //undefined

同样,箭头函数中的this不是指向A,而是根据变量查找规则回溯到了全局作用域。同样,使用普通函数就不存在问题。

通过以上说明,我们可以看出,箭头函数除了传入的参数之外,真的是什么都没有!如果你在箭头函数引用了thisarguments或者参数之外的变量,那它们一定不是箭头函数本身包含的,而是从父级作用域继承的。

什么情况下该使用箭头函数

到这里,我们可以发现箭头函数并不是万金油,稍不留神就会踩坑。

至于什么情况该使用箭头函数,《You Don’t Know JS》给出了一个决策图: arrow

以上决策图看起来有点复杂,我认为有三点比较重要:

  1. 箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下,例如用在mapreducefilter的回调函数定义中;
  2. 不要在最外层定义箭头函数,因为在函数内部操作this会很容易污染全局作用域。最起码在箭头函数外部包一层普通函数,将this控制在可见的范围内;
  3. 如开头所述,箭头函数最吸引人的地方是简洁。在有多层函数嵌套的情况下,箭头函数的简洁性并没有很大的提升,反而影响了函数的作用范围的识别度,这种情况不建议使用箭头函数。




回复 (16)
  • #
  • #1 蒲风尼 1483579942514

    扯淡

    这是不对的

    helloworld
    
    • 那又怎样
  • #2 皮尘云 1490088113177
    ssdsdszxxzxz
    ;dsd;lsd;ls;dlsd;s;
    s;dls;dls;dls;dls
    sdl;ssdlkdld
    s;lslsdsdsl
    
  • #3 william-xue 1490681358946

    @蒲文章是对的就是好的呀

  • #4 张收斥 1499743573163

    const test = data => data; console.log(test.prototype) // 输出 underfined

  • #5 皮犬压 1501756154512

    强调文本啦咯啦咯哦咯我这破肉某座婆婆强调文本刺激筋疲力尽

    引用

    加粗文本

  • #6 时伙门 1515987476555

    对方尴尬的噶的啊是的噶读书噶都是咖色蛋糕啊是的噶蛋糕

  • #7 时伙门 1515987506320

    阿斯顿发发发发的说法阿斯顿发大方啊速度发多

    引用

    少发啊速度发多少法地方啊时代发生敌法

  • #8 时伙门 1515988539609

    @蒲风尼 #0

    那又如何

  • #9 骆引牙 1516018136465

    引用

  • #10 小鱼酱 1521655540366

    箭头函数是比较影响可阅读性的,并且它并不美观(博主你是不是对美观有什么误解)!!! 箭头函数的优势似乎是它的纯函数式思想,但是纯函数式的结果并不只是箭头函数可以提供,不幸运的是几乎所有语言的基础特性都已经提供了纯函数式的实现方式,所以纯函数式也不可以说是它的特性。于是箭头函数的特性看上去似乎只剩下写法的简洁了,这一点是毋庸置疑的,但是任何好处都会付出成本,这种简洁的好处是以损失可阅读性为代价的,所以大多数情况下,其实并不推荐使用箭头函数呢!

  • #11 洪吉伤 1527061540381

    aaa

  • #12 洪吉伤 1527061576955

    eee

    alert(123)
  • #13 路向吐 1541386943267

    eval(alert(helloworld!));

  • #14 Neco 1551434525941

    凡是要用到this的就不要用箭头函数。 凡是不要用this的就可以用箭头函数。

  • #15 车仍忙 1565330724151
    test123
    12312312312313123123
    

    123

  • #16 人中长 1565782197516

    其实还是不熟悉造成的吧,不用lambda表达式的情况下,this有时候也不一定指的是你想要的东西

微信扫码 立即评论




 热门文章 - 分享最多
  1. NodeJS中的客户端缓存、浏览器缓存、304缓存和OnceIO的缓存控制
  2. 在Debian上安装Nginx并搭建一个最简单的静态网站服务器(以OnceAI为例)
  3. NodeJS中的Middleware是什么?在OnceIO中创建和使用中间件
  4. OnceIO(NodeJS)中的服务器端缓存、模板预加载和静态资源文件的缓存和Gzip压缩机制
  5. OnceIO(Node.JS)中的模板引擎是什么及MVC设计模式的使用与实现
  6. NodeJS教程:基于OnceIO框架实现文件上传和验证
  7. OnceIO(Node.JS)的静态文件路由(app.static)
  8. OnceIO(Node.JS)的网页(模板)的引用与嵌套
  9. OnceIO(Node.JS)服务器端Cookie设置、添加、删除、显示及其实现原理
  10. OnceIO(Node.JS)的路由(Routing)、路由方法和路由变量

 相关阅读
  1. NodeJS教程:基于OnceIO框架实现文件上传和验证
  2. 在Debian(Raspberry Pi)树莓派上安装NodeJS
  3. OnceIO(Node.JS)服务器端Cookie设置、添加、删除、显示及其实现原理
  4. OnceIO(Node.JS)的网页(模板)的引用与嵌套
  5. OnceIO(NodeJS)中的服务器端缓存、模板预加载和静态资源文件的缓存和Gzip压缩机制
  6. NodeJS中的客户端缓存、浏览器缓存、304缓存和OnceIO的缓存控制
  7. OnceIO(Node.JS)的路由(Routing)、路由方法和路由变量
  8. Node.JS的表单提交及OnceIO中接受GET/POST数据的三种方法
  9. OnceIO(Node.JS)中安装、使用和更换doT、EJS、pug等模板引擎
  10. OnceIO(Node.JS)中的模板引擎是什么及MVC设计模式的使用与实现

  开源的 OurJS
OurJS开源博客已经迁移到 OnceOA 平台。

  关注我们
扫一扫即可关注我们:
OnceJS

OnceOA