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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
php跨域调用json的例子
Nov 13 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 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下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python2随机数列生成器简单实例
2017/09/04 Python
Python tkinter模版代码实例
2020/02/05 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
高二生物教学反思
2014/01/27 职场文书
小学防溺水制度
2014/01/29 职场文书
精彩广告词大全
2014/03/19 职场文书
读书小明星事迹材料
2014/05/03 职场文书
干部鉴定材料
2014/05/18 职场文书
辞职信格式模板
2015/02/27 职场文书
Python图片检索之以图搜图
2021/05/31 Python