Zxhnext 我的前端之旅

JavaScript This 的六道坎

2017-11-22
Zxhnext
 

阅读量


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

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

第一层:世界尽头

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

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

showThis() //window
showStrictThis() //underfined

第二层:点石成金

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

如果用到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 boos1.returnThis()
    }
}
var boss3 = {
    name:'boss3',
    returnThis(){
        var returnThis = boos1.returnThis
        return returnThis()
    }
}
boss1.returnThis()  //boss1
boss1.returnThis()  //boss1
boss1.returnThis()  //window

答案是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

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

第三层:指腹为婚

第三层大佬是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)  //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
    }
}
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
JavaScript面试热点之this对象详解

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

赞赏支持

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦


相关推荐

评论