ES6新增-箭头函数与普通函数的区别
作者:互联网
//箭头函数:ES6中函数的另一种写法
// 写法:函数名=()=>{}
// 箭头函数主要解决this问题,它的this是离它最近的嵌套的function/方法这个函数的调用者﹑直到顶层都没有则this就是window
var obj={
name : "karen",say :furtion()i
var fn=(a)=>{
console.log(this,1111)//箭头函数的this看离箭头函数最近的say函数的调用者
return 108
}
fn(2) //fn函数是window调用的
}
}
obj.say() //say函数的调用者为obj
注意1:可省略{}
//当执行体只有一个表达式,就可省略{},作为函数的返回值
var fn2=(a,b)=>a*b
注意2:可以省略()
//当形参只有一个时,也可以省略()
点击查看代码
<details>
<summary>点击查看代码</summary>
</details>
var fn3=a=>a*a
注意3:不能用作创建对象
//不能用作创建对象,即this会出错
var obj={
name : "karen",say :furtion()i
var fn=(a)=>{
console.log(this,1111)//箭头函数的this看离箭头函数最近的say函数的调用者
return 108
}
fn(2) //fn函数是window调用的
}
}
var obj=new fn()
注意4:箭头函数的arguments没有效果
//箭头函数的arguments没有效果,直接使用...rest接收
var fn=(a,...x1)=>{
console.log(x1)//[20,30]
//console.log(arguments)//报错,arguments没有定义
}
// var fn=(...x1,a)=>{ //错误写法 剩余参数必放最后一个
console.log(x1)
}
fn(10,20,30)
箭头函数的call、bind方法
var fn=()=>{
consoLe.log(this)
}
var obj={name : "karen "}
fn.call(obj)//不会报错但是也改变不了内部的this
//bind不能绑定箭头函数this的对象,语法错误
这样设计this的目的:处于业务的需要,当需要将箭头函数内部的this设置为与嵌套箭头函数的那个函数的调用者一样时
例如:
点击查看代码
function tool(cb){
cb()
}
var obj={
name:"karen",
say:function(){
console.log(this.name)
},
eat:function(){
// var that=this;
// tool(function(){
// console.log(that.name+"吃饭",111)
// })
tool(()=>{
console.log(this.name+"吃饭",111)
})
}
}
obj.say()
obj.eat()
箭头函数面试题答法:
//要有个箭头
//箭头的前面是小括号,放形参,只有一个形参的时候可以省略小括号;
//箭头的后面是函数体;
//如果函数体只有一个语句,没有0,此时的返回值不需要return;-箭头函数里面的this总是指向最靠近的function内部的this;l/-对象里面的方法,尽可能不要使用箭头函数;
//箭头函数里面没有arguments,可以使用...reset,接收过来就是数组类型,接收的是形参之外:
标签:ES6,obj,函数,箭头,var,fn,log 来源: https://www.cnblogs.com/xuawei/p/16469491.html