this是js里面很常用的关键字,而灵活的js也赋予了这个关键字无穷的生命力,相信你也有被它糊弄的时候,我总结了一个6字原则,大部分场合都能清醒分辨this到底指向who,跟大家分享一下,欢迎指正。

谁调用指向谁!

首先介绍一个大boss: window, 他是一个隐形大侠,没有确定的调用者的时候,肯定是它出手, 也就是说,如果一个对象没有显性的调用者时,this指向的就是window。

先看下面的例子:

var x = 10;
function test(){
console.log("--- test this.x---");
console.log(this.x);
}
var fruit = {
x: 20,
apple: function(){
console.log("--- apple this.x---");
console.log(this.x);
}
}; fruit.banana = function(){
var y = 20;
this.z = 20;
function pear(){
console.log("--- pear this.x---");
console.log(this.x);
}
console.log("--- banana y---");
console.log(y);
console.log("--- banana this.y---");
console.log(this.y);
console.log("--- banana this.z---");
console.log(this.z);
pear();
} var myfruit = {
x: 30
}
myfruit.mylove = fruit.apple; test();
fruit.apple();
fruit.banana();
test.call(fruit)
myfruit.mylove();

example 1

运行结果分析:

 --- test this.x---
10 // this: window
--- apple this.x---
20 // this: fruit
--- banana y---
20
--- banana this.y---
undefined // this: fruit, we have not assign y to fruit.
--- banana this.z---
20 // this: fruit
--- pear this.x---
10 // this: window
--- test this.x---
20 // this: fruit, it is fruit to call test.
--- apple this.x---
30 // this: myfruit

从上述结果可以看到:

test();
// test()的调用者为隐形boss, this指向window。
fruit.apple();
// apple()的调用者为fruit, this指向fruit。
fruit.banana();
// banana()的调用者为fruit, this 指向fruit。
// 而banana()里面的pear(), 没有显性的调用者,尽管pear()在banana()定义,但是pear()为隐形boss调用,this指向的是window。
test.call(fruit)
// test()在window层面定义,然而实际调用者为fruit,所以this指向fruit。
myfruit.mylove();
// mylove()直接采用了apple()的定义,实际调用者为myfruit,并非fruit,所以this指向myfruit。

综上所述,6字原则可以非常完美的指认this是谁。 这种简单粗暴的方法屡试不爽。谁调用指向谁!!

温馨提示

在回调函数中使用this, 请谨慎谨慎谨慎。先上example:

var x = 10;
var fruit = {
x: 20
}; fruit.slice = function(callback){
console.log("--- slice ---");
console.log(this.x);
console.log("--- callback begin---");
callback();
} fruit.slice(function(){
console.log("--- callback output---");
console.log(this.x); });

example 2

输出结果如下:

 --- slice ---
20
--- callback begin---
--- callback output---
10

回调函数里边的this竟然指向window!!!

我也被这个坑得不轻,回调函数里边的this并非指向宿主函数(调用回调函数的函数)的调用者,6字原则在这里还是非常灵光的,callback()调用时有显性调用者吗?没有!!!!因此,this指向是隐形boss window啦。

当然,例子中希望回调函数指向fruit也不难,call可以帮你忙,请看例子。

var x = 10;
var fruit = {
x: 20
};
fruit.slice = function(callback){
console.log("--- slice ---");
console.log(this.x);
console.log("--- callback begin---");
callback.call(this);
} fruit.slice(function(){
console.log("--- callback output---");
console.log(this.x); });

example 3

妥妥输出:

--- slice ---
20
--- callback begin---
--- callback output---
20

再强调一遍,6字原则在确定js关键字this是谁的问题上屡试不爽, 谁调用指向谁!言下之意,没有调用者就是隐形boss window

细心的看官也许会问, 第一个例子中的pear(), 既然里边的this指向window, 为什么不能在全局域中使用window.pear() or pear()呢?

Good question!

把这个问题用代码还原其实是这样:

var fruit = {};
fruit.banana = function(){
function pear(){}
} // 这样调用会出错咯
pear();
// 这样调用也不行
window.pear();

这两种方式调用都有exception,因为pear()只能在banana里面assign给banana的变量,或者在banana内部调用。

这样调用是对的;

var fruit = {};
fruit.banana = function(){
this.callPear = pear; // assign 给callPear
function pear(){ console.log("I am pear!");}
   pear(); // 内部调用
} var instant = new fruit.banana();
instant.callPear();

这涉及另外一个话题,作用域,scope!下次再跟大家详细分享scope。

五分钟看懂js关键字this的更多相关文章

  1. 五分钟看懂抓包神技:DPDK

    我是一个网络监控软件,我被开发出来的使命就是监控网络中进进出出的所有通信流量. 一直以来,我的工作都非常的出色,但是随着我监控的网络越来越庞大,网络中的通信流量也变得越来越多,我开始有些忙不过来了,逐 ...

  2. 五分钟看懂Celery定时任务

    Django下使用Celery 使用场景: 1, Web应用. 当用户触发的一个操作需要很长时间才能执行完成,那么就可以把它当做一个任务去交给Celery去异步执行, 执行完成之后再返回给用户,这短时 ...

  3. [转]五分钟看懂UML类图与类的关系详解

    在画类图的时候,理清类和类之间的关系是重点.类的关系有泛化(Generalization).实现(Realization).依赖(Dependency)和关联(Association).其中关联又分为 ...

  4. 五分钟看懂UML类图与类的关系详解

    在画类图的时候,理清类和类之间的关系是重点.类的关系有泛化(Generalization).实现(Realization).依赖(Dependency)和关联(Association).其中关联又分为 ...

  5. 一篇文章看懂JS闭包,都要2020年了,你怎么能还不懂闭包?

     壹 ❀ 引 我觉得每一位JavaScript工作者都无法避免与闭包打交道,就算在实际开发中不使用但面试中被问及也是常态了.就我而言对于闭包的理解仅止步于一些概念,看到相关代码我知道这是个闭包,但闭包 ...

  6. [转帖]10分钟看懂Docker和K8S

    10分钟看懂Docker和K8S https://zhuanlan.zhihu.com/p/53260098 2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫“dotCloud”的公司. 这 ...

  7. 十分钟看懂AES加密

    十分钟看懂AES加密算法 今天看了Moserware的<A Stick Figure Guide to the Advanced Encryption Standard(AES)>收获了不 ...

  8. 五分钟搞懂POM设计模式

    转载请注明出处️ 作者:IT小学生蔡坨坨 原文链接:五分钟搞懂POM设计模式 大家好,我是IT小学生蔡坨坨. 今天,我们来聊聊Web UI自动化测试中的POM设计模式. 为什么要用POM设计模式 前期 ...

  9. 五分钟读懂UML类图

    平时阅读一些远吗分析类文章或是设计应用架构时没少与UML类图打交道.实际上,UML类图中最常用到的元素五分钟就能掌握,下面赶紧来一起认识一下它吧: 一.类的属性的表示方式 在UML类图中,类使用包含类 ...

随机推荐

  1. Ubuntu系统下为IDEA创建启动图标

    默认情况下,ubuntu将自动安装的软件快捷方式保存在/usr/share/applications目录下,如果我们要创建桌面快捷方式,需要在该目录下创建一个名为“idea.desktop”的文件. ...

  2. HDOJ 1032(POJ 1207) The 3n + 1 problem

    Description Problems in Computer Science are often classified as belonging to a certain class of pro ...

  3. verilog 双向IO实现

    网上搜索了一番,示例挺多,但发现都写的是 input in; output out; 然后  assign io= (oe)?out:1'bz;就有点想不明白了,当IO方向为输出时,应该输出out的值 ...

  4. nginx做负载均衡器以及proxy缓存配置 - SegmentFault

    nginx做负载均衡器以及proxy缓存配置 - SegmentFault nginx做负载均衡器以及proxy缓存配置

  5. 一句话菜刀获取ip详细信息

    <?php $ip="你要查的ip"; $url="http://ip.taobao.com/service/getIpInfo.php?ip=".$ip ...

  6. NET设计模式-单例模式(Singleton Pattern)

    1. 概述 Singleton Pattren 要求一个类有且仅有一个实例,并且提供一个全局变量.这个创建的对象是独一无二的,在这个单独对象实例中,集中所创建类的所有属性和方法. 在创建一个单例,何时 ...

  7. C++ 标准时间线

    Herb Sutter在他的博客上贴出了一个C++的timeline,如下所示:

  8. string字符串转成16进制

    package util; public class EscapeUnescape { public static String escape(String src) { int i; char j; ...

  9. 触发器记录表某一个字段数据变化的日志 包括插入insert 修改update 删除delete 操作

    本文参考:http://www.cnblogs.com/lyhabc/articles/3236985.html ,),  ),               ),           ),       ...

  10. C# 该行已经属于还有一个表 的解决方法

    产生错误的代码: DataTable dtContract_src = Oper.GetDataTable("select * from T_Contract where ProjectID ...