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获取url中指定参数值的示例代码
Dec 14 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
JavaScript async/await原理及实例解析
Dec 02 Javascript
vuex的使用步骤
Jan 06 Vue.js
如何创建一个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
PHP4和PHP5共存于一系统
2006/11/17 PHP
PHP动态变静态原理
2006/11/25 PHP
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
MySQL修改密码方法总结
2008/03/25 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
JavaScript 原型继承
2011/12/26 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
js实现微信分享代码
2020/10/11 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
销售队伍口号
2014/06/11 职场文书
信用卡催款律师函
2015/05/27 职场文书
股东协议书范本2016
2016/03/21 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python