button执行onclick函数_箭头函数常见的4种错误使用场景，这样修改它们，马上避免误区...

参考&＃xff1a;https://zhuanlan.zhihu.com/p/26540168

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

1.1 定义字面量方法

错误示范&＃xff1a;

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

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

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

1.2 定义原型方法

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

使用传统的函数表达式就能解决&＃xff1a;

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

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

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

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

使用函数表达式就可以在运行时动态的改变 this&＃xff0c;修正后的代码&＃xff1a;

当用户单击按钮时&＃xff0c;事件回调函数中的 this 实际指向 button&＃xff0c;这样的 this.innerHTML &＃61; &＃39;Clicked button&＃39; 就能按照预期修改按钮中的文字。

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

构造新的 Message 实例时&＃xff0c;JS 引擎抛了错误&＃xff0c;因为 Message 不是构造函数。&＃xff1a;

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

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

欢迎关注。