箭头函数
箭头函数是es6当中对函数的一种全新表示法。其将函数的简洁性发扬到了极致!先来看一个最简单的箭头函数:
let fn = a => a
var m = prompt()
alert(fn(m))
1. 箭头函数写法
一、如果只有一条语句,可以将{}和return省略掉
let fn = a => a+a
//相当于
let fn = function(a){
return a+a;
}
二、如果语句为多条,则不可以省略{}和return
let fn = a => {
var b = 0;
console.log(a,b);
}
fn(10)
还有两点需要注意!
一、
- 当传单个参数的时候,不需要加括号()
var fn = a => a
- 当传多个值的时候需要加括号
var fn = (a,b)=>a+b
二、
当省略{}和return时,如果返回的内容是一个对象,对象需要用括号()括起来
不加括号的话会是 undefined
var fn = a=>({a:'你好'}) console.log(fn())
2. 箭头函数不能用于构造函数
先来看构造函数
var ful=function(age){
this.age=age;
}
var chl=new ful(18);
console.log(chl.age);//18
改为箭头函数后
var ful = age => {
this.age=age;
}
var chl=new ful(18);//ful is not a constructor
console.log(chl.age);
3. 箭头函数没有prototype属性
var fn = () => {};
console.log(fn.prototype); // undefined
4. 箭头函数不绑定this
箭头函数中没有this 的指向,在箭头函数中this 的指向会指向离他最近的那个作用域
这来看一道面试题:
window.color = "red";
//let 声明的全局变量不具有全局属性,即不能用window.访问
let color = "green";
let obj = {
color: "blue",
getColor: () => {
return this.color;//this指向window
}
};
let sayColor = () => {
return this.color;//this指向window
};
console.log(obj.getColor())
obj.getColor();//red
console.log(sayColor())
sayColor();//red
总结
- 箭头函数中没有this 的指向,在箭头函数中this 的指向会指向离他最近的那个作用域
- 箭头函数不能当做构造函数
- 箭头函数中没有 arguments 这个参数