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 设置文本框中焦点的位置
Nov 20 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
深入浅析Vue中的Prop
Jun 10 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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使用exec shell命令注入的方法讲解
2013/11/12 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
js实现简单扫雷
2020/11/27 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Django中URLconf和include()的协同工作方法
2015/07/20 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
python实现银行账户系统
2021/02/22 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
四年的大学生生活自我评价
2013/12/09 职场文书
弄虚作假心得体会
2014/09/10 职场文书
小学生交通安全寄语
2015/02/27 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android