click事宜的履行回调琅绫擎this不是指向了DrawTool的实例了,所以琅绫擎的this.points将会返回undefined。第一种解决办法是应用闭包,先把this缓存一下,变成that:
- class DrawTool {
- constructor() {
- this.points = [];
- }
- handleMouseClick(event) {
- this.points.push(event.latLng);
- }
- init() {
- let that = this;
- $map.on('click', event => that.handleMouseClick(event));
- }
- }
因为回调函数是用that履行的,而that是指向DrawTool的实例子,是以就没有问题了。相反如不雅没有that它就用的this,所以就要看this指向哪里了。
因为我们用了箭头函数,而箭头函数的this照样指向父级的高低文,是以这里不消本身创建一个闭包,直接用this就可以:
同时可以应用Object.isFrozen、Object.isSealed、Object.isExtensible断定当前对象的状况。
- init() {
- $map.on('click',
- event => this.handleMouseClick(event));
- }
这个bind看起来似乎很神奇,但其实只要一行代码就可以实现一个bind函数:
这种方法加倍简单,第二种办法是应用ES5的bind函数绑定,如下代码:
- init() {
- $map.on('click',
- this.handleMouseClick.bind(this));
- }
- Function.prototype.bind = function(context) {
- return () => this.call(context);
- }
就是返回一个函数,这个函数的this是指向的原始函数,然后让它call(context)绑定一下履行高低文就可以了。
撙节的目标是为了不想触发履行得太快,如:
- 监听input触发搜刮
- 监听resize做响应式调剂
- 监听mousemove调剂地位
4. 柯里化
怎么实现一个撙节呢,书里是这么实现的:
- function add(a, b) {
- return a + b;
- }
- let add1 = add.curry(1);
- console.log(add1(5)); // 6
- console.log(add1(2)); // 3
怎么实现如许一个curry的函数?它的重点是要返回一个函数,这个函数有一些闭包的变量记录了创建时的默认参数,然后履行这个返回函数的时刻,把新传进来的参数和默认参数拼一下变成完全参数列表去调本来的函数,所以有了以下代码:
推荐阅读
深度进修在2006年开端崭露头脚后,近几年取得了飞速的成长,无论是学术研究照样企业应用均出现出指数级增长的趋势;伴跟着这项技巧的赓续成熟,深度进修在智能语音范畴率先发力,取得一系列>>>详细阅读
本文标题:JS高级程序设计高级技巧
地址:http://www.17bianji.com/lsqh/37133.html
1/2 1

网友点评
精彩导读
科技快报
品牌展示