ES6学习笔记(2)箭头函数

本文探讨箭头函数在ES6中的应用,它解决了JavaScript中this绑定的问题,提供了简洁的语法。在严格模式下,箭头函数的this不再能指向全局对象,而是始终保持定义时的上下文。这避免了传统函数中this动态绑定带来的困扰。同时,箭头函数有其特定限制,如不能用作构造函数,不支持arguments对象,以及不能包含yield命令。使用箭头函数旨在提升代码可读性和确定性。

在学习箭头函数之前要先了解的是箭头函数解决了什么问题。

在这里要注意的是js的严格模式

因为使用babel进行打包的文件是在严格模式下运行的,所以在一些条件下跟我们在一些书上看到的观测到的实际上可能有一点的不同。

这里要注意的是

在严格模式下,this不能被指定为window,也就是在全局下的

function fnc(clg this.z)

将不会输入undefined,而是直接报错。


箭头函数的出现解决了哪些问题?

第一,简化了写法,使用箭头函数可以使得我们的代码量减少,而且更加的直观,这种情况特别适用于函数体只有一行的函数,传统的写法因为为了可读性,一般的函数最少都有三条,即使他只是返回一个字面值而已。

第二、明确了this。传统js的this有一个问题,就是他的this是在运行的时候确定的,而不是在定义的时候确定的,也就是说,箭头函数的this是确定的,不能被改变,也不能被call,apply,bind这些进行修改。

那么箭头函数的this永远指向哪里呢?永远指向上一个不是箭头函数的函数的this

var zz=100;

var a={
zz:10,
show:()=>{
console.log(this.zz);
}
}
a.show();
var fn=a.show;
fn();

这个箭头函数的this永远指向window,所以值一直是100

但是因为严格模式的原因,这段代码直接在浏览器中运行的效果跟在js文件中的效果会存在差异

但是如果我们使用的是一般的函数模式

那么a.show()的结果就是10,因为那个时候this是指向当前对象的。

其根本原因是因为箭头函数根本就没有自己的this,因此他的this就是外层的this,因为js的机制,所以指向的是一个非箭头函数的函数的作用域。

那么我们有没有办法让对象里面的函数一直指向自己呢?

这个还是可以通过闭包来进行解决


let a={
zz:10,
show:function(){
return ()=>{
console.log(this.zz);
}
}
}



可以来说一下箭头函数的一些机制

1、函数体内部的this对象就是定义的时候所在的对象而不是使用时所在的对象

2、不可以当作构造函数来进行使用,也就是不能new

3、不可以使用arguments对象,该对象在函数体内不存在,如果要用,可以使用rest参数

4、不可以使用yield命令,因此箭头函数不能做Generator函数

所以使用箭头函数一是为了少打点代码,让代码结构更加的清晰。二是为了明确运行的时候this到底指向谁,而不是在运行的时候去做this的判断。




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值