UDN-企业互联网技术人气社区

板块导航

浏览  : 559
回复  : 2

[原生js] Arrow Function(箭头函数)

[复制链接]
小辫儿的头像 楼主
发表于 2017-1-7 15:16:36 | 显示全部楼层 |阅读模式
  之前我们讲过了箭头函数的语法。现在,我们单独讲讲箭头函数的用法是如何的。

  概述

  先来一到开胃小菜:
  1. let arr = [1, 2, 3];

  2. // ES5
  3. let squares = arr.map(function (x) { return x * x });
  4. // ES6
  5. let squares = arr.map(x => x * x);
复制代码

  简洁明了,没毛病。

  直接上重点:

  arguments

  super

  this

  new.target

  以上 4 点是一个函数被创建时就拥有的东西。

  This 的指向

  示例:
  1. function Prefixer(prefix) {
  2.     this.prefix = prefix;
  3. }
  4. Prefixer.prototype.prefixArray = function (arr) { // (A)
  5.     'use strict';
  6.     return arr.map(function (x) { // (B)
  7. // 没有作用
  8.     return this.prefix + x; // (C)
  9.   });
  10. };
  11. var pre = new Prefixer('Hi ');
  12. pre.prefixArray(['Joe', 'Alex']);  // Cannot read property 'prefix' of undefined
复制代码

  以上示例使我们在 ES5 中定义时常出现的问题,那就是 this 指向哪里去了?

  要避免上述的错误。我们可以采用 3 种方式解决问题:

  var that = this

  在表达式最后使用 this 指明指向

  使用 bind(this) 方法

  无论使用了哪种方法解决问题,我们都会觉得很不爽,使得代码更加的难以理解与维护,但没有办法。

  ES6 中的箭头函数则 默认绑定了 this 的指向 。也就是说,箭头函数中的 this 取决于在哪里定义,而不是在哪里调用。进一步讲,箭头函数中的 this 就是默认绑定在此函数作用域中了,不可更改。

  总结一下:

  传统函数的 this 是动态的。它取决于 this 怎样被调用。

  箭头函数的 this 是静态的。它是一个词法(lexical )上的值,它取决于 this 在哪个作用域中定义。

  IIFE

  我们都知道 IIFE(立即调用函数)的写法是什么样的。
  1. (function () {
  2.   // ...
  3. }());
复制代码

  在 ES6 中,我们可以简写它:
  1. (() => {
  2.   // ...
  3. }());
复制代码

  我们在写一般的箭头函数时,解释为下面这样:
  1. const value = () => foo()
  2. // 解释为
  3. const value = () => (foo())
  4. (foo()) 就是其作用域范围,而不是将其解释为 IIFE 的形式:

  5. // 错误
  6. const value = (() => foo())
复制代码

  忽略括号

  我们在写箭头符号的时候,如果参数只有一个,那么我们可以省略括号:
  1. x => x * x;
  2. // 等价于
  3. (x) => x * x;
  4. // ES5
  5. function (x){ return x * x; };
复制代码

  但如果一个参数需要解构或用作别的目的时,就必须加上括号哦。
  1. // 错误
  2. x=0 => x * x
复制代码

  它看上去就很奇怪不是吗?我们来改正它吧:
  1. (x=0) => x * x
复制代码

  箭头函数与普通函数的区别

  构造函数词法上的差异:箭头函数拥有:arguments, super, this 和 new.target。

  由于箭头函数没有 [[Construct]] 内部方法,因此,它将不能用作构造函数。如果使用了 new 关键字创建新的函数,则会抛出错误。

  总结

  本小节内容不多,但都是精华。需要将每段代码认真地看懂,就基本可以掌握箭头函数啦。它本身不难去理解与使用,但其中有很多细节性的东西需要大家注意下。

相关帖子

发表于 2017-1-7 15:17:06 来自手机 | 显示全部楼层
鄙视楼下的顶帖没我快,哈哈
使用道具 举报

回复

发表于 2017-1-10 02:24:43 | 显示全部楼层
纯粹路过,没任何兴趣,仅仅是看在老会员的份上回复一下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部