javascript中的 this 的指向不太好控制,理解不好的话很容易错误
下面几个示例可以加深对this指向的理解
(1)内联事件
<a href="#" onclick="alert(this.tagName)">
click me
</a>
这种情况可以正常弹出a
<a href="JavaScript:alert(this.tagName)">
click me2
</a>
这样就不行了,会弹出 "undefined"
因为使用 JavaScript: 相当于定义了一个全局函数,this则指向 window对象
如果定义一个全局变量,如
var tagName = 'tag name';
再点击’click me2‘时就会弹出 'tag name'
(2)setTimeout和setInterval
//全局变量
var name = "全局";
var duang = {
name: "局部",
hi: function() { alert("我是 " + this.name); }
};
duang.hi();
执行结果为“我是 局部”
setTimeout( duang.hi, 1000);
setInterval( duang.hi, 1000);
这两种情况都会弹出“我是 全局”
因为setTimeout和setInterval都会改变this的指向为window
(3)Dom节点.on×××
<button id="btn" name="button">
btn
</button>
var btn = document.getElementById("btn");
var duang = {
name: "duang",
hi: function() { alert("I'm " + this.name); }
};
btn.onclick = duang.hi;
点击按钮后,并没弹出duang的name属性值,而是弹出了button的name属性
说明这种方法会使this指向dom节点本身
如果想this指向duang对象,可以使用匿名函数解决
btn.onclick = function (){
duang.hi();
}
上面的setTimeout和setInterval情况也可以使用此方法处理
setTimeout( function (){ duang.hi();}, 1000);
setInterval( function (){ duang.hi();}, 1000);
可以看到,这种直接调用和通过匿名函数间接调用 对this的指向影响很大,开发时需要特别注意
(4)call和apply
接着上面的例子,改动一下调用方式
<button id="btn" name="button">
btn
</button>
var name = "全局";
var btn = document.getElementById("btn");
var duang = {
name: "duang",
hi: function() { alert("I'm " + this.name); }
};
btn.onclick = function (){
duang.hi.call();
}
这里使用了匿名函数,但是通过call方法调用了duang对象的hi函数
这时的点击结果为 "I'm 全局",说明this指向了window对象
注意,使用call和apply调用方法时,this的指向会被改为window