探索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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
DOM事件探秘篇
Feb 15 Javascript
js实现图片放大展示效果
Aug 30 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
VSCode 配置uni-app的方法
Jul 11 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
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
基于Python闭包及其作用域详解
2017/08/28 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
查看Django和flask版本的方法
2018/05/14 Python
python使用tornado实现登录和登出
2018/07/28 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
应届生护士求职信
2013/11/01 职场文书
工作推荐信范文
2014/05/10 职场文书
小组名称和口号
2014/06/09 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
工作岗位职责范本
2015/02/15 职场文书
中小企业员工手册范本
2015/05/14 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
社区安全温馨提示语
2015/07/14 职场文书
电力安全学习心得体会
2016/01/18 职场文书
Ruby处理YAML和json数据
2022/04/18 Ruby