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 相关文章推荐
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
Vite + React从零开始搭建一个开源组件库
Jun 25 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插入排序实现代码
2013/04/04 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
浅谈php命令行用法
2015/02/04 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JavaScript简介
2015/02/15 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
python获取当前日期和时间的方法
2015/04/30 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
Python列表解析操作实例总结
2020/02/26 Python
Python如何实现的二分查找算法
2020/05/27 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
代办社保委托书范文
2014/10/06 职场文书
大学生入党自传2015
2015/06/26 职场文书
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript
Mysql中mvcc各场景理解应用
2022/08/05 MySQL