在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值为由外围最近一层非箭头函数决定，即使使用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());
getName.call(null, 11, "none");
与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
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
