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 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
jquery异步请求实例代码
Jun 21 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
详解vue-router基本使用
Apr 18 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 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实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
python获取代码运行时间的实例代码
2018/06/11 Python
Python中反射和描述器总结
2018/09/23 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Django中create和save方法的不同
2019/08/13 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
np.random.seed() 的使用详解
2020/01/14 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
市场营销专业个人自荐信格式
2013/09/21 职场文书
会计自荐书
2013/12/02 职场文书
校园环保标语
2014/06/13 职场文书
一年级小学生评语大全
2014/12/25 职场文书
个人事迹材料范文
2014/12/29 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
浅谈Node的内存泄露问题
2022/05/06 NodeJs
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL