再次谈论Javascript中的this

时间：2021-05-26

　一直对Javascript中的this都有一种似是而非的感觉，今天突然感觉豁然开朗，特此记录一下。

咱们先看个栗子：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>this的使用</title><script type="text/javascript">var Car,tesla;Car=function () {this.start=function(){console.log('car started');};this.turnKye=function () {var carKey=document.getElementById('car_key');carKey.onclick=function () {this.start(); };}return this;}tesla=new Car();tesla.turnKye();</script></head><body><input type="button" id="car_key" value="test" /></body></html>

咋一看这段代码没有什么问题，但是由于对于this的错误理解最终导致错误的结果。我们在元素car_key上面绑定了click事件，认为在car的类中嵌套绑定click事件就可以让这个dom元素访问car的this上下文。这种方式看起来很合理，但是不幸的是它并不工作。

在Javascript中，this关键字总是指向正执行的作用域的所有者。

　　请大家仔细揣摩上面那句话。正如我们所知，函数调用会产生新的作用域，一点onclick事件被触发，this就指向了dom元素而不是Car的类。

　　那我们怎么做才会让它能正常工作呢？我们通常会把this赋值给一个局部的自由变量(比如that,_this,self,me等，这个在许多的框架里面都有体现）来避开作用域带来的问题。这里使用局部变量来重写之前的方法：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>this的使用</title></head><body><input type="button" id="car_key" value="test" /><script type="text/javascript">var Car,tesla;Car=function () {this.start=function(){console.log('car started');};this.turnKye=function () {var that=this;var carKey=document.getElementById('car_key');carKey.onclick=function () {that.start(); };}return this;}tesla=new Car();tesla.turnKye();</script></body></html>

　　由于that是一个自由变量，onclick事件的出发并不会引起它的重新定义。

　 如果你熟悉ES6的话可以使用胖箭头符号，这更简洁和更容易理解，如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>this的使用</title></head><body><input type="button" id="car_key" value="test" /><script type="text/javascript">var Car,tesla;Car=function () {this.start=function(){console.log('car started');};this.turnKye=function () {//var that=this;var carKey=document.getElementById('car_key');//carKey.onclick=function () {// that.start(); //};carKey.onclick=()=>this.start();}return this;}tesla=new Car();tesla.turnKye();</script></body></html>

当然我们也可以使用绑定函数的方法来解决这个问题：如下

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>this的使用</title></head><body><input type="button" id="car_key" value="test" /><script type="text/javascript">var Car,tesla;Car=function () {this.start=function(){console.log('car started');};var click=function(){this.start(); }this.turnKye=function () {//var that=this;var carKey=document.getElementById('car_key');carKey.onclick=click.bind(this);}return this;}tesla=new Car();tesla.turnKye();</script></body></html>

其实这些在学习React的时候，绑定事件的时候遇到的坑，那时候只知道这么写，不知道怎么回事，今天突然感觉豁然开朗。希望对大家有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章