脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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();
}

您可能感兴趣的文章:

相关文章

  • fetch 使用及如何接收JS传值

    fetch 使用及如何接收JS传值

    这篇文章主和要介绍了fetch 使用及如何接收JS传值,文中给大家提到了fetch基本使用方式和接收js传值的使用方式,需要的朋友可以参考下
    2017-11-11
  • ES6知识点整理之函数对象参数默认值及其解构应用示例

    ES6知识点整理之函数对象参数默认值及其解构应用示例

    这篇文章主要介绍了ES6知识点整理之函数对象参数默认值及其解构应用,结合实例形式分析了ES6函数对象参数相关使用技巧,需要的朋友可以参考下
    2019-04-04
  • node.js Web应用框架Express入门指南

    node.js Web应用框架Express入门指南

    这篇文章主要介绍了node.js Web应用框架Express入门指南,从安装到各种技术的应用,都进行了讲解,是一篇不错的Express入门教程,需要的朋友可以参考下
    2014-05-05
  • javascript实现京东登录显示隐藏密码

    javascript实现京东登录显示隐藏密码

    这篇文章主要为大家详细介绍了javascript实现京东登录显示隐藏密码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • js类的继承定义与用法分析

    js类的继承定义与用法分析

    这篇文章主要介绍了js类的继承定义与用法,结合实例形式分析了javascript关于类的定义与继承的相关使用技巧,需要的朋友可以参考下
    2019-06-06
  • JavaScript容错例外处理

    JavaScript容错例外处理

    程序开发中，编程人员经常要面对的是如何编写代码来响应错误事件的发生，即例外处理（exception handlers）。
    2008-06-06
  • uniapp小程序使用高德地图api实现路线规划的示例代码

    uniapp小程序使用高德地图api实现路线规划的示例代码

    路线规划常用于出行路线的提前预览，我们提供4种类型的路线规划，分别为：驾车、步行、公交和骑行，满足各种的出行场景，这篇文章主要介绍了uniapp小程序使用高德地图api实现路线规划,需要的朋友可以参考下
    2023-01-01
  • js数组去重的N种方法(小结)

    js数组去重的N种方法(小结)

    本文给大家收藏整理了js数组去重的n种方法，大家可以根据自己需要选择比较好的方法，感兴趣的朋友一起看看吧
    2018-06-06
  • js实现非常棒的弹出div

    js实现非常棒的弹出div

    这篇文章主要为大家详细介绍了js实现非常棒的弹出div，具有一定的参考价值，感兴趣的朋友可以参考一下
    2016-10-10
  • greenbrower用到的function.js代码集合

    greenbrower用到的function.js代码集合

    这篇文章给大家介绍了greenbrower用到的function.js代码集合，感兴趣的朋友一起看看吧
    2007-12-12

最新评论