JavaScript中this指向的修改

已经介绍过JavaScript中this指向的原理，今天介绍一下this指向的几个复杂解析，和如何改变this的指向。

关于this的指向，有几个点需要注意：

• this指向的，只能是对象。
• this指向谁，取决于函数的执行环境，而不是在创建时就决定了。
• 匿名函数的执行环境具有全局性。
• 对于普通函数调用，我们通常把this绑定为null

一、this问题

举个?：

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

const xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 29, 正常结果
getAge(); // NaN

this指向函数被调用的对象(执行环境)。
由于这是一个巨大的设计错误，ECMA规定，在strict模式下让函数的this指向undefined。
上面?在strict模式下调用getAge()，会得到一个错误。这个决定只是让错误及时暴露出来，并没有解决this应该指向的正确位置。

有时因为编写闭包方式不同，也会导致this指向问题，而且不易被发现。
再来一个?:

const name = 'this window'
const obj = {
    name : 'my object',

    getName : function(){
        function getNameFunc(){
            return this.name
        }
        return getNameFunc()
    }
}
obj.getName()  //undefined

getNameFunc在匿名函数中执行，匿名函数的执行环境具有全局性，this又指向window了！

二、改变this的指向

• 定义that变量捕获this

修复第二个?：

const name = 'this window'
const obj = {
    name : 'my object',

    getName : function(){
        const that = this;  //that捕获this为对象obj
        function getNameFunc(){
            return that.name
        }
        return getNameFunc()
    }
}
obj.getName()  //my object

我们还可以调用函数本身的apply、call、bind来指定函数的this指向哪个对象。

• apply

apply接收两个参数，第一个参数是需要绑定的this变量，第二个参数是Array，表示函数本身的参数。
修复第一个?:

function getAge() {
    const y = new Date().getFullYear();
    return y - this.birth;
}

const xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 29, 正常结果
getAge.apply(xiaoming,[]); // 29,正常结果

• call

call与apply类似，唯一的区别是：
apply()把参数打包成Array传入，而call()把参数按顺序传入。

• bind

函数的bind指定一个对象，将this绑定到这个对象上。
用bind修复第一个?:

function getAge() {
    const y = new Date().getFullYear();
    return y - this.birth;
}

const xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};


xiaoming.age(); // 29, 正常结果
getAge.bind(xiaoming)() //29,正常结果

三、箭头函数(ES6)

箭头函数解决了this指向混乱问题。
this对象的指向是可变的，但在箭头函数中它是固定的。
箭头函数有一个重要的特性：
函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象
解释一下底层原因：
this指针的固定化并不是箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this，正是因为它没有this，所以不能用作构造函数。
修复第二个?:

const name = 'this window'
const obj = {
    name : 'my object',

    getName : function(){
        const getNameFunc = ()=> {
            return this.name
        }
        return getNameFunc()
    }
}
obj.getName()  //my object

转载请标明来源：sherrybaby的博客