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 相关文章推荐
newxtree.js代码
Mar 13 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
JS如何使用剪贴板操作Clipboard API
May 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将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
Python使用爬虫猜密码
2016/02/19 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
python批量爬取下载抖音视频
2019/06/17 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
django框架中间件原理与用法详解
2019/12/10 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
python中Django文件上传方法详解
2020/08/05 Python
用python对excel查重
2020/12/07 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
自动化职业生涯规划书范文
2014/01/03 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技