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 相关文章推荐
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
深入理解令牌认证机制(token)
Aug 22 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
Array of country list in PHP with Zend Framework
2011/10/17 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
python中的常量和变量代码详解
2018/07/25 Python
Python 变量类型详解
2018/10/10 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
学生干部学习的自我评价
2014/02/18 职场文书
入股协议书
2014/04/14 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书