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 相关文章推荐
jquery对表单操作2
Apr 06 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
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
如何开发一个虚拟域名系统
2006/10/09 PHP
其他功能
2006/10/09 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
jquery 笔记 事件
2011/11/02 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python xpath获取页面注释的方法
2019/01/14 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
2014年自愿离婚协议书
2014/10/10 职场文书
525心理健康活动总结
2015/05/08 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书