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.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
js实现的折叠导航示例
Nov 29 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 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生成随机颜色的方法
2014/11/13 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
基于jQuery的history历史记录插件
2010/12/11 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
常用的js方法合集
2017/03/10 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
js实现抽奖功能
2020/11/24 Javascript
Python进阶学习之特殊方法实例详析
2017/12/01 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
办公室岗位职责
2014/02/12 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
什么是SOLID
2022/03/24 Javascript
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL