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 相关文章推荐
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python中map的基本用法示例
2018/09/10 Python
Python3中列表list合并的四种方法
2019/04/19 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
python logging 日志的级别调整方式
2020/02/21 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
基于Python绘制个人足迹地图
2020/06/01 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
院药学专业个人求职信
2013/09/21 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
奖励申请报告范文
2015/05/15 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL