玩儿玩儿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只是做了适当的简化。

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