ES6新增——箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是:

参数 => 函数体
(参数) => {函数体}

var fn = (x, y) => {
				console.log(this)
				return x + y
			}

这就是我们的ES6新增的箭头函数

可以从上面看到的是少了构造函数的function,然后多了一个箭头指向我们的函数的代码块

!!!特别注意的是如果我们的参数只有一个的时候可以写成如下情况!!!

fn=x=》{}

参数就不用再写小括号了 

!!!如果箭头函数的执行体只有一个表达式 就是返回值  那么可以省略大括号!!!

var fn2=(a,b)=>a*b

然后我们来讨论的箭头函数和一般的函数更大的区别

就是箭头函数的this问题

var obj={
				name:"karen",
				say:function(){
					var fn=(a)=>{
						console.log(this,1111)
						

					}
					var fm=function(){
						console.log(this,2222)
					}
					fm()
				
					fn(2)//fn函数是谁调用者 window
				}
			}
			obj.say()//调用者obj

可以看到的是一个是我们的箭头函数,一个是我们正常构造早的函数,而函数内部也基本相似但是为什么this的对象不一样 

function tool(ad){
				ad()
			}
			var obj={
				name:"bob",
				say:function(){
					console.log(this.name)
					
				},
				makeMoney:function(){
					// var that=this;
					tool(function(){
						console.log(this.name+"吃了饭",111)
					})										
					// tool(()=>{
					// 	console.log(this.name+"吃了饭",111)
					// })
				}
			}
			obj.makeMoney()
            //吃了饭 111

可以从结果得知我们想要的效果并没有出现,this.name没有生效因为我们使用的回调函数 函数具体是在我们代码的第二行运行的,所以this对象是Windows,用es5的方法来解决这个问题就是在这个函数之外使用一个变量把当时的环境保存下来,然后再在代码中使用

但ES6中的箭头函数中的this直接就是指向的这是这个obj对象 为什么呢?

原因:箭头函数体中的 this 对象,是定义函数时的对象,而不是使用函数时的对象。

这也导致了一个问题!

我们无法使用箭头函数去构造对象也是因为this的问题

箭头函数没有argument属性,那用什么来保存实参个数呢?

使用...来接受:箭头函数里面没有arguments,可以使用…reset,接收过来就是数组类型,接收的是形参之外的所有的实参

举个例子

var show = (a, b, ...reset) => {
	console.log(a + b);
	console.log(reset);
}
show(1, 2, 3, 4, 5);

箭头函数总结

  • 要有个箭头

  • 箭头的前面是小括号,放形参,只有一个形参的时候可以省略小括号;

  • 箭头的后面是函数体;

  • 如果函数体只有一个语句,没有{},此时的返回值不需要return;

  • 箭头函数里面的this总是指向最靠近的function 内部的this;

  • 对象里面的方法,尽可能不要使用箭头函数;

  • 箭头函数里面没有arguments,可以使用…reset,接收过来就是数组类型,接收的是形参之外的所有的实参;

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值