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 prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
js的回调函数详解
Jan 05 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
vue-router 中 meta的用法详解
Nov 01 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 discuz 主题表和回帖表的设计
2009/03/13 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
javascript重写alert方法的实例代码
2013/03/29 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
JavaScript File分段上传
2016/03/10 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
简单实现Python爬取网络图片
2018/04/01 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
python:接口间数据传递与调用方法
2018/12/17 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
python如何写出表白程序
2020/06/01 Python
容易被忽略的Python内置类型
2020/09/03 Python
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
弘扬职业精神演讲稿
2014/03/20 职场文书
公证委托书模板
2014/04/03 职场文书
品质口号大全
2014/06/17 职场文书
加薪通知
2015/04/25 职场文书