zoukankan      html  css  js  c++  java
  • JavaScript This 的六道坎

    鉴于this风骚的运作方式,对this的理解是永不过时的话题,本文试图通过将其大卸六块来钉住这个磨人的妖精。

    首先

    this is all about context.

    this说白了就是找大佬,找拥有当前上下文(context)的对象(context object)。

    大佬可以分为六层,层数越高权力越大,this只会认最大的。

    第一层:世界尽头
    权力最小的大佬是作为备胎的存在,在普通情况下就是全局,浏览器里就是window;在use strict的情况下就是undefined。

    第二层:点石成金

    第二层大佬说白了就是找这个函数前面的点"."。

    如果用到this的那个函数是属于某个 context object 的,那么这个 context object 绑定到this。

    比如下面的例子,boss是returnThis的 context object ,或者说returnThis属于boss。

    下面这个例子就要小心点咯,能想出答案么?

    答案是boss1和window哦,猜对了吗。

    只要看使用this的那个函数。

    在boss2.returnThis里,使用this的函数是boss1.returnThis,所以this绑定到boss1;

    在boss3.returnThis里,使用this的函数是returnThis,所以this绑定到备胎。

    要想把this绑定到boss2怎么做呢?

    没错,只要让使用this的函数是属于boss2就行。

    第三层:指腹为婚

    第三层大佬是Object.prototype.call和Object.prototype.apply,它们可以通过参数指定this。(注意this是不可以直接赋值的哦,this = 2会报ReferenceError。)

    第四层:海誓山盟

    第四层大佬是Object.prototype.bind,他不但通过一个新函数来提供永久的绑定,还会覆盖第三层大佬的命令。

    第五层:内有乾坤

    一个比较容易忽略的会绑定this的地方就是new。当我们new一个函数时,就会自动把this绑定在新对象上,然后再调用这个函数。它会覆盖bind的绑定。

    第六层:军令如山

    最后一个法力无边的大佬就是 ES2015 的箭头函数。箭头函数里的this不再妖艳,被永远封印到当前词法作用域之中,称作 Lexical this ,在代码运行前就可以确定。没有其他大佬可以覆盖。

    这样的好处就是方便让回调函数的this使用当前的作用域,不怕引起混淆。

    所以对于箭头函数,只要看它在哪里创建的就行。

    下面这种奇葩的使用方式就需要注意:

    如果你不知道最后为什么会是 boss2,继续理解“对于箭头函数,只要看它在哪里创建”这句话。

  • 相关阅读:
    51Nod 1119 机器人走方格 V2 组合数学 费马小定理
    Codeforces Round #439 div2 869A The Artful Expedient +869B The Eternal Immortality
    51Nod 1050 循环数组最大子段和 dp
    51Nod 1009 数字1的数量 数位dp
    51Nod 1082 与7无关的数 暴力打表(埃氏筛的感觉)
    POJ 2001 Shortest Prefixes
    字典树模板
    HDU 1251 统计难题
    kmp算法模板
    HDU 2087 剪花布条
  • 原文地址:https://www.cnblogs.com/woodyliang/p/6426015.html
Copyright © 2011-2022 走看看