js中的this关键字详解


Posted in Javascript onSeptember 25, 2013

this是Javascript语言的一个关键字。
它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如,

function test(){ 


this.x = 1; 

}

随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

下面分四种情况,详细讨论this的用法。

情况一:纯粹的函数调用

这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。

请看下面这段代码,它的运行结果是1。

function test(){ 


this.x = 1; 


alert(this.x); 

} 

test(); // 1

为了证明this就是全局对象,我对代码做一些改变:
var x = 1; 

function test(){ 


alert(this.x); 

} 

test(); // 1

运行结果还是1。再变一下:
var x = 1; 

function test(){ 


this.x = 0; 

} 

test(); 

alert(x); //0

情况二:作为对象方法的调用

函数还可以作为某个对象的方法调用,这时this就指这个上级对象。

function test(){ 


alert(this.x); 

} 

var o = {}; 

o.x = 1; 

o.m = test; 

o.m(); // 1

情况三 作为构造函数调用

所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。

function test(){ 


this.x = 1; 

} 

var o = new test(); 

alert(o.x); // 1

运行结果为1。为了表明这时this不是全局对象,我对代码做一些改变:
var x = 2; 

function test(){ 


this.x = 1; 

} 

var o = new test(); 

alert(x); //2

运行结果为2,表明全局变量x的值根本没变。

情况四 apply调用

apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。

var x = 0; 

function test(){ 


alert(this.x); 

} 

var o={}; 

o.x = 1; 

o.m = test; 

o.m.apply(); //0

apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。

如果把最后一行代码修改为 

o.m.apply(o); //1

运行结果就变成了1,证明了这时this代表的是对象o
Javascript 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
javawscript 三级菜单的实现原理
Jul 01 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
微信小程序实现聊天室
Aug 21 Javascript
小程序实现录音功能
Sep 22 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 #Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 #Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 #Javascript
JS 实现导航栏悬停效果(续)
Sep 24 #Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 #Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 #Javascript
基于jquery实现的省市区级联无ajax
Sep 24 #Javascript
You might like
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
Javascript 入门基础学习
2010/03/10 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
python处理csv数据的方法
2015/03/11 Python
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
EJB的激活机制
2013/10/25 面试题
几个判断型的面试题
2012/07/03 面试题
幼儿园庆六一游园活动方案
2014/01/29 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
感谢信怎么写
2015/01/21 职场文书
开工典礼致辞
2015/07/29 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers