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 相关文章推荐
用javascript来实现动画导航效果的代码
Dec 16 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
微信小程序如何使用云开发
May 17 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
JavaScript实现图片放大预览效果
Nov 02 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在线生成ico文件的代码
2007/10/09 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
php防止sql注入代码实例
2013/12/18 PHP
php 购物车完整实现代码
2014/06/05 PHP
php截取中文字符串函数实例
2015/02/23 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
javascript读取xml
2006/11/04 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
python实现超简单端口转发的方法
2015/03/13 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
幼儿园的门卫岗位职责
2014/04/10 职场文书
财务检查整改报告
2014/11/06 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python