ES6新增-箭头函数与普通函数的区别

文章结构:

1,箭头函数的写法

2,四个注意

可省略{}
可以省略()
不能用作创建对象
箭头函数的arguments没有效果
箭头函数的call、bind方法无法改变this

## 1 箭头函数: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，接收过来就是数组类型，接收的是形参之外: