玩儿玩儿ES6—第二期

一、背景

上篇文章我们开了个ES6的头,也狠狠的讲了闭包的概念。ES6没出来之前,闭包还是必须要会的,但是现在就不用了,ES6已经给我们规避了这个问题。今天我们来谈一下ES6的箭头函数。

二、核心内容

2.箭头函数

①几种写法

1.() => console.log('Hello')

很简洁的写法,还原成ES5的函数就是这样:

function(){

console.log('Hello');

}

这种函数叫做箭头函数。应该是根据“=>”而来。从结构上看其实就是换了一种写法。

再看个例子:

ES6写一个函数:

let fun_name = (name,age) => {

console.log('姓名:'+name);

console.log('年龄:'+age);}

ES5的写法:

function fun_name(name,age){

console.log('姓名:'+name);

console.log('年龄:'+age);

}

②解释一下

以上两个例子中的箭头函数有两个特点:

1.例一没有函数名,即:匿名函数。而例二函数我指定了函数名。其实就是将函数赋给变量。

2.例一函数没有{}。而例二函数有{}。关于这一点例一其实就是个函数的简写形式。例二就是个标准函数了。

③箭头函数重要特点

不绑定this,arguments

更简化的代码语法

关于2,以上例子已经可以充分表达。而对于1,就是箭头函数最重要的用处。

1.1说说this

看几个例子:

① ES5函数this示例

② ES6箭头函数this示例

分析:

从上面例子的输出中可以看出this指向作用域是不同的。

在ES5中的this有如下解释:

1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj

2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成)

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

在ES6中的this有如下解释:

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window。

解释:上面几点关于ES5与ES6比较不太好理解。解释一下上面的例子就是:①中的this实际上就是obj。this就是执行时的上下文。而②中的this是继承自上层的上下文,定义时就已经写进去,而不是运行时才替换。关于①我们怎么访问外层name呢?看如下代码

解决这个问题就是类似如上的方法:使用一个其他变量保存this即可。以后面对其他问题也可以做这样的暂时处理。

在this这个问题上对于一般函数箭头函数用处还看不出优点,看以下在延迟函数上的用处:

在上面ES5函数写法中因为this继承自执行时的上下文,即this=obj。所以依然打出了“zhangsan”的结果。

而在ES6箭头函数中this是继承来的。也就是来自其父。而且在ES6中this定义时替换的。而原ES5中函数里的this是运行时替换的。所以才有以上的差距。

1.2JS中函数参数的解释

以上是ES5中函数的写法。arguments是js中的对象。通过该对象可以取得函数传进去的参数。通过上面的例子可以看到参数被放在了arguments对象中,并且可以取出来运算。

而在ES6中箭头函数是没有arguments对象的。所以报错“arguments is not defined”,那么ES6中如何处理动态参数呢?看下面的例子:

ES6箭头函数多了“...”这样一个运算符。使用“...”运算符可以将参数收到一个数组里,进而可以动态获取函数的参数。

关于“...”运算符在ES6中还有很多灵活的用法,看下面:

“...”作为一个运算符可以将很多多余的数据收入这个数组中。如上的例子,将数组中多余数据收入一个数组,保证数据不丢失。

三、总结

跟大家分享了一下关于es6箭头函数的事情。其实这样的知识点入门还是比较容易的,但是想要学的更深入就需要好好下一番功夫了。箭头函数可以完成的功能很多,希望大家可以挖掘的更深。

还有需要特别注意的一点:ES6是兼容ES5的,也就是说ES5中的东西依然有效。ES6只是做了适当的简化。

写了这么多,小编只求一关注。谢谢大家啦。关注关注小编支持我吧。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180523G0BKX700?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券