一种简易的方式阐述JavaScript中this的用法
2012-09-29 14:27 呆河马 阅读(212) 评论(0) 编辑 收藏 举报1. this用法实例
window.color = “red”; var o = { color: “blue” }; function sayColor(){ alert(this.color); } sayColor(); //”red” o.sayColor = sayColor; o.sayColor(); //”blue”
2. this用法简易理解
this指向哪里:
this运行的环境(the context object),或者简单理解为:this所在函数被调用时的当前作用域。
一段实例代码立刻明白:
var fun = function() { console.log(this); } fun();// console: window,fun 的执行context为window,即this所在函数(fun())被调用时的当前作用域为window。 new fun();//console: fun,fun 的执行context为fun对象内,即this所在函数(fun())被调用时的当前作用域为fun对象内。
3. this用法的一个特殊情况
(1)情况:
<input type="button" id="aButton" value="demo" onclick="demo()" /> <script type="text/javascript"> function demo() { this.value = Math.random(); } </script>
点击这个button之后,你会发现按钮的value值没有改变。
原因:在本代码运行的情况下this指向的是window对象。
<input type="button" id="aButton" value="demo" /> <script type="text/javascript"> var button = document.getElementById("aButton"); function demo() { this.value = Math.random(); } button.onclick= demo; </script>
点击这个button之后,程序可正常执行。
(2)原因解释:
<input type="button" id="aButton" value="demo" /> <script type="text/javascript"> var button = document.getElementById("aButton"); function demo() { this.value = Math.random(); } button.onclick= demo; alert(button.onclick); </script> 得到的输出是: function demo() { this.value = Math.random(); }
<input type="button" id="aButton" value="demo" onclick="demo()" /> <script type="text/javascript"> var button = document.getElementById("aButton"); function demo() { this.value = Math.random(); } alert(button.onclick); </script> 得到的输出是: function onclick() { demo(); }
4. 参考学习资料(1)JavaScript for Web Developers,Third Edition,Nicholas C. Zakas
(2)http://www.cnblogs.com/ruxpinsp1/archive/2008/04/20/1162463.html