【TypeScript】Class中dom元素监听事件的this指向问题

前言

我们都知道this这个关键字在ts中可以说是不建议使用的
或者应该说是被废弃了？
但是在用Ts编写Class的时候，this关键字是可以使用的，表示的是这个类自己。
我们可以在Class中通过，例如this.xxx，来访问这个类下的xxx这个属性。

---

引入

在使用Ts写类(Class)的时候，dom元素事件监听的时候要注意！！！
见以下场景：

class Demo {
	private test = 0;

	constructor(public dom: HTMLElement){
		console.log(this.test);
		dom.addEventListener('mousedown', this.onMousedown);
	}

	onMousedown(){
		console.log(this.test); // 控制输出的是undefined
	}
}

上面这这个例子稍微想一下就为打印的是undefined了
原因就是Ts中的this的指向问题。
因为在ts的一般的编码过程中，是不允许你使用this关键字的，Class虽然是个例外，但是当遇到上面这种的“嵌套函数问题”，这个this的指向你就得弄弄清楚了。

等价代码、发现问题

前面的代码等价于这样写：

class Demo {
	private test = 0;

	constructor(public dom: HTMLElement){
		console.log(this.test);
		dom.addEventListener('mousedown', function onMousedown(){
			// ts会提示报错 || 忽略错误之后 控制台输出的是undefined
			console.log(this.test);
		});
	}
}

这两种写法是等价的，但是这种写法Ts的编译器会找到问题所在，而前面的那种却不会有错误提示。
有经验的伙伴如果知道这块ts的知识点的话，应该就知道怎么解决了——使用匿名函数。

代码修正

修正代码如下：

class Demo {
	private test = 0;

	constructor(public dom: HTMLElement){
		console.log(this.test);
		dom.addEventListener('mousedown', ()=>{
			// ts不会报错 并且控制台输出的是正确的
			console.log(this.test);
		});
	}
}

抽离封装

class Demo {
	private test = 0;

	constructor(public dom: HTMLElement){
		console.log(this.test);
		dom.addEventListener('mousedown', this.onMousedown);
	}
	
	onMousedown = ()=>{
		console.log(this.test);
	}
}

总结

在Ts编码的时候，This的指向要弄清楚(或许这就是Es6的规则？)：

• function func(){}：这类函数的this的指向是函数自己
• ()=>{}：这类函数内部没有this关键字，在Class的编写中，如果一个函数需要获取class一些参数，请使用这种函数方式（匿名函数）！

---

补充

function func(){}这种函数，可以通过func.bind(this)，实现func这个函数内部的this指向上层环境中的this，上面的那个例子也可以通过这个方式修正代码。