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 相关文章推荐
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
Element-UI+Vue模式使用总结
Jan 02 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开发大型项目的一点经验
2006/10/09 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
javascript学习网址备忘
2007/05/29 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
python格式化字符串实例总结
2014/09/28 Python
python进行TCP端口扫描的实现
2018/12/21 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
工程专业毕业生自荐信范文
2013/12/25 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
教师对学生的寄语
2014/04/03 职场文书
大班开学家长寄语
2014/04/04 职场文书
立案决定书范文
2015/06/24 职场文书
春节慰问简报
2015/07/21 职场文书
工伤调解协议书
2016/03/21 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
Python实现文字pdf转换图片pdf效果
2022/04/03 Python