探索Javascript中this的奥秘


Posted in Javascript onDecember 11, 2016

前言: this 是 JavaScript 比较特殊的关键字,运用的地方之广,方式之灵活奠定了它的强大,但同时注定了它的难用 。自己刚开始学的时候被绕的很晕,为了彻底弄懂它查了很多资料。然后将自己学的东西整理了一下,以通俗易懂的方式表达出来,权当做学习笔记,同时也可以给有需要的童鞋做下参考^_^

什么是this?

this 关键字的含义是明确且具体的,即指代当前对象。即意味着这个 this 是在某种相对情况下才成立的。

this 被分为三种情况:全局对象、当前对象或者任意对象;判断处于那种情况,这完全取决于函数的调用方式,JavaScript 中主要的函数调用有以下几种方式:

  • 作为普通函数调用
  • 作为对象方法调用
  • 作为构造函数调用
  • 使用 apply 或 call 调用

1. 作为普通函数调用
    ------这是我们最常用的方法,这种调用方式属于全局调用,这里的 this 指的是全局对象

function test(){
 this.a = 5;
 alert(this.a);
 alert(this);
}
test(); // 5 [object Window]

如上所示:定义在全局的函数, 函数的所有者就是当前页面, 也就是window对象,所以example()的调用对象就是Window,因此这里面的this就代表Window;

换一种写法:

var a = 5;
function test(){
 var a = 10;
 alert(this.a);
}
test(); //5

如上所示:test()函数内部也声明了一个变量a,但是调用test()的结果为5,说明此时函数内部的this代表了全局对象即Window;

再换种写法:

var a = 5;
function test(){
 this.a = 10;
}
test();
alert(a); //10

如上所示: 调用test()函数,更改了全局变量a的值,即表明此时this代表全局对象。

2.作为对象函数的调用
   ------当函数被某个对象调用时,此时this就指向了这个对象

var name="张三";
 var person={
  name:"李四",
  showName:function(){
   alert(this.name);
  }
 }
 person.showName(); //输出 李四
 var other=person.showName;
 other(); //输出 张三

如上所示:执行 person.showName()的结果为 李四,说明此时showName中的this指向了person;

而把person.showName赋给other后,因为other属于全局变量,可以看成是window对象的一个属性。所以当调用other(),相当于调用window.other(),因此this指向了window, 输出结果为 张三;

所以说作为函数对象调用时,this就指向了这个调用的对象。

3. 作为构造函数调用
    ------构造函数,就是通过这个函数生成一个新对象(object),这时候的 this 就会指向这个新对象;

function animal(){
 this.name = "豆豆";
}
var dog = new animal();
alert(dog.name); // 输出 豆豆

如上所示:通过new关键字生成一个object类型的对象并把它赋给dog,执行这个构造函数的话,会吧构造函数作用域里的this指向这个对象,在这里就是指向了dog,因此this.name 等同于dog.name, 所以输出结果为豆豆。

4.使用 apply 或 call 调用
    ------apply()是函数对象的一个方法,它应用某一对象的一个方法,用另一个对象替换当前对象。

var a = "张三";
function test(){
 alert(this.a);
}
var b = {};
b.a = "李四";
b.n = test;
b.n(); //李四
b.n.apply(); //张三
b.n.apply(b); //李四

如上所示:b.n()----因为调用的对象为b,所以this指向了b,this.a  == b.a  ,所以结果为李四;

 b.n.apply----当apply()的参数为空时,就是没有对象去替换当前对象,默认用全局对象,所以this指向window,结果为张三;

 b.n.apply(b)----指将当前的this指向替换成b,因此this指向了b,结果为李四

(本文参考了网上的资料和一些书籍,如有错误之处,欢迎指出,将及时改正,么么哒O(∩_∩)O)

总结:本文介绍了 JavaScript 中的 this 关键字在各种情况下的含义,实例都很简单,这样更能有助于加深理解。虽然这只是 JavaScript 中一个很小的概念,但借此我们可以了解 JavaScript 中函数的执行环境,充分掌握this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。最后,感谢您的观看。 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木

Javascript 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
js数组的操作指南
Dec 28 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
详解JavaScript中return的用法
May 08 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
vue插件实现v-model功能
Sep 10 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
实例浅析js的this
Dec 11 #Javascript
解析js如何获取css样式
Dec 11 #Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 #Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 #Javascript
JS产生随机数的用法小结
Dec 10 #Javascript
基于JavaScript实现随机颜色输入框
Dec 10 #Javascript
BootStrap中
Dec 10 #Javascript
You might like
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
php实现httpclient类示例
2014/04/08 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
javascript第一课
2007/02/27 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
python如何调用php文件中的函数详解
2020/12/29 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
复核员上岗演讲稿
2014/01/05 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技