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 相关文章推荐
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
js取整数、取余数的方法
May 11 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
js实现购物车商品数量加减
Sep 21 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代码
2012/09/14 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
应聘英语教师求职信
2014/04/24 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
护理见习报告范文
2014/11/03 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python