ES6箭头函数和它的作用域

原文来自我的前端博客：

http://www.hacke2.cn/arrow-functions-and-their-scope/

http://es6rocks.com/2014/10/arrow-functions-and-their-scope/ 原文链接 译：@liningone 摇滚ES6中国站快要上线了，大家期待吧，也能够联系我或者ES6组织为这个活动做出点贡献！

在ES6非常多非常棒的新特性中, 箭头函数 (或者大箭头函数)就是当中值得关注的一个! 它不不过非常棒非常酷, 它非常好的利用了作用域, 快捷方便的在如今使用曾经我们用的技术, 降低了非常多代码……可是假设你不了解箭头函数原理的话可能就有点难以理解. 所以,让我们来看下箭头函数, 就是如今!

运行环境

你能够自己去学习和尝试下, 你能够简单的把演示样例程序代码拷贝到你的浏览器控制台下. 如今, 推荐使用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"

相关思考

思考以下的函数：

var func = x => {
    return x++;
};

我们列出了一些常见的问题：

- 箭头函数创建的暂时函数的arguments是我们预料的那样工作

console.log(arguments);

- typeof和instanceof函数也能正常检查暂时函数

func instanceof Function; // true
typeof func; // function
func.constructor == Function; // true

- 把箭头函数放在括号内是无效的

// 有效的常规语法
(function (x, y){
    x= x * 2;
    return x + y;
} (3, "B") );

// 无效的箭头函数语法
( (x, y) => {
    x= x * 2;
    return x + y;
} ( 3, "A" ) );

// 可是能够这样写就是有效的了：
( (x,y) => {
	x= x * 2;return x + y;
} )( 3,"A" );//马上运行函数

- 虽然箭头函数会产生一个暂时函数，可是这个暂时函数不是一个构造函数

var instance= new func(); // TypeError: func is not a constructor

- 相同也没有原型对象

func.prototype; // undefined

作用域

这个箭头函数的作用域和其它函数有一些不同,假设不是严格模式，thiskeyword就是指向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"
//注：thiskeyword这里就不解释了，大家自己google,badu吧。

在这个样例中，假设我们让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, ... }

分析：在sayHi函数中，我们使用了箭头函数，当前作用域是在student对象的一个方法中，箭头函数生成的暂时函数的作用域也就是student对象的sayHi函数的作用域。所以即使我们在setTimeout调用了箭头函数生成的暂时函数，这个暂时函数中的this也是正确的指向。

有趣和实用的使用

创建一个函数非常easy，我们能够利用它能够保持作用域的特征：

比如我们能够这么使用：Array.forEach()

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.forEach(vowel => {
    console.log(vowel);
});

分析：在forEach里箭头函数会创建并返回一个暂时函数 tempFun,这个tempFun你能够想象成这种：function(vowel){ console.log(vowel);}可是Array.forEach函数会怎么去处理传入的tempFunc呢？在forEach函数里会这样调用它：tempFunc.call(this,value);全部我们看到函数的正确运行效果。

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 );

也能够在事件监听函数里使用：

document.body.addEventListener('click', event=>console.log(event, this)); // EventObject, BodyElement

推荐的链接

以下列出了一系列实用的链接，大家能够去看一看

• - Arrow Functions in MDN Documentation
• - TC39 Wiki about Arrow Function
• - ESNext
• - ES6 Tools
• - Grunt ES6 Transpiler
• - ES6 Fiddle
• - ES6 Compatibility Table

总结

虽然大家可能会觉得使用箭头函数会减少你代码的可读性，可是因为它对作用域的特殊处理，它能让我们能非常好的处理this的指向问题。箭头函数加上letkeyword的使用，将会让我们javascript代码上一个层次！尽量多使用箭头函数，你能够再你的浏览器測试你写的箭头函数代码，大家能够再评论区留下你对箭头函数的想法和使用方案！我希望大家能享受这篇文章，就像你会不就的将来享受箭头函数带给你的快乐.