今天给大家分享一个JavaScript OOP中关于分辨this指向对象的小技巧,很实用呦!
我们先来看一段代码:
大家能判断出func();和obj.func();这两句的this指向吗?
首先,我们都知道的是,this的指向就是最终调用函数的对象。可是最终调用函数的对象,你能清楚地判断出来吗?
但是,有几点需要注意:
① this 指向谁,不应该考虑函数在哪声明,而应该考虑函数在哪调用!
② this 指向的永远只可能对象,而不可能是函数。
③ this 指向的对象 ,叫做函数的上下文context,也叫函数的调用者。
什么是上下文context ?
经常看到很多资料文档都有提到上下文,但是都不是太好理解。相信很多人犯迷糊。现在尝试把自己的理解写出来,也算是梳理一下。
上下文 —— 我把它理解为当前运行环境,程序运行时,程序的每条语句都有对应的上下文,即运行环境。
可以想象一下语句执行前:有个上下文对象,名称是 context,上下文对象是window对象,即: context = window。
直接调用函数func(),此时函数体内的上下文对象就是window。
对象obj调用func函数,即:obj.func() 时,函数体内的上下文对象就是window.obj对象。
this的值,就是运行到this代码位置时,上下文所对应的上下文对象。函数定义是并没有运行console.log(this)语句,所以函数定义是this指向的对象还未定义,它的值是undefined,需要在函数调用时,边解释边执行,执行 console.log(this) 时才分析调用函数是的上下文。最终确定this指向的值。
下面我们来看一下更多的情况,总结一下更多的规律,让大家面对this不再糊涂:
【 接下来,我们详细解读一下 】
① 通过 函数名() 调用的,this永远指向window。就是上述例子的第一个调用 func();
结果(window)
② 通过 对象.方法 调用的,this指向这个对象。就是上述例子的第二种调用方式 obj.func();
结果(obj)
③ 函数 作为数组中的一个元素存在,用数组下标调用,this指向这个数组。
结果(数组arr)
④ 函数作为 window 内置函数的回调函数使用,this指向window 。
结果(window)
⑤ 函数作为构造函数,使用new关键字调用,this指向新new出的对象。
结果(objs)
【区分】在HTML中新增一个div,给div添加点击事件。
<div id="div1" style="width: 200px;height: 200px;background-color: red;" onclick="func(this)">
这是一个div
</div> <script type="text/javascript">
window.onclick = function(){
document.getElementById("div1").onclick = function(){
func(); // 最终还是使用()调用,指向Window
}
document.getElementById("div1").onclick = func; // 广义对象 通过对象.方法 调用的,this指向这个对象
}
function func(){
console.log(this);
}
</script>
规律咱们总结完了,接下来来两个题目练练手吧!
first one:
function func(){
console.log(this);
}
var obj1 = {
name : "obj1",
arr : [func,1,{name:"obj2",func:func},3,setTimeout(func,1000)],
}
// 通过对象取到数组,然后通过数组的下标调用该函数,最终指向数组。this -> obj.arr
obj1.arr[0]();
// obj1.arr[0]:目的是取到func,给setTimeout作为回调函数,相当于setTimeout(func,2000)。this -> window
setTimeout(obj1.arr[0],2000); obj1.arr[2].func(); // 最终调用者{name:"obj2",func:func} 属于②情况
setTimeout(obj1.arr[2].func,2000); // 最终调用者是setTimeout,同上
结果如下显示:(调用了三次延时函数,包括一次自动调用)
second one:
var fullname = 'John Doe';
var obj = {
fullname: 'Colin Ihrig',
prop: {
fullname: 'Aurelio De Rosa',
getFullname: function() {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname()); // 函数的最终调用者 obj.prop var test = obj.prop.getFullname;
console.log(test()); // 函数的最终调用者 test() this-> window obj.func = obj.prop.getFullname; // 给obj追加方法
console.log(obj.func()); // 函数最终调用者是obj var arr = [obj.prop.getFullname,1,2];
arr.fullname = "TraceyW";
console.log(arr[0]()); // 函数最终调用者数组
结果如下显示:
总结一下,this指向的规律,大家可以发现,这个规律跟函数的调用方式息息相关:
① 通过 函数名() 调用的,this永远指向window。
② 通过 对象.方法 调用的,this指向这个对象。
③ 函数 作为数组中的一个元素存在,用数组下标调用,this指向这个数组。
④ 函数作为 Window 内置函数的回调函数使用,this指向window。 如setInterval 、 setTimeout ...
⑤ 函数作为构造函数,使用new关键字调用,this指向新new出的对象。
挺有用的,拿走不谢!
有需要的点关注呦~~小W会经常更新小技巧呢!如有不完善的地方,敬请拍砖!蟹蟹~~
JavaScript OOP 之 this指向的更多相关文章
-
使用JavaScript OOP特性搭建Web应用
最近,我面试了一个有五年 Web 应用程序开发经验的软件开发人员.四年半来她一直在从事 JavaScript 相关的工作,她自认为 JavaScript 技能非常好,但在不久之后我就发现实际上她对 J ...
-
javascript中this的指向
作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. ...
-
Javascript中的this指向。
一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...
-
JavaScript中 this 的指向
很多人都会被JavaScript中this的指向(也就是函数在调用时的调用上下文)弄晕,这里做一下总结: 首先,顶层的this指向全局对象. 函数中的this按照调用方法的不同,其指向也不同: 1.函 ...
-
前端面试之JavaScript中this的指向【待完善!】
JavaScript中this的指向问题! 另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为. 在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 t ...
-
玩转JavaScript OOP[2]&mdash;&mdash;类的实现
概述 当我们在谈论面向对象编程时,我们在谈论什么?我们首先谈论的是一些概念:对象.类.封装.继承.多态.对象和类是面向对象的基础,封装.继承和多态是面向对象编程的三大特性. JavaScript提供了 ...
-
JavaScript OOP(一)之构造函数与new命令
面向对象编程:Object Oriented Programming,简称OOP. 典型的oop语言,如hava.c++,存在着类的概念,类就是对象的模板 (类可以类比为人类:而实例化类后变为对象,对 ...
-
JavaScript OOP 之「创建对象」
工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程.工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题. function createPers ...
-
玩转JavaScript OOP[4]&mdash;&mdash;实现继承的12种套路
概述 在之前的文章中,我们借助构造函数实现了"类",然后结合原型对象实现了"继承",并了解了JavaScript中原型链的概念. 理解这些内容,有助于我们更深入 ...
随机推荐
-
最大流模版 pascal
//最大流模版 ; maxm=; ..maxn] of integer; end; var n,m,max:longint; r:..maxn,..maxn] of longint; g:..maxn ...
-
Win10环境下安装theano并配置GPU详细教程
一.软件和环境 (1)安装日期2016/12/23: (2)原材料VS2013,cuda-8.0(最好下载cuda7.5,目前theano-0.8.2对cuda-8支持不是很好),Anaconda3- ...
-
Etl之HiveSql调优(union all)
相信在Etl的过程中不可避免的实用union all来拼装数据,那么这就涉及到是否并行处理的问题了. 在hive中是否适用并行map,可以通过参数来设定: set hive.exec.parallel ...
-
xcode注释
新开的项目需要先开发iOS版本,所以又把好久没写的iOS捡起来了,之前都是手动注释,最近是越来越懒了,所以在网上找了一个自动注释的插件,啊哈,其实有时候还真的挺怀念用Eclipse的时候,不过不用羡慕 ...
-
Throttling ASP.NET Web API calls
http://blog.maartenballiauw.be/post/2013/05/28/Throttling-ASPNET-Web-API-calls.aspx https://github.c ...
-
java递归查询方法
一.需求 项目里要让用户能够设置所选择教材的章课节,以针对章课节提供相应的题目供用户做题. 设计:用户设置了教材后,首次登录,进行章节设置时.默认为用户选择第一章.第一课.第一节. 思路:用户访问页面 ...
-
Linux 遍历目录下面所有文件,将目录名、文件名转为小写
当你从 Windows 服务器换到 Linux 服务器的时候,以前的上传目录的目录名.文件名会遇到大小写的问题.在 Windows 环境下面没有文件区分大小写的概念,而 Linux 却有严格的文件名大 ...
-
JavaScript判断变量是否为数组的方法(Array)
废话不多说直接上一个代码: 1.这里是通用的检测方法 /* * 判断是否是数组 */ function isArray(obj){ return Object.prototype.toString.c ...
-
iPhone: 在 iPhone app 里使用 UIPopoverController
更新:iOS8 版本已经不可用 为 UIPopoverController 增加类别,如下: //NSObject+UIPopover_Iphone.h #import <Foundation/ ...
-
【bzoj4591】[Shoi2015]超能粒子炮&#183;改 Lucas定理
题目描述 曾经发明了脑洞治疗仪&超能粒子炮的发明家SHTSC又公开了他的新发明:超能粒子炮·改--一种可以发射威力更加强大的粒子流的神秘装置.超能粒子炮·改相比超能粒子炮,在威力上有了本质的提 ...