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 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 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下载文件,添加响应头的简单实例
2016/09/22 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
javascript定时保存表单数据的代码
2011/03/17 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
解析js如何获取css样式
2016/12/11 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
python 实现红包随机生成算法的简单实例
2017/01/04 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Python银行系统实战源码
2019/10/25 Python
Python原始套接字编程实例解析
2020/01/29 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
python二维图制作的实例代码
2020/12/03 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
接待员岗位职责范本
2015/04/15 职场文书
如何正确理解python装饰器
2021/06/15 Python
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server