Javascript this 函数深入详解


Posted in Javascript onDecember 13, 2016

 js this 函数详解

         本文对Javascript this函数进行详细介绍,及知识的总结整理,彻底明白js this 函数该如何使用。

this 代码函数调用时,

.1直接调用函数则为this则指向window对象
.2类调用时候指向这个类
.3 方法.apply(obg) ;此时这个方法内部的this指向  obj 不传参数 则指向window
.4 function 作为构造函数时, 内部this 指向这个新创建出来的对象

总结为 a类直构

this是JavaScript语言的一个关键字它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用,下面分四种情况,详细讨论this的用法,感兴趣的朋友可以了解下

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 相关文章推荐
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
学习Node.js模块机制
Oct 17 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 #Javascript
简单实现js浮动框
Dec 13 #Javascript
javascript中this关键字详解
Dec 12 #Javascript
深入理解javascript函数参数与闭包
Dec 12 #Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 #Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 #Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 #Javascript
You might like
PHP判断指定时间段的2个方法
2014/03/14 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
理解JS事件循环
2016/01/07 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
pymssql ntext字段调用问题解决方法
2008/12/17 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
解决python3输入的坑——input()
2020/12/05 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
英语演讲稿范文
2014/01/03 职场文书
初中学生期末评语
2014/04/24 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书