教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 详解JavaScript中this的用法

详解JavaScript中this的用法

发布时间:2015-03-01   编辑:jiaochengji.com
本文介绍下,JavaScript中this的用法,有兴趣的朋友可以参考下,希望对你理解与掌握javascript中this的用法,有一定的帮助。

本节内容:
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();
}
 

您可能感兴趣的文章:
php 文件下载类(header头信息的应用实例)
详解JavaScript中this的用法
对于this和$(this)的个人理解
javasrcipt 面向对象编程的例子
JavaScript中this关键字用法详解
详解js和jquery里的this关键字
javascript面向对象之this用法举例
javascript中匿名函数调用的多种方法
javascipt面向对象扩展的例子
javascript技术难点(三)之this、new、apply和call详解

关键词: js this的用法   
[关闭]
~ ~