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为a标签的href赋值实现代码
May 03 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
js中this用法实例详解
May 05 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
js实现简单的轮播图效果
Dec 13 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与已存在的Java应用程序集成
2006/10/09 PHP
封装一个PDO数据库操作类代码
2009/09/09 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
php实现小程序支付完整版
2018/10/09 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
python访问抓取网页常用命令总结
2017/04/11 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python实现装饰器、描述符
2018/02/28 Python
python重试装饰器的简单实现方法
2019/01/31 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
python安装sklearn模块的方法详解
2020/11/28 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
计算机系统管理员求职信
2014/06/20 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书