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 相关文章推荐
初学JavaScript第二章
Sep 30 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
模拟select的代码
2011/10/19 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
Python金融数据可视化汇总
2017/11/17 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Python实现分数序列求和
2020/02/25 Python
Python中实现输入一个整数的案例
2020/05/03 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
企业厂长岗位职责
2013/12/17 职场文书
聚美优品励志广告词
2014/03/14 职场文书
项目合作协议书
2014/09/23 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
校园广播站开场白
2015/06/01 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电