5分钟理解JavaScript中this用法分享
5分钟理解JavaScript中this用法分享
发布时间:2016-12-30 来源:查字典编辑
摘要:前言关于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" />

<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" />

<script type="text/javascript">

var button = document.getElementById("aButton");

function demo() {

this.value = Math.random();

}

alert(button.onclick);

</script>

得到的输出是:

复制代码 代码如下:

function onclick() {

demo();

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类