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 相关文章推荐
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
JS实现购物车特效
Feb 02 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
Django模板继承 extend标签实例代码详解
May 16 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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php函数与传递参数实例分析
2014/11/15 PHP
php中socket通信机制实例详解
2015/01/03 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
php的扩展写法总结
2019/05/14 PHP
php中关于换行的实例写法
2019/09/26 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
在Django中同时使用多个配置文件的方法
2015/07/22 Python
python绘制彩虹图
2019/12/16 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
详解Python中的Lock和Rlock
2021/01/26 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
通信专业个人自我鉴定
2013/10/21 职场文书
制冷与电控专业应届生求职信
2013/11/11 职场文书
学习决心书
2014/03/11 职场文书
无房证明范本
2014/09/17 职场文书
入党函调证明材料
2015/06/19 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS