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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
vue实现弹幕功能
Oct 25 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实现图片简单上传
2006/10/09 PHP
MYSQL环境变量设置方法
2007/01/15 PHP
PHP的分页功能
2007/03/21 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
Yii配置文件用法详解
2014/12/04 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
简单实现php上传文件功能
2017/09/21 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
js中运算符&& 和 || 的使用记录
2014/08/21 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
Djang中静态文件配置方法
2015/07/30 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
生日邀请函范文
2014/01/13 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
公司合并协议书范本
2014/09/30 职场文书
社会实践活动总结
2015/02/05 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书