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 相关文章推荐
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
Vue实现圆环进度条的示例
Feb 06 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
php不用正则采集速度探究总结
2008/03/24 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
原生js实现分页效果
2020/09/23 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
python中实现字符串翻转的方法
2018/07/11 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
python 命名规范知识点汇总
2020/02/14 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
大学生评语大全
2014/04/18 职场文书
酒会邀请函
2015/01/31 职场文书
个人优缺点总结
2015/02/28 职场文书
学习经验交流会策划书
2015/11/02 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
SQL Server表分区删除详情
2021/10/16 SQL Server
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android