JavaScript This 的六道坎

作者: 被开发耽搁的项目经理林先生 | 来源:发表于2017-01-29 02:29 被阅读381次

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

首先

this is all about context.

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

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

第一层:世界尽头

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

function showThis () {
  console.log(this)
}
function showStrictThis () {
  'use strict'
  console.log(this)
}
showThis() // window
showStrictThis() // undefined

补充说明:当一个函数为匿名函数时,它的指向也是window

第二层:点石成金

第二层大佬说白了就是找这个函数前面的点"."(通过点语法来调用方法)。

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

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

var boss = {
  name: 'boss',
  returnThis () {
    return this
  }
}
boss.returnThis() === boss // true

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

var boss1 = {
  name: 'boss1',
  returnThis () {
    return this
  }
}
var boss2 = {
  name: 'boss2',
  returnThis () {
    return boss1.returnThis()
  }
}
var boss3 = {
  name: 'boss3',
  returnThis () {
    var returnThis = boss1.returnThis
    return returnThis()
  }
}
boss1.returnThis() // boss1
boss2.returnThis() // ?
boss3.returnThis() // ?

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

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

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

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

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


var boss1 = {
  name: 'boss1',
  returnThis () {
    return this
  }
}
var boss2 = {
  name: 'boss2',
  returnThis: boss1.returnThis
}
boss2.returnThis() //boss2

// 在这里可能还是会有人蒙,感觉和上面的差不多,这里我们要进入一个概念,一个函数如果return something后,它就和原来的函数没有关系了

// 所以上面的boss2.returnThis()因为最终是return boss1.returnThis(),所以它的this是boss1

第三层:指腹为婚

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

function returnThis () {
  return this
}
var boss1 = { name: 'boss1' }
returnThis() // window
returnThis.call(boss1) // boss1
returnThis.apply(boss1) // boss1

第四层:海誓山盟

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

function returnThis () {
  return this
}
var boss1 = { name: 'boss1'}
var boss1returnThis = returnThis.bind(boss1)
boss1returnThis() // boss1
var boss2 = { name: 'boss2' }
boss1returnThis.call(boss2) // still boss1

第五层:内有乾坤

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

function showThis () {
  console.log(this)
}
showThis() // window
new showThis() // showThis
var boss1 = { name: 'boss1' }
showThis.call(boss1) // boss1
new showThis.call(boss1) // TypeError
var boss1showThis = showThis.bind(boss1)
boss1showThis() // boss1
new boss1showThis() // showThis

第六层:军令如山

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

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

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

function callback (cb) {
  cb()
}
callback(() => { console.log(this) }) // window
var boss1 = {
  name: 'boss1',
  callback: callback,
  callback2 () {
    callback(() => { console.log(this) })
  }
}
boss1.callback(() => { console.log(this) }) // still window
boss1.callback2(() => { console.log(this) }) // boss1

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

var returnThis = () => this
returnThis() // window
new returnThis() // TypeError
var boss1 = {
  name: 'boss1',
  returnThis () {
    var func = () => this
    return func()
  }
}
returnThis.call(boss1) // still window
var boss1returnThis = returnThis.bind(boss1)
boss1returnThis() // still window
boss1.returnThis() // boss1
var boss2 = {
  name: 'boss2',
  returnThis: boss1.returnThis
}
boss2.returnThis() // boss2

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

相关文章

  • JavaScript This 的六道坎

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

  • 营销六道坎

    营销人有六道坎要经历:心态、位置、套路、行动、外界、价值观。这6道坎是我理解的营销人的基本的要素,能很好的越过的话...

  • 从容

    近读《怎样走过人生的六个坎》一文感触颇深,文中将人生的六道坎和盘托出:20岁之前谈梦、20岁以后谈理想、上了30岁...

  • 人生要过六道坎2019.11.22

    人的一生要度过这六道坎: 1,十八岁是未成人向成年人车转变的重要标志,要学会担当,负起责任,不再是在父母呵护下成长...

  • 2018-07-03---This的六道坎(转载)

    1.世界尽头,指向window,备胎 比如: functionfn(){ console.log(this); ...

  • 《短歌行》大善寺

    时光荏苒,日月如梭。 化故为新,何其难得。 过了是门,不过是坎。 天命有司,六道轮回? 悠悠我心,但向阳明。 忠孝...

  • 关于6道轮回(转鲜花天降)

    一、佛学讲的六道是哪六道? 那么,首先我们要知道佛学讲的六道是哪六道? 六道者:1、天道,2、阿修罗道,3、人道,...

  • 新知识,重新定义六道。分清楚六道和六道轮回的区别

    新知识,重新定义六道,分清楚六道和六道轮回的区别。 六道,是天道、地道、人道、自然道、兽道、时空道。六道轮回,是天...

  • 2019吐血新推变态服!唐门六道SF!六道传说SF!氪金公益服含

    六道传说=唐门六道专属入口: 唐门六道SF=六道传说SF!2019年度高爆率公益服、今日震撼首服! LING55游...

  • JavaScript中的面向对象编程

    学习JavaScript语言的过程中“面向对象”的概念绝对是一道坎。JS没有“类”这个概念,因此要用它来进行面向对...

网友评论

本文标题:JavaScript This 的六道坎

本文链接:https://www.haomeiwen.com/subject/tsxcittx.html