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替换已存在于element上的event的方法
Mar 09 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
jQuery each函数源码分析
May 25 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
js实现简单放大镜效果
Mar 07 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/04 无线电
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
Javascript的一种模块模式
2010/09/08 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
vue--vuex详解
2019/04/15 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
python多线程同步之文件读写控制
2021/02/25 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Django框架模板用法入门教程
2019/11/04 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
劳动实践课感言
2014/02/01 职场文书
母婴店促销方案
2014/03/05 职场文书
文明单位申报材料
2014/12/23 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android
Golang map映射的用法
2022/04/22 Golang