探索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 组件之旅(一)分析和设计
Oct 28 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
js 获取、清空input type="file"的值示例代码
Feb 19 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
javascript实现图片轮播代码
Jul 09 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
jQuery替换字符串(实例代码)
2013/11/13 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
cookie的secure属性详解
2015/04/08 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
jQuery列表检索功能实现代码
2017/07/17 jQuery
node内置调试方法总结
2018/02/22 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
python基础之入门必看操作
2017/07/26 Python
Python三级菜单的实例
2017/09/13 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
python-numpy-指数分布实例详解
2019/12/07 Python
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
经济担保书范文
2014/04/02 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
领导欢迎词致辞
2015/01/23 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python
Python 绘制多因子柱状图
2022/05/11 Python