大家好，又见面了，我是全栈君。
1. 介绍
第一眼看到ES6新增加的 arrow function 时，感觉非常像 lambda 表达式。
那么arrow function是干什么的呢？可以看作为匿名函数的简写方式。
如：
var addition = function(a, b) { return a + b };
// 等同
var addition = (a, b) => { return a + b };
2. 语法
arrow functions(箭头函数)主要有以下4种语法：
// 1)基本
(param1, param2, paramN) => { expression }
(param1, param2, paramN) => { return expression }
// 2)只有一个参数时，括号是可选的
(singleParam) => { expression }
singleParam => { expression }
// 3)不带参数时，在参数区域带有括号
() => { expression }
// 4)函数主体若不带{}大括号，表示直接返回函数主体
(param1, param2, paramN) => { return expression }
(param1, param2, paramN) => expression // 等同于上面
3. 特性
3.1 没有自身this
arrow function没有自身的this，即在arrow function内部使用this时，此this指向创建此函数时的外部this。
场景：在Web开发时都会用到ajax的回调，回调函数内的this常常用外部创建的self、that、_this等变量暂存，而当回调函数采用arrow function方式时就可以直接使用外部的this。
示例：
var ajax = function(url, successCallback) {
// TODO ajax
successCallback && successCallback();
};
var productBLL = {
productName: '瓜子',
query: function() {
// arrow function
ajax('query', () => {
console.log(this); // => productBLL
console.log(this.productName); // => 瓜子(productBLL.productName)
});
}
};
productBLL.query();
3.2 call()、apply() 调用无法改变this
就像上面讲的arrow function没有自身的this，当用call()或apply() 调用箭头函数时无法改变函数主体内的this。
示例：
// 普通函数
var sayHello = function(userName) {
console.log('hi ' + userName);
console.log(this);
};
sayHello.call({ x: 1 }, 'polk'); // => this == { x: 1 }
// 箭头函数
var sayHello2 = (userName) => {
console.log('hi ' + userName);
console.log(this);
};
sayHello2.call({ y: 2 }, 'polk'); // => this == window
3.3 没有arguments
使用arrow function创建的函数，自身是没有arguments成员。
var sayHello = (userName) => {
console.log('hi ' + userName);
console.log(arguments); // => Uncaught ReferenceError: arguments is not defined
};
3.4 arrow function作为某个对象的方法成员时，this指向非此对象
当某个对象的方法为arrow function时，那么此方法内的this指向并非是此对象。
示例：
var productBLL = {
productName: '瓜子',
sayName: function() {
console.log(this.productName);
},
sayName2: () => {
console.log(this.productName);
}
};
productBLL.sayName(); // => 瓜子
productBLL.sayName2(); // => undefined, this == window
4.扩展阅读
arrow function MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/107732.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...