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 相关文章推荐
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
一个简单的js树形菜单
Dec 09 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 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
咖啡常见的种类
2021/03/03 新手入门
PHP脚本的10个技巧(3)
2006/10/09 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python安装第三方库的3种方法
2015/06/21 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
《口技》教学反思
2014/02/21 职场文书
cf收人广告词大全
2014/03/14 职场文书
养牛场项目建议书
2014/05/13 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
工作收入证明范本
2015/06/12 职场文书
售房协议书范本
2015/08/11 职场文书