JavaScript OOP 之 this指向

时间:2023-01-05 07:41:16

今天给大家分享一个JavaScript OOP中关于分辨this指向对象的小技巧,很实用呦!

我们先来看一段代码:

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();

JavaScript OOP 之 this指向

结果(window)

JavaScript OOP 之 this指向

② 通过 对象.方法 调用的,this指向这个对象。就是上述例子的第二种调用方式 obj.func();

JavaScript OOP 之 this指向

结果(obj)

JavaScript OOP 之 this指向

③ 函数 作为数组中的一个元素存在,用数组下标调用,this指向这个数组。

JavaScript OOP 之 this指向

结果(数组arr)

JavaScript OOP 之 this指向

④ 函数作为 window 内置函数的回调函数使用,this指向window 。

JavaScript OOP 之 this指向

结果(window)

JavaScript OOP 之 this指向

⑤ 函数作为构造函数,使用new关键字调用,this指向新new出的对象。

JavaScript OOP 之 this指向

结果(objs)

JavaScript OOP 之 this指向

【区分】在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>

JavaScript OOP 之 this指向

JavaScript OOP 之 this指向

规律咱们总结完了,接下来来两个题目练练手吧!

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,同上

结果如下显示:(调用了三次延时函数,包括一次自动调用)

JavaScript OOP 之 this指向

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]()); // 函数最终调用者数组

结果如下显示:

JavaScript OOP 之 this指向

总结一下,this指向的规律,大家可以发现,这个规律跟函数的调用方式息息相关:

  ① 通过 函数名() 调用的,this永远指向window。

  ② 通过 对象.方法 调用的,this指向这个对象。

  ③ 函数 作为数组中的一个元素存在,用数组下标调用,this指向这个数组。

  ④ 函数作为 Window 内置函数的回调函数使用,this指向window。  如setInterval 、 setTimeout ...

  ⑤ 函数作为构造函数,使用new关键字调用,this指向新new出的对象。

挺有用的,拿走不谢!

有需要的点关注呦~~小W会经常更新小技巧呢!如有不完善的地方,敬请拍砖!蟹蟹~~

JavaScript OOP 之 this指向的更多相关文章

  1. 使用JavaScript OOP特性搭建Web应用

    最近,我面试了一个有五年 Web 应用程序开发经验的软件开发人员.四年半来她一直在从事 JavaScript 相关的工作,她自认为 JavaScript 技能非常好,但在不久之后我就发现实际上她对 J ...

  2. javascript中this的指向

    作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. ...

  3. Javascript中的this指向。

    一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...

  4. JavaScript中 this 的指向

    很多人都会被JavaScript中this的指向(也就是函数在调用时的调用上下文)弄晕,这里做一下总结: 首先,顶层的this指向全局对象. 函数中的this按照调用方法的不同,其指向也不同: 1.函 ...

  5. 前端面试之JavaScript中this的指向【待完善!】

    JavaScript中this的指向问题! 另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为. 在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 t ...

  6. 玩转JavaScript OOP&lbrack;2&rsqb;&mdash&semi;&mdash&semi;类的实现

    概述 当我们在谈论面向对象编程时,我们在谈论什么?我们首先谈论的是一些概念:对象.类.封装.继承.多态.对象和类是面向对象的基础,封装.继承和多态是面向对象编程的三大特性. JavaScript提供了 ...

  7. JavaScript OOP(一)之构造函数与new命令

    面向对象编程:Object Oriented Programming,简称OOP. 典型的oop语言,如hava.c++,存在着类的概念,类就是对象的模板 (类可以类比为人类:而实例化类后变为对象,对 ...

  8. JavaScript OOP 之「创建对象」

    工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程.工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题. function createPers ...

  9. 玩转JavaScript OOP&lbrack;4&rsqb;&mdash&semi;&mdash&semi;实现继承的12种套路

    概述 在之前的文章中,我们借助构造函数实现了"类",然后结合原型对象实现了"继承",并了解了JavaScript中原型链的概念. 理解这些内容,有助于我们更深入 ...

随机推荐

  1. 最大流模版 pascal

    //最大流模版 ; maxm=; ..maxn] of integer; end; var n,m,max:longint; r:..maxn,..maxn] of longint; g:..maxn ...

  2. Win10环境下安装theano并配置GPU详细教程

    一.软件和环境 (1)安装日期2016/12/23: (2)原材料VS2013,cuda-8.0(最好下载cuda7.5,目前theano-0.8.2对cuda-8支持不是很好),Anaconda3- ...

  3. Etl之HiveSql调优&lpar;union all&rpar;

    相信在Etl的过程中不可避免的实用union all来拼装数据,那么这就涉及到是否并行处理的问题了. 在hive中是否适用并行map,可以通过参数来设定: set hive.exec.parallel ...

  4. xcode注释

    新开的项目需要先开发iOS版本,所以又把好久没写的iOS捡起来了,之前都是手动注释,最近是越来越懒了,所以在网上找了一个自动注释的插件,啊哈,其实有时候还真的挺怀念用Eclipse的时候,不过不用羡慕 ...

  5. Throttling ASP&period;NET Web API calls

    http://blog.maartenballiauw.be/post/2013/05/28/Throttling-ASPNET-Web-API-calls.aspx https://github.c ...

  6. java递归查询方法

    一.需求 项目里要让用户能够设置所选择教材的章课节,以针对章课节提供相应的题目供用户做题. 设计:用户设置了教材后,首次登录,进行章节设置时.默认为用户选择第一章.第一课.第一节. 思路:用户访问页面 ...

  7. Linux 遍历目录下面所有文件,将目录名、文件名转为小写

    当你从 Windows 服务器换到 Linux 服务器的时候,以前的上传目录的目录名.文件名会遇到大小写的问题.在 Windows 环境下面没有文件区分大小写的概念,而 Linux 却有严格的文件名大 ...

  8. JavaScript判断变量是否为数组的方法&lpar;Array&rpar;

    废话不多说直接上一个代码: 1.这里是通用的检测方法 /* * 判断是否是数组 */ function isArray(obj){ return Object.prototype.toString.c ...

  9. iPhone&colon; 在 iPhone app 里使用 UIPopoverController

    更新:iOS8 版本已经不可用 为 UIPopoverController 增加类别,如下: //NSObject+UIPopover_Iphone.h #import <Foundation/ ...

  10. 【bzoj4591】&lbrack;Shoi2015&rsqb;超能粒子炮&&num;183&semi;改 Lucas定理

    题目描述 曾经发明了脑洞治疗仪&超能粒子炮的发明家SHTSC又公开了他的新发明:超能粒子炮·改--一种可以发射威力更加强大的粒子流的神秘装置.超能粒子炮·改相比超能粒子炮,在威力上有了本质的提 ...