栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

5分钟理解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)情况:
复制代码 代码如下:



点击这个button之后,你会发现按钮的value值没有改变。
原因:在本代码运行的情况下this指向的是window对象。
复制代码 代码如下:



点击这个button之后,程序可正常执行。
(2)原因解释:
复制代码 代码如下:



得到的输出是:
复制代码 代码如下:
function demo() {
    this.value = Math.random();
}


复制代码 代码如下:



得到的输出是:
复制代码 代码如下:
function onclick() {
    demo();
}

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/109667.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号