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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
基于vue实现分页效果
Nov 06 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
vue设置默认首页的操作
Aug 12 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版 汉字转码的实现详解
2013/06/09 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
python开发之函数定义实例分析
2015/11/12 Python
Python Gitlab Api 使用方法
2019/08/28 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
美国女孩服装购物网站:Justice
2017/03/04 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
大学新闻系应届生求职信
2014/06/02 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
超市主管竞聘书
2015/09/15 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
Pytorch 实现变量类型转换
2021/05/17 Python
详解JVM系列之内存模型
2021/06/10 Javascript
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技