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脚本函数库 方便开发
Oct 13 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
JS作用域链详解
Jun 26 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 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实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
JavaScript 继承详解(二)
2009/07/13 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
Python生成pdf文件的方法
2014/08/04 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
Python人脸识别初探
2017/12/21 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
金融行业职业生涯规划范文
2014/01/17 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
求职自我推荐信
2014/06/25 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
分析Python list操作为什么会错误
2021/11/17 Python