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


Posted in Javascript onNovember 09, 2013

前言
关于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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
Mac地址验证的javascript代码
Nov 09 #Javascript
详解jquery uploadify 上传文件
Nov 09 #Javascript
深入理解Javascript中的循环优化
Nov 09 #Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 #Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 #Javascript
window.onresize 多次触发的解决方法
Nov 08 #Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 #Javascript
You might like
PHP语法速查表
2007/01/02 PHP
PHP 编程的 5个良好习惯
2009/02/20 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
Python正则表达式经典入门教程
2017/05/22 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
回门宴答谢词
2014/01/13 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis