javascript里的this用法指正
发布网友
发布时间：2022-04-21 01:07
共1个回答
热心网友
时间：2022-04-18 02:40
<style>
div {background-color:black;
width:50px;
height:50px;
margin:20px;
}
.state1 {
background-color:blue;
}
.state2 {
background-color:red;
}
</style>
<script>
function Test(div) {this.counter = true;
this.div = div;
var _this = this;
//this.div.onclick=_this.onclick(); <-----问题在这
this.div.onclick = function () {
_this.onclick.call(_this);
};
};
Test.prototype.onclick = function() {
if(this.counter){
this.div.className = "state1";
}
else {
this.div.className = "state2";
}
this.counter = !this.counter;
};
window.onload = function() {
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var ot1 = new Test(oDiv1);
var ot2 = new Test(oDiv2);
};
</script>
根据你的意图，你的代码应该有2处需要用到this，一个是构造函数，一个是onclick的绑定事件函数：
构造函数内this指向实例；
绑定事件函数this指向触发事件的dom；
但是实际上你的代码有三处用到了this。
构造函数内this指向实例；
原型成员函数this指向实例；
绑定事件函数this指向触发事件的dom；
所以代码产生了一些多余的现象（2个div都变蓝），让你的概念稍微混乱了一下。
之所以会触发原型成员函数是因为你在注释行：this.div.onclick=_this.onclick(); 出现了问题。
使用onclick绑定事件函数的用法是：[object Element].onclick = [object Function];
比如：document.getElementById('ele').onclick = clickFunction; function clickFunction(){};
所以你需要赋值的是一个函数: _this.onclick;
而不是一个函数调用: _this.onclick(); 这个在以后写代码需要注意。
点击无效果的原因也是上述原因，为事件绑定一个函数，触发事件的时候会调用函数；
然后你赋值的是一个函数调用 =>> 函数调用会返回一个返回值，无返回值则返回undefined =>> 触发事件的时候没有检测到函数 =>> 自然后不执行任何代码 =>> 所以点击无效果
之所以需要多一个function，然后执行call，是因为你的Test.prototype.onclick需要用到实例的其他属性。那么this则需要指向实例而不是触发事件的dom元素。但是绑定事件函数的this一定指向dom元素，所以需要多一个function处理this指向dom，调用Test.prototype.onclick的时候需要通过call强行指向实例。
完毕。
