箭头函数(Arrow Function)
箭头函数表达式的语法比>函数表达式更短,并且没有自己的this,arguments,super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。
首先,我们先来看一个普通函数:
function show(){
return 1
}
console.log(show())
//1
上述的函数转化为箭头函数为:
let show=()=>1;
console.log(show())
//1
//但是,这样的箭头函数没什么实用性。
下面,通过一个小例子来了解箭头函数的解构以及简单用法:
let result=(x,y)=>{
//(x,y)为函数传入的参数
console.log(x,y);//2,3
//此处写函数执行语句
return x*y
}
console.log(result(2,3)) //6
所以,箭头函数的语法格式有:
(参数1, 参数2, …, 参数N) => { 函数声明 } (参数1, 参数2, …, 参数N) => 表达式(单一) //相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; } // 当只有一个参数时,圆括号是可选的: (单一参数) => {函数声明} 单一参数 => {函数声明} // 没有参数的函数应该写成一对圆括号。 () => {函数声明} //加括号的函数体返回对象字面表达式: 参数=> ({foo: bar}) //支持剩余参数和默认参数 (参数1, 参数2, ...rest) => {函数声明} (参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明} //同样支持参数列表解构 let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6
箭头函数的this指向
var id=1001;
//定义全局变量时 必须用var
let json={
id:2002,
show:function(){
setTimeout(function(){
console.log(this.id) //1001
//结果1001是因为setTimeout是由Window执行的,属于全局作用域。
},2000)
}
}
json.show()
//若想this指向2002,则需要把this重新定义成that。
上述中的情况可以直接用箭头函数使this指向它的所在 范围:
var id=1001;
let json={
id:2002,
show:function(){
setTimeout(()=>{
console.log(this.id)//2002
},2000)
}
}
json.show()
//箭头函数的this指向是定义函数所在的对象。
//用了箭头函数,this是指向它所在的箭头函数范围。
箭头函数内部的
this
是词法作用域,由上下文确定。
使用new操作符
箭头函数***不能***用作构造器,和 new
一起用会抛出错误。
var fn = () => {};
var fn = new fn(); // TypeError: fn is not a constructor
使用prototype属性
箭头函数***没有***prototype
属性。
var fn = () => {};
console.log(fn.prototype); // undefined
以上,就是通过几个例子分析了箭头函数的基本用法,箭头函数在以后的使用中十分重要。