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中substring和substr的详细介绍与用法
Aug 29 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
vue-axios使用详解
May 10 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
jQuery-App输入框实现实时搜索
Nov 19 jQuery
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
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
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
《狮子和兔子》教学反思
2014/03/02 职场文书
决心书范文
2014/03/11 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
元宵节主持词
2014/03/25 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
初中同学会致辞
2015/08/01 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android