5分钟理解JavaScript中this用法分享

前端技术 2023/09/06 JavaScript

前言
关于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();
}

本文地址：https://www.stayed.cn/item/15789

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案