本节内容:
javascript中this的用法
本文尝试以一种简易的方式阐述JavaScript中this的用法,希望对大家关于JavaScript中this用法的快速理解有所帮助。
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(); 
}
 
您可能感兴趣的文章:
分享:js函数中this关键字对变量作用域的影响
javascript函数内部的this对象
javascript对象之this、currentTarget和target
javascript中this对象的例子
JS显示当前(this)控件字符串及this用法详解
解析Javascript的this用法
javascript面向对象之this用法举例
javascript面向对象编程之this详解