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 相关文章推荐
判断ie的两种简单方法
Aug 12 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
webpack打包优化的几个方法总结
Feb 10 Javascript
原生js实现照片墙效果
Oct 13 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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 加密与解密的斗争
2009/04/17 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
php常用正则函数实例小结
2016/12/29 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
js使用心得分享
2015/01/13 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
不可错过的十本Python好书
2017/07/06 Python
详解python中的文件与目录操作
2017/07/11 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
PyQt5 多窗口连接实例
2019/06/19 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
python反扒机制的5种解决方法
2021/02/06 Python
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
《长城》教学反思
2014/02/14 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
婚礼家长致辞
2015/07/27 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
服务器间如何实现文件共享
2022/05/20 Servers