博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript箭头函数(Arrow Function)
阅读量:5969 次
发布时间:2019-06-19

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

hot3.png

ES6标准新增了一种新的函数:。

更简洁的语法

我们先来按常规语法定义函数:

function (x) {    return x * x;}

该函数使用箭头函数可以使用仅仅一行代码搞定!

x => x * x

箭头函数相当于匿名函数,并且简化了函数定义。

箭头函数有两种格式:

  • 一种像上面的,只包含一个表达式,连{
     ... }return都省略掉了。
  • 还有一种可以包含多条语句,这时候就不能省略{ ... }return。
x => {    if (x > 0) {        return x * x;    }    else {        return - x * x;    }}

我们可以看一下箭头函数的语法规则:

(parameters) => { statements }

本文上面的例子中,函数有一个参数。如果函数有多个参数或者没有参数,可按照下面写法:

如果返回值仅仅只有一个表达式(expression), 还可以省略大括号。

// 无参数:() => 3.14//一个参数//如果只有一个参数,可以省略括号:x=>x*x// 两个参数:(x, y) => x * x + y * y// 可变参数:(x, y, ...rest) => {    var i, sum = x + y;    for (i=0; i

注意:如果要返回一个对象,就要注意,如果是单表达式,这么写的话会报错:

// SyntaxError:x => { foo: x }

因为和函数体的 { ... } 有语法冲突,所以要改为:

// ok:x => ({ foo: x })

没有局部this的绑定

箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。箭头函数不会绑定this。 或则说箭头函数不会改变this本来的绑定。

举个例子说明:

function Counter() {  this.num = 0;}var a = new Counter();

 console.log(a.num);// 0

因为使用了关键字 new 构造,Count()函数中的 this 绑定到一个新的对象,并且赋值给a。通过 console.log 打印 a.num,会输出0。

如果我们想每过一秒将 a.num 的值加1,该如何实现呢?可以使用 setInterval() 函数。

function Counter() {  this.num = 0;  this.timer = setInterval(function add() {    this.num++;    console.log(this.num);  }, 1000);}var b = new Counter();// NaN// NaN// NaN// ...

每隔一秒都会有一个NaN打印出来,而不是累加的数字。

原因:首先函数 setInterval 没有被某个声明的对象调用,也没有使用 new 关键字,再之没有使用 bind ,  call 和 apply 。 setInterval 只是一个普通的函数。实际上 setInterval 里面的 this 绑定到全局对象的。

之所以打印 NaN ,是因为 this.num 绑定到 window 对象的 num ,而 window.num 未定义。

解决办法:使用箭头函数!使用箭头函数就不会导致 this 被绑定到全局对象。

function Counter() {  this.num = 0;  this.timer = setInterval(() => {    this.num++;    console.log(this.num);  }, 1000);}var b = new Counter();// 1// 2// 3// ...

通过 Counter 构造函数绑定的 this 将会被保留。在 setInterval 函数中, this 依然指向我们新创建的b对象。

再举个例子:

由于JavaScript函数对 this 绑定的错误处理,下面的例子无法得到预期结果:

var obj = {    birth: 1990,    getAge: function () {        var b = this.birth; // 1990        var fn = function () {            return new Date().getFullYear() - this.birth; // this指向window或undefined        };        return fn();    }};

现在,箭头函数完全修复了 this 的指向, this 总是指向词法作用域,也就是外层调用者 obj :

var obj = {    birth: 1990,    getAge: function () {        var b = this.birth; // 1990        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象        return fn();    }};obj.getAge(); // 25

如果使用箭头函数,以前的那种hack写法:

var that = this;

就不再需要了。

由于this在箭头函数中已经按照词法作用域绑定了,所以,用 call() 或者 apply() 调用箭头函数时,无法对 this 进行绑定,即传入的第一个参数被忽略:

var obj = {    birth: 1990,    getAge: function (year) {        var b = this.birth; // 1990        var fn = (y) => y - this.birth; // this.birth仍是1990        return fn.call({birth:2000}, year);    }};obj.getAge(2015); // 25

 

本文部分内容借鉴自:

 

亲,如果您感觉本文有用,请点个赞再走吧✌(>‿◠)!!

转载于:https://my.oschina.net/ZhenyuanLiu/blog/1838571

你可能感兴趣的文章
一个有味道的函数
查看>>
zookeeper在linux环境安装
查看>>
Python_异常和模块
查看>>
【386天】跃迁之路——程序员高效学习方法论探索系列(实验阶段143-2018.02.26)...
查看>>
Java数据类型分类
查看>>
SpringMVC架构
查看>>
JAVA团队开发手册 - 2.代码管理
查看>>
超详细步骤 | 如何用小程序 SDK 实现电商评价模
查看>>
Android 类库
查看>>
vue和iview应用中的一些问题(持续更新)
查看>>
基于 Workman 实现Web扫描登录
查看>>
karma如何与测试框架合作2之webpack
查看>>
关于VSCode更新对于emmet2.0支持的配置更改问题。
查看>>
二叉树的遍历
查看>>
10分钟搭建MySQL Binlog分析+可视化方案
查看>>
vmware虚拟机配置串口
查看>>
小型自动化运维--expect脚本之传递函数
查看>>
Exchange Server 2010部署安装之一
查看>>
Nsrp实现juniper防火墙的高可用性【HA】!
查看>>
oracle11g 安装在rhel5.0笔记
查看>>