箭头函数提供了一种更加简洁的函数书写方式。
基本语法是:参数 => 函数体 (参数) => {函数体}
//普通函数
var f = function(a){
return a;
}
f(1); //1
//箭头函数
var f = a => a
f(10); //10
语法注意事项 1、当箭头函数没有参数或者有多个参数,要用 () 括起来。
2、当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。
3、当箭头函数要返回对象的时候,为了区分于代码块,要用 () 将对象包裹起来
var fn2=(a,b)=>a*b
console.log(fn2(2,6)) //12
var f = (a, b) => {
let result = a + b;
return result;
}
console.log( f(6, 2)); // 8
var f = (id, name) => ({ id: id, name: name });
f(6, 2); // {id: 6, name: 2}
箭头函数中识别不了this(是离它最近的嵌套的 function/方法这个函数的调用者 直到顶层都没有就是window)
var a = () => {
console.log(this);
}
a(11); //window ,箭头函数里面没有 this 对象,此时的 this 是外层的 this 对象,即 Window
var obj = {
say: function () {
fn = a => {
a++
console.log(this, a)
}
fn(2)
}
}
obj.say() //{say: ƒ} 3,此时的this指向最近的function
在es5以前 ,我们会经常使用var self = this 这样的代码,为了将外部 this 传递到回调函数中,那么有了箭头函数,就不需要这样做了,直接使用 this 就行。
function tool(cb){
cb()
}
var obj={
name:"karen",
makeMoney:function(){
// var self=this;
// tool(function(){
// console.log(self.name+"赚了钱",111)
// })
tool(()=>{
console.log(this.name+"赚了钱",111)
})
}
}
obj.makeMoney()//karen赚了钱 111
call方法去劫持依然改变不了内部this
var fn=()=>{
console.log(this)
}
var obj={name:"karen"}
fn.call(obj)//不会报错 但是也改变不了内部的this
箭头函数里面没有arguments,可以使用…reset,接收过来就是数组类型,接收的是形参之外的所有的实参;
var fn=(a,...x1)=>{
console.log(a)
console.log(x1)
// console.log(arguments),会报错
}
fn(1,2,3,4,5,) //1 [2, 3, 4, 5]
错误写法:var fn=(...x2,b)=>{
console.log(a)
console.log(x1)
// console.log(arguments),会报错
}
fn(1,2,3,4,5,) //报错,剩余参数必放最后一个
注意:箭头函数不可以作为构造函数,也就是不能使用 new 命令来创建对象,否则会报错
var fn=(a)=>{
console.log(this,this.a=a)
}
var f1=new fn(10) //报错
function fn(a){
console.log(this,this.a=a)
}
var f1=new fn(10) //fn {a: 10} 10
总结(背下来)
-
要有个箭头
-
箭头的前面是小括号,放形参,只有一个形参的时候可以省略小括号;
-
箭头的后面是函数体;
-
如果函数体只有一个语句,没有{},此时的返回值不需要return;
-
箭头函数里面的this总是指向最靠近的function 内部的this;
-
对象里面的方法,尽可能不要使用箭头函数;
-
箭头函数里面没有arguments,可以使用…reset,接收过来就是数组类型,接收的是形参之外的所有的实参;