美诚资源网

箭头函数常见的4种错误使用场景,这样修改它们,马上避免误区

admin 86

参考:

1.定义对象方法

JS中对象方法的定义方式是在对象上定义一个指向函数的属性,当方法被调用的时候,方法内的this就会指向方法所属的对象。

1.1定义字面量方法

错误示范:

使用箭头函数来定义,但是调用的时候会抛出TypeError,因为运行时是未定义的,调用的时候,执行上下文里面的this仍然指向的是window,原因是箭头函数把函数上下文绑定到了window上,等价于,显然后者是未定义的。

解决的办法是,使用函数表达式来定义方法,确保this是在运行时是由包含它的上下文决定的

这样就变成了普通函数,执行时this就指向calculator对象,自然能得到正确的计算结果。

1.2定义原型方法

同样的规则适用于原型方法(prototypemethod)的定义,使用箭头函数会导致运行时的执行上下文错误

使用传统的函数表达式就能解决:

sayCatName变成普通函数之后,被调用时的执行上下文就会指向新创建的cat实例。

2.定义事件回调函数

this是JS中很强大的特性,可以通过多种方式改变函数执行上下文,JS内部也有几种不同的默认上下文指向,但普适的规则是在谁调用函数this就指向谁。

但是,箭头函数在声明的时候就绑定了执行上下文,要动态改变上下文是不可能的,在需要动态上下文的时候它的弊端就凸显出来。比如在客户端编程中常见的DOM事件回调函数(eventlistenner)绑定,触发回调函数时this指向当前发生事件的DOM节点,而动态上下文这个时候就非常有用,比如下面这段代码试图使用箭头函数来作事件回调函数:

在全局上下文下定义的箭头函数执行时this会指向window,当单击事件发生时,浏览器会尝试用button作为上下文来执行事件回调函数,但是箭头函数预定义的上下文是不能被修改的,这样就等价于,而后者是没有任何意义的。

使用函数表达式就可以在运行时动态的改变this,修正后的代码:

当用户单击按钮时,事件回调函数中的this实际指向button,这样的='Clickedbutton'就能按照预期修改按钮中的文字。

3.定义构造函数

构造函数中的this指向新创建的对象,当执行newCar()的时候,构造函数Car的上下文就是新创建的对象,也就是说thisinstanceofCar===true。显然,箭头函数是不能用来做构造函数,实际上JS会禁止你这么做,如果你这么做了,它就会抛出异常。

构造新的Message实例时,JS引擎抛了错误,因为Message不是构造函数。:

4.追求过短的代码

multiply函数会返回两个数字的乘积或者返回一个可以继续调用的固定了一个参数的函数。代码看起来很简短,但大多数人第一眼看上去可能无法立即搞清楚它干了什么,怎么让这段代码可读性更高呢?有很多办法,可以在箭头函数中加上括号、条件判断、返回语句,或者使用普通的函数:

5.总结

箭头函数无疑是ES6带来的重大改进,在正确的场合使用箭头函数能让代码变的简洁、短小,但某些方面的优势在另外一些方面可能就变成了劣势,在需要动态上下文的场景中使用箭头函数你要格外的小心,这些场景包括:定义对象方法、定义原型方法、定义构造函数、定义事件回调函数。