详解ES6（五）-箭头函数

在ES6中，箭头函数是其中最有趣的新增特性。顾名思义，箭头函数是一种使用箭头（=>）定义函数的新语法，但是它与传统的JavaScript函数有些许不同，主要集中在以下方面：

• 没有this、super、arguments和new.target绑定，其值由外围最近一层非箭头函数决定
• 不能通过new关键字调用
• 没有原型
• 不可以改变this的绑定
• 不支持arguments对象
• 不支持重复的命名参数

箭头函数的语法

先来看一个例子：

let reflect = value => value;
//相当于
let reflect = function(value){
    return value;
};

简单来说，就是箭头左边为参数，右边为函数体，如果要传入多个参数，可以这样写：

let sum = (num1, num2) => num1 + num2;

如果没有参数，要写括号，就像这样：

let getName = () => "Nicholas";

如果函数体超过一个表达式，即函数体为多个表达式，就需要加花括号：

let sum2 = (num1, num2) => {
    return num1 + num2;
};

如果想要让箭头函数向外返回一个对象字面量，则需要将该字面量包裹在小括号里：

let getTempItem = id => ({
    id: id,
    name: "temp"
});

创建立即执行函数表达式

我们时常会用到立即执行函数表达式，在ES5中我们经常用这种方法创建块级作用域，就像这样：

(function(){
	var count = 5;
	console.log(count);//5
})();

对于箭头函数也可以创建立即执行表达式，就像这样：

let person = ((name) => {
    return {
        getName: function () {
            return name;
        }
    };
})("Nicholas");
console.log(person.getName());

没有自己的this绑定

箭头函数的this值为由外围最近一层非箭头函数决定，即使使用call等函数为其指定也无效，我们看下面的例子：

//箭头函数也可以使用call等函数，但this值不会受到影响
this.name = "Jack";
var person = {name: "Job"};
//非箭头函数
var getName2 = function(age, job){ return this.name + " " + age + " " + job;};
console.log(getName2.call(person, 11, "none"));
console.log(getName2.apply(person, [11, "none"]));
var boundgetName = getName2.bind(person, 11, "none");
console.log(boundgetName());
//箭头函数
var getName = (age, job) => this.name + " " + age + " " + job;
console.log(getName.call(person, 11, "none"));
console.log(getName.apply(person, [11, "none"]));
var boundgetName = getName.bind(person, 11, "none");
console.log(boundgetName());

因此如果箭头函数准备使用call等函数，一般会这样写：

getName.call(null, 11, "none");

没有自己的arguments绑定

与this一样，箭头函数的arguments也是由外围最近一层非箭头函数决定，我们看下面这个例子：

function createArrowFunctionReturningArg() {
    return (index) => arguments[index];
}
var arrowFunction = createArrowFunctionReturningArg(2, 3, 4, 5, 6);
console.log(arrowFunction(1)); //3
console.log(arrowFunction(2)); //4 

· 关注微信公众号【技术斋】，发现更多精彩！

· 公众号《投稿及转载说明》