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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
详细讲解JS节点知识
Jan 31 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
JavaScript中的函数式编程详解
Aug 22 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
Python读取网页内容的方法
2015/07/30 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python的re正则表达式实例代码
2018/01/24 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
基于python中__add__函数的用法
2019/11/25 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
安康杯竞赛活动总结
2014/05/05 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
详解Laravel制作API接口
2021/05/31 PHP