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 相关文章推荐
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
vue 解决循环引用组件报错的问题
Sep 06 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 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
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
js数组的基本使用总结
2021/01/18 Javascript
详解appium+python 启动一个app步骤
2017/12/20 Python
Python深度优先算法生成迷宫
2018/01/22 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
appium+python adb常用命令分享
2020/03/06 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
奥巴马胜选演讲稿
2014/05/15 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
大学教师个人总结
2015/02/10 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
nginx 配置缓存
2022/05/11 Servers