JS中控制好this关键字的指向

时间:2022-05-06
本文章向大家介绍JS中控制好this关键字的指向,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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