环球即时看！es6 等号箭头什么意思

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。

=>是箭头函数，是ES6标准中新增的一种新的函数。顾名思义，箭头函数是一种使用箭头（=>）定义函数的新语法，箭头函数表达式的语法比函数表达式更简洁，但是它与传统的JavaScript函数有些许不同，主要集中在以下方面：

(资料图片仅供参考)

没有this、super、arguments和new.target绑定，其值由外围最近一层非箭头函数决定

不能通过new关键字调用

没有原型

不可以改变this的绑定

不支持arguments对象

不支持重复的命名参数

函数体内的this的指向始终是指向定义它所在的对象，而不会指向调用它的对象，我们知道es5中的函数是谁执行它，它就指向谁。

执行环境

你可以自己去学习和尝试下, 你可以简单的把示例程序代码复制到你的浏览器控制台下. 现在, 推荐使用Firefox(22+)开发者工具, Firefox(22+)开发者工具现在支持箭头函数,你也可以使用谷歌浏览器. 如果你使用谷歌浏览器, 你必须要做下列两件事:

在谷歌浏览器中地址栏中输入：about:flags, 找到 "使用体验性JavaScript"选项，开启使用。

在函数的开头加上use strict,然后再在你的谷歌浏览中测试箭头函数吧(提示：请用谷歌浏览器v38,我当时就是被浏览器版本坑了):

(function(){    "use strict";    // use arrow functions here}());
登录后复制

幸运的是后面会有越来越多的浏览器支持ES6特性. 现在你完成了所有准备工作, 让我们继续深入它吧!

一个新话题

最近大家在讨论关于ES6的一个话题：关于箭头函数, 像这样:

=>
登录后复制

新的语法

随着讨论产生了一个新的语法：

param => expression
登录后复制

新增的语法是作用在变量上, 可以在表达式中申明多个变量, 下面是箭头函数的使用模式:

//  一个参数对应一个表达式param => expression;// 例如 x => x+2;// 多个参数对应一个表达式(param [, param]) => expression; //例如 (x,y) => (x + y);// 一个参数对应多个表示式param => {statements;} //例如 x = > { x++; return x;};//  多个参数对应多个表达式([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;};//表达式里没有参数() => expression; //例如var flag = (() => 2)(); flag等于2() => {statements;} //例如 var flag = (() => {return 1;})(); flag就等于1//传入一个表达式，返回一个对象([param]) => ({ key: value });//例如  var fuc = (x) => ({key:x})        var object = fuc(1);        alert(object);//{key:1}
登录后复制

箭头函数是怎么实现的

我们可以把一个普通函数转换成用箭头函数来实现：

// 当前函数var func = function (param) {    return param.split(" ");}// 利用箭头函数实现var func = param => param.split(" ");
登录后复制

从上面的例子中我们可以看出箭头函数的语法实际上是返回了一个新的函数, 这个函数有函数体和参数。

因此, 我们可以这样调用刚才我们创建的函数:

func("Felipe Moura"); // returns ["Felipe", "Moura"]
登录后复制

立即执行函数(IIFE)

你能在立即执行函数里使用箭头函数，例如:

( x => x * 2 )( 3 ); // 6
登录后复制

这行代码产生了一个临时函数，这个函数有一个形参x，函数的返回值为x*2,之后系统会马上执行这个临时函数, 将3赋值给形参x.

下面的例子描述了临时函数体里有多行代码的情况：

( (x, y) => {    x = x * 2;    return x + y;})( 3, "A" ); // "6A"
登录后复制

作用域

这个箭头函数的作用域和其他函数有一些不同,如果不是严格模式，this关键字就是指向window，严格模式就是undefined，在构造函数里的this指向的是当前对象实例,如果this在一个对象的函数内则this指向的是这个对象，this有可能指向的是一个DOM元素，例如当我们添加事件监听函数时,可能这个this的指向不是很直接，其实this（不止是this变量）变量的指向是根据一个规则来判断的：作用域流。下面我将演示this在事件监听函数和在对象函数内出现的情况：

在事件监听函数中：

document.body.addEventListener("click", function(evt){    console.log(this); // the HTMLBodyElement itself});
登录后复制

在构造函数里：

function Person () {    let fullName = null;    this.getName = function () {        return fullName;    };    this.setName = function (name) {        fullName = name;        return this;    };}let jon = new Person();jon.setName("Jon Doe");console.log(jon.getName()); // "Jon Doe"//注：this关键字这里就不解释了，大家自己google,baidu吧。
登录后复制

在这个例子中，如果我们让Person.setName函数返回Person对象本身，我们就可以这样用：

jon.setName("Jon Doe").getName(); // "Jon Doe"
登录后复制

在一个对象里:

let obj = {    foo: "bar",    getIt: function () {        return this.foo;    }};console.log( obj.getIt() ); // "bar"
登录后复制

但是当执行流(比如使用了setTimeout)和作用域变了的时候，this也会变。

function Student(data){    this.name = data.name || "Jon Doe";    this.age = data.age>=0 ? data.age : -1;    this.getInfo = function () {        return this.name + ", " + this.age;    };    this.sayHi = function () {        window.setTimeout( function () {            console.log( this );        }, 100 );    }}let mary = new Student({    name: "Mary Lou",    age: 13});console.log( mary.getInfo() ); // "Mary Lou, 13"mary.sayHi();// window
登录后复制

当setTimeout函数改变了执行流的情况时，this的指向会变成全局对象,或者是在严格模式下就是undefine,这样在setTimeout函数里面我们使用其他的变量去指向this对象，比如self，that,当然不管你用什么变量，你首先应该在setTimeout访问之前，给self，that赋值，或者使用bind方法不然这些变量就是undefined。

这是后就是箭头函数登场的时候了，它可以保持作用域，this的指向就不会变了。

让我们看下上文起先的例子，在这里我们使用箭头函数：

function Student(data){    this.name = data.name || "Jon Doe";    this.age = data.age>=0 ? data.age : -1;    this.getInfo = function () {        return this.name + ", " + this.age;    };    this.sayHi = function () {        window.setTimeout( ()=>{            // the only difference is here            console.log( this );        }, 100 );    }}let mary = new Student({    name: "Mary Lou",    age: 13});console.log( mary.getInfo() ); // "Mary Lou, 13"mary.sayHi();// Object { name: "Mary Lou", age: 13, ... }
登录后复制

有趣和有用的使用

创建一个函数很容易，我们可以利用它可以保持作用域的特征：

例如我们可以这么使用：Array.forEach()

var arr = ["a", "e", "i", "o", "u"];arr.forEach(vowel => {    console.log(vowel);});
登录后复制

//在Array.map里使用箭头函数，这里我就不分析函数执行过程了。。。。var arr = ["a", "e", "i", "o", "u"];arr.map(vowel => {    return vowel.toUpperCase();});// [ "A", "E", "I", "O", "U" ]
登录后复制

费布拉奇数列

var factorial = (n) => {    if(n==0) {        return 1;    }    return (n * factorial (n-1) );}factorial(6); // 720
登录后复制

我们也可以用在Array.sort方法里：

let arr = ["a", "e", "i", "o", "u"];arr.sort( (a, b)=> a < b? 1: -1 );
登录后复制

也可以在事件监听函数里使用：

// EventObject, BodyElementdocument.body.addEventListener("click", event=>console.log(event, this));
登录后复制

总结

尽管大家可能会认为使用箭头函数会降低你代码的可读性，但是由于它对作用域的特殊处理，它能让我们能很好的处理this的指向问题。箭头函数加上let关键字的使用，将会让我们JavaScript代码上一个层次！尽量多使用箭头函数，你可以再你的浏览器测试你写的箭头函数代码，大家可以再评论区留下你对箭头函数的想法和使用方案！我希望大家能享受这篇文章，就像你会不就的将来享受箭头函数带给你的快乐.

更多编程相关知识，请访问：编程入门！！

以上就是es6 等号箭头什么意思的详细内容，更多请关注php中文网其它相关文章！

关键词：事件监听谷歌浏览器