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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
php与js的区别是什么
Aug 05 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 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处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
PDO::errorCode讲解
2019/01/28 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
python脚本内运行linux命令的方法
2015/07/02 Python
python搭建微信公众平台
2016/02/09 Python
利用python画一颗心的方法示例
2017/01/31 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
python命令 -u参数用法解析
2019/10/24 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
师德学习感言
2014/01/31 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
鸟的天堂导游词
2015/01/31 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python