Javascript的this用法


Posted in Javascript onJanuary 16, 2017

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 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
JavaScript实现弹出窗口效果
Dec 09 Javascript
jQuery向webApi提交post json数据
Jan 16 #Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 #Javascript
jQuery插件扩展操作入门示例
Jan 16 #Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 #Javascript
js实现带缓动动画的导航栏效果
Jan 16 #Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 #Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 #Javascript
You might like
php根据日期判断星座的函数分享
2014/02/13 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
PHP xpath()函数讲解
2019/02/11 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
动态表格Table类的实现
2009/08/26 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
Python接口自动化测试的实现
2020/08/28 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
python复合条件下的字典排序
2020/12/18 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
单位领导证婚词
2014/01/14 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
小学教学工作总结2015
2015/05/13 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
宣传委员竞选稿
2015/11/19 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA