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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
javascript中this的四种用法
May 11 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
js实现3D旋转效果
Aug 18 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&mysql(二)
2006/10/09 PHP
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
python实现中文转换url编码的方法
2016/06/14 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
高三历史教学反思
2014/01/09 职场文书
个人简历中自我评价
2014/02/11 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
个人创业事迹材料
2014/12/30 职场文书
打架检讨书范文
2015/01/27 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android