脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 理解JavaScript中this用法

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

 更新时间：2013年11月09日 15:15:41   作者：  
这篇文章介绍了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）情况：
复制代码 代码如下:

<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();
}

您可能感兴趣的文章:

相关文章

  • JavaScript中for..in循环陷阱介绍

    JavaScript中for..in循环陷阱介绍

    for...in循环中的循环计数器是字符串，而不是数字它包含当前属性的名称或当前数组元素的索引，下面有个不错的示例大家可以参考下
    2013-11-11
  • 微信小程序监听用户登录事件的实现方法

    微信小程序监听用户登录事件的实现方法

    这篇文章主要介绍了微信小程序监听用户登录事件的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 一定有你会用到的JavaScript一行代码实用技巧总结

    一定有你会用到的JavaScript一行代码实用技巧总结

    这篇文章主要为大家介绍了一定有你会用到的JavaScript一行代码总结，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • JS绘图Flot如何实现动态可刷新曲线图

    JS绘图Flot如何实现动态可刷新曲线图

    这篇文章主要介绍了JS绘图Flot如何实现动态可刷新曲线图,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • 8个绝妙的JS字符串处理技巧分享

    8个绝妙的JS字符串处理技巧分享

    当处理JavaScript字符串时,有许多有趣的技巧可以提高你的编码效率,这篇文章将介绍一些有关JavaScript字符串的技巧,让你在字符串操作方面更加娴熟
    2023-10-10
  • 微信小程序开发篇之踩坑记录

    微信小程序开发篇之踩坑记录

    这篇文章主要给大家介绍了关于微信小程序开发篇之踩坑记录的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • javascript 实现的类似hao123的多邮箱登录效果

    javascript 实现的类似hao123的多邮箱登录效果

    javascript 实现的类似hao123的多邮箱登录效果...
    2007-08-08
  • JS交换变量的方法

    JS交换变量的方法

    这篇文章主要介绍了JS交换变量的方法,实例分析了javascript通过自定义函数实现变量交换的使用技巧,需要的朋友可以参考下
    2015-01-01
  • yepnope.js 异步加载资源文件

    yepnope.js 异步加载资源文件

    yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本，可以在页面上仅加载用户需要的js/css。
    2011-09-09
  • js实现同一页面可多次调用的图片幻灯切换效果

    js实现同一页面可多次调用的图片幻灯切换效果

    这篇文章主要介绍了js实现同一页面可多次调用的图片幻灯切换效果,可实现在同一页面中多次调用幻灯切换效果,非常具有实用价值,需要的朋友可以参考下
    2015-02-02

最新评论