箭头函数特点：
1.不用写function关键字
2.只能作为函数使用不能new，没有原型
3.参数不能重复命名
4.返回值可以不写return，但是有时需要配合{}
5.内部arguments this 由定义时外围最接近一层的非剪头函数的arguments和this决定其值
1）这里以sum函数为例
function sum (a, b) {
return a + b;
};
var sum = function (a, b) {
return a + b;
};
箭头函数则可写为：
let sum = (a, b) => a + b；
其中亦是没有写return,对应上面第三条
当let sum = (a, b) => {a + b}；将a+b放置在块级作用域中不加return则执行后结果为undefined
如果箭头函数返回值是一个对象，需要用表达式的写法
let sum = (a, b) => ({a: a, b: b});
console.log( sum(10, 20) )
2）高阶函数
//ES5写法
function sum (x) {
return function (y) {
return function (z) {
return x + y + z;
}
}
};
sum(1)(2)(3)
var sum1 = sum(1);
var sum2 = sum1(2);
console.log( sum2(3) );
//箭头函数
let sum = x => y => z => x + y + z;
let sum = x => y => z => x + y + z;
console.log( sum(1)(2)(3) );//也可证明箭头函数是可以被返回的
3)参数不能重复命名
在ES5中参数可以重名
//ES5语法
var sum0 = function(a,a){
console.log(a+a);
}
sum0(1,2); // 2+2=4
var sum1 = function (a, a) {
console.log(a);
}
而箭头函数不可以
let sum = (x, x) => {
}
报出的错误如下
4）只能作为函数使用不能new，没有原型
let sum = () => {
this.a = 10;
}
new sum();
证明成立
- 内部arguments this 由定义时外围最接近一层的非剪头函数的arguments和this决定其值
//例1
function outer () {
// arguments
// 9 10 11
let sum = (a, b) => {
console.log(arguments, a, b);
};
sum(1, 2);
}
outer(9, 10, 11);
返回一个箭头函数且这个箭头函数不存在arguments，可以说arguments未定义
function Curry () {
// var arg = arguments;
return () => {
console.log(arguments)
}
};
Curry('a', 'b')(1, 2);
this问题
我们再看一遍内部this 由定义时外围最接近一层的非剪头函数的this决定其值
var a = 'outerObj';
let sum = () => {
// window
console.log(this.a);
};
sum();//outerObj
我们知道上面的代码中箭头函数sum中的this指向window
接着我们看几个例子：
let obj = {
a: 'innerObj',
fn () {
// this obj
let sum = () => {
// obj
console.log(this.a);
}
return sum;
}
};
let outerSum = obj.fn();
outerSum();//innerObj
将obj.fn()返回的箭头函数sum赋值给outerSum后，执行outerSum()，而fn是一个普通函数，被定义箭头函数sum的外面是fn，所以this指向obj。
let obj = {
ms: 'abc',
fn () {
// obj
// var self = this;
setTimeout( function() {
//this obj
console.log(this.ms);
}, 500)
}
};
obj.fn();
因为setTimeout中存在闭包，this指向window所以运行结果为undefined。解决这种情况有两种方法
//1.通过在fn()中将this赋值给一个新变量
let obj = {
ms: 'abc',
fn () {
// obj
var self = this;
setTimeout( function() {
//this obj
console.log(self.ms);
}, 500)
}
};
obj.fn();
//2.箭头函数
let obj = {
ms: 'abc',
fn () {
// obj
// var self = this;
setTimeout( () => {
//this obj
console.log(this.ms);
}, 500)
}
};
obj.fn();
看一下babel编译之后的箭头函数
测试代码如下：
//1-arrow.js
let sum = x => x * x;
let obj = {
ms: 'abc',
fn () {
// obj
// var self = this;
setTimeout( () => {
//this obj
console.log(this.ms);
}, 500)
}
};
babel命令：npx babel 1-arrow.js -o 1-newarrow.js
//1-newarrow.js可知与普通写法一样
var sum = function sum(x) {
return x * x;
};
var obj = {
ms: 'abc',
fn: function fn() {
var _this = this;
// obj
// var self = this;
setTimeout(function () {
//this obj
console.log(_this.ms);
}, 500);
}
};
obj.fn();
我们再看看数组
let arr = [10, 20, 30, 40, 50, 60];
console.log( arr.map(ele => ele * ele) );
console.log( arr.filter(ele => ele > 20) );//过滤大于20的数
对比与以前的数组写法，箭头函数极大地缩短了代码量
最后，我们来总结一下箭头函数的作用：函数目的指向性更强，可读性更好，简化代码，提升开发效率