了解this 怒推面试官一波

基本知识

this在JavaScript中属于常常使用的一个对象。在定义中，在Javascript中this老是指向调用它所在方法的对象，谁发起了调用,this将指向谁。

下面将描述一些案例，带领你们了解this。

全局状况下的this

function test () {
    console.log(this)
}
test()

直接输出了window对象，由于JS在查找的时候，发现this的指向是undefined，那么在JS会将this指向到window上。

"use strict"
function test () {
    console.log(this)
}
test()

严格模式下，JS是不会将this指向到window上,因此输出是undefined。

调用状况下的this

var obj = {
    name:'hero'
}
function test () {
    console.log(this)
}
obj.test = test
obj.test()

这个代码很好的展现了，由谁调用,this就会被指向调用方所在对象。

如今咱们来思考一下，这种状况。

var obj = {
    name:'hero',
    proxy:{
        name:'proxy hero'
    }
}
function test () {
    console.log(this)
}
obj.proxy.test = test
console.log('obj.proxy.test')
obj.proxy.test()

var _p = obj.proxy
console.log('_p.test')
_p.test()

这里并无发生大家预想的

obj.proxy.test
{name: "hero", proxy: {name: "proxy hero", test: ƒ}}
 _p.test
{name: "proxy hero", test: ƒ}

而是

obj.proxy.test
{name: "proxy hero", test: ƒ}
 _p.test
{name: "proxy hero", test: ƒ}

这个例子代表了，this的绑定只受到最近的成员影响。因此，此时的this被绑定在proxy上。

call,apply,bind的this

var obj = {
    name:'hero',
    test (postString) {
        console.log(this,postString)
    }
}
var obj2 = {name:'super hero'}
obj.test.call(obj2,'call')
obj.test.apply(obj2,['apply'])

call,apply的机制是同样的，都是直接修改了内部this的指向。惟一的区别是call传入参数是挨个传入，apply是传入一整个参数数组。

var obj = {
    name:'hero',
    test (postString) {
        console.log(this,postString)
    }
}
var obj2 = {name:'super hero'}
obj.test.bind(obj2)('bind')

bind的机制与其余两个是不同的，通俗的来讲，就是bind设置以后，是蓄势待发。须要正常的执行，才能运行。这在react中常常使用。

在ES6提案中，你还可使用这种方式进行bind。

// 函数绑定运算符是并排的两个冒号（::）
var k = obj2::obj.test
k('::bind')

这个提案，如今暂时只有babel支持。

参考资料

https://developer.mozilla.org...