JavaScript This 的六道坎

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

首先

this  is all  about  context

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

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

第一层:世界尽头

权利最小的大佬是作为备胎的存在,在普通情况下就是全局,浏览器里就是Window;在use  strick的情况下就是underfind。

JavaScript This 的六道坎



第二层:点石成金

第二层说白了就是找这个函数前面的点“.”。

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

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

JavaScript This 的六道坎

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

JavaScript This 的六道坎

答案是boss1和window哦,

只要看使用this的那个函数

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

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

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

JavaScript This 的六道坎

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

 

第三层:指腹为婚

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

JavaScript This 的六道坎

第四层:海誓山盟

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

JavaScript This 的六道坎

 

第五层:内有乾坤

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

JavaScript This 的六道坎

第六层:军令如山

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

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