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 相关文章推荐
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 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
详解HTTP Cookie状态管理机制
2016/01/14 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python实现复制大量文件功能
2019/08/31 Python
Python之指数与E记法的区别详解
2019/11/21 Python
python二维图制作的实例代码
2020/12/03 Python
美国现代家具购物网站:LexMod
2019/01/09 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
cf战队收人广告词
2014/03/14 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
招商银行收入证明
2015/06/17 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
如何撰写促销方案?
2019/07/05 职场文书