探索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 一个函数对同一元素的多个事件响应
Jul 25 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
Vue从TodoList中学父子组件通信
Feb 05 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.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
python使用7z解压apk包的方法
2015/04/18 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
pycharm设置注释颜色的方法
2018/05/23 Python
详解python运行三种方式
2019/05/13 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
实习生自我鉴定
2013/12/12 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
高中班级口号
2014/06/09 职场文书
立项申请报告范本
2015/05/15 职场文书
结婚典礼主持词
2015/06/29 职场文书
八年级物理教学反思
2016/02/19 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS