箭头函数:是一种函数的语法,符合函数的概念
特点如下:
1. 简单方便:()=>{}
2. 不允许直接存在,必须作为值存在
var fn = ()=>{
console.log("hello");
}
fn(); //hello
3. 箭头函数内部没有自己的this,使用的是外层函数的this
var obj = {
fn1:function(){
console.log(this);
},
fn2:()=>{
console.log(this);
}
}
obj.fn1(); //obj
obj.fn2(); //window
4. 箭头函数内部没有自带的arguments
例1:普通函数
var fn = function(){
console.log(arguments);
}
fn2(); //Arguments[]
fn2(1,2,3); //Arguments[1,2,3]
例2:箭头函数
var fn = ()=>{
console.log(arguments);
}
fn(); //报错:arguments is not defined 参数为定义
5. 当只有一个形参时,小括号可以省略
var fn = a=>{
console.log(a);
}
fn("hello"); //hello
6. 在简单语句中,若想返回函数的内容,可以省略花括号的同时省略return
var fn = a=>a;
console.log(fn("hello")); //hello
使用场景:
1. 一般来说,箭头函数用在回调函数上,较为方便
例1:普通函数
var arr = [3, 6, 2, 1, 7, 8];
arr.sort(function(a,b){ //sort()为ES6新增的数组方法,功能是排序
return a - b;
});
console.log(arr); // [1, 2, 3, 6, 7, 8]
例2:箭头函数
var arr = [3, 6, 2, 1, 7, 8];
arr.sort((a,b) => a - b);
console.log(arr); // [1, 2, 3, 6, 7, 8]
2. 事件监听式绑定事件,尽量不要使用箭头函数,会丢失this
document.addEventListener("click", () => {
console.log(this); // window
})