博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6~你跟箭头函数升华之路
阅读量:5757 次
发布时间:2019-06-18

本文共 2414 字,大约阅读时间需要 8 分钟。

箭头函数

1. 简单的定义:

胖箭头函数 Fat arrow functions,又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全

新特性。有传闻说,箭头函数的语法=>,是受到了CoffeeScript 的影响,并且它与CoffeeScript中的
=>语法一样,共享this上下文。

箭头函数的产生,主要由两个目的:更简洁的语法和与父作用域共享关键字this。接下来,让我们来看几个详细的例子

当需要编写一个简单的单一参数函数时,可以采用箭头函数来书写,标识名 => 表达式。
这样就可以省却 functionreturn 的输入,还有括号,分号等。箭头函数是ES6
增加的一个特性。

let f = v => v;

最直接的感觉就是简便,当然不可能就是这么一点好处,下面就一起来探讨一下。

几个小细节 :

  • 如果箭头函数的代码块多余一条语句,就必须要使用大括号将其括起来,并且使用
    return 语句返回。
  • 由于大括号会被解释位为代码块,所以如果箭头函数直接返回一个对象,必须在外
    面加上括号。
let f = id => ({age: 22, name: Alice })
  • 箭头函数还可以和解构赋值 Destructuring 联合使用.
const f = ({first, last}) => first + '' + last;
  • 可以简化回调函数,大大简化和缩短代码行数。

2. 箭头函数和普通函数的区别

  • this的指向
    普通函数与箭头函数有个微小的不同点。 箭头函数没有自己的this值 ,其this值是通

过继承其它传入对象而获得的,通常来说是上一级外部函数的 this 的指向。

function f() {    setTimeout( () => {      console.log("id:", this.id);    },100);  }  f.call( { id: 42 }); //id: 42;

这个例子中, setTimeout 的参数是一个箭头函数, 每隔100毫秒运行一次,如果是普通函

数,执行的 this 应该指向全局对象, 但是箭头函数会让 this 总是指向函数所在的对象

箭头函数里面嵌套箭头函数会有多少个this呢?

看一个简单的例子

function f() {    return () => {      return () => {        return () => {          console.log("id:", this.id);        };      };    };  }  f().call( {id: 42})()()(); //id: 42

上面的代码中只有一个 this, 就是函数f的this 。这是因为所有的内层函数都是箭头函数

都没有自己的this,都是最外层f函数的this。
注意:还有三个变量在箭头函数中也是不存在的arguments , super, new.target所以顺理成
章,箭头函数也就不能再用这些方法call(),apply(),bind(),因为这是一些改变this指向的方法,
箭头函数并没有this啊。

var adder = {    base : 1,    add : function(a) {    var f = v => v + this.base; return f(a);  },    addThruCall: function(a) {    var f = v => v + this.base;    var b = { base : 2 };    return f.call(b, a);  }};    console.log(adder.add(1));

3. 怎么处理好箭头函数的使用问题呢?

  • 使用非箭头函数来处理由object.method()语法调用的方法。因为它们会接收到来自调用者的
    有意义的this值。
  • 在其它场合都使用箭头函数。

4. 使用箭头函数的注意点

  • 箭头函数在参数和箭头之间不能换行。
  • 函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象。
'use strict';var obj = { a: 10};Object.defineProperty(obj, "b", {    get: () => {    console.log(this.a, typeof this.a, this);    return this.a+10;    // represents global object 'Window', therefore 'this.a' returns 'undefined'  }});
  • 不可以当作构造函数,简单说就是不能再使用new命令了,不然会报错。
var Foo = () => {};var foo = new Foo();// TypeError: Foo is not a constructor
  • 不可以使用arguments 对象,该对象在函数体内不存在,如果实在要用可以用rest代替。
  • 不可以使用yield命令,箭头函数不可用作Generator函数。

值得注意的一点就是this对象的指向是可变的,但在箭头函数内是固定的。

5. 总结

箭头函数是我最喜欢的ES6特性之一。使用=>来代替function是非常便捷的。但我也曾见过只使用

=>来声明函数的代码,我并不认为这是好的做法,因为=>也提供了它区别于传统function,其所
独有的特性。我个人推荐,仅在你需要使用它提供的新特性时,才使用它。

  • 当只有一条声明语句(statement)时, 隐式 return
  • 需要使用到父作用域中的this

喜欢的小伙伴可以关注我的学习分享网站:

转载地址:http://bevkx.baihongyu.com/

你可能感兴趣的文章
2019 DockerCon 大会即将召开,快来制定您的专属议程吧!
查看>>
15分钟构建超低成本数据大屏:DataV + DLA
查看>>
南大领衔!国内高校团队登上美国《科学进展》杂质,发布基因编辑可控技术...
查看>>
当下一对一直播源码市场空间
查看>>
1月9日云栖精选夜读 | Mars 算法实践——人脸识别
查看>>
.NET快速开发平台核心优势
查看>>
《黑匣子思维》读后感
查看>>
最全技术面试180题:阿里11面试+网易+百度+美团!
查看>>
SparkSQL Catalyst解析
查看>>
jSearch(聚搜) 1.0.0 终于来了
查看>>
Java字节码结构剖析二:字段表
查看>>
盘点2018云计算市场,变化大于需求?
查看>>
极光推送(一)集成
查看>>
Android项目实战(三十九):Android集成Unity3D项目(图文详解)
查看>>
MySQL 8.0 压缩包版安装方法
查看>>
TensorFlow系列专题(六):实战项目Mnist手写数据集识别
查看>>
JS中this的4种绑定规则
查看>>
Netty Pipeline源码分析(2)
查看>>
@Transient注解输出空间位置属性
查看>>
Ansible-playbook 条件判断when、pause(学习笔记二十三)
查看>>