箭头函数是ES6引入的一种更简洁的函数写法。是匿名函数,只能作为表达式的操作数。语法:(参数)=> {函数体}。对比普通函数声明,箭头函数格式更简洁,没有自己的this,不能作为构造函数,没有arguments,没有函数提升。
//只有 1个参数时,可以省略(),直接写参数名
let double = x=>x+x;
//有0个或者多个参数时,参数列表要用()包裹起来
let add = (a,b)=>a+b
let rand = ()=>Math.random();
//函数体只有1条语句时,{}和 return 可省略,右边值自动隐式return
let double = v=>v+v;
//如果语句为多条,函数体需用{}包裹,且需手动return
let total = v=>{
var sum = 0;
for(let i = 0;i < v;i++){
sum+=i;
}
return sum;
}
箭头函数中访问的 this实际上是其父级作用域中的this,箭头函数本身的this是不存在的。避免了之前先用that=this这种hack写法。同时,使用 bind,call,apply不能修改其this指向。
var obj1 = {
age: 1,
say: function() {
setTimeout(() => {
console.log(this,this.age); //objl 1 i
},0);
}
};
obj1.say();
如果通过new关键字调用,程序会抛出错误。同时也没有原型,不存在prototype这个属性。
var Person = (name) => {
this.name = name;
}
var person = new Person("jack");
//Uncaught Type Error: Person is not a constructor
可以使用rest参数代替arguments来访问箭头函数的参数列表。
var foo = (val) => {
console.log(arguments);
// Uncaught ReferenceError: arguments is not defined
};
foo();
非函数声明,不能像函数声明一样被提升。
//函数声明被提升,可以正常执行
console.log(getA)///getA(){}
getA()// A'
function getA() {
console.log('A')
}
//箭头函数为表达式,提升的是变量getB,赋值为undefined。下一句执行时由于getB不是函数而报错。
console.log(getB)// undefined
getB();//Uncaught TypeError: getB is nota function
var getB = ()=>{
console.log('B')
}
//注:普通函数表达式var demo=function(){}跟箭头函数表达式一样,也是提升的变量而不是函数
cs