一文帮你解决this指向问题

昨天，同事遇到了一个问题。让帮查一下，最后发现是this指向问题。所以，决定写一下this指向的文章。帮助同事的同时，也能让大家借鉴下。this绑定共分为四种情况，构造函数、强绑定、隐式绑定和默认绑定四种。

默认绑定

首先，我们从最简单的默认绑定说起。默认绑定是指this的默认行为, 当在某个函数中直接使用this时，由于函数内并非对象，所以this不是代表函数，而是代表全局window，严格模式下则是undefined。

// 默认绑定示例
function defaultThis() {
    console.log(this);  //此时输出window/undefined
}

defaultThis();
           

隐式绑定

其次，说下我们最常用的this指向情况（隐式绑定）。这里我们首先要强调一下this英文本意"这",放在计算机里他就是代指前面的对象。在人类世界这样的好处是，使对话更让简洁且不影响传达本意，而在计算机中，this则可以减少复杂变量的编写成本，而且书写也更加美观。所以这里的this通常指向对象。

// 隐式绑定示例
const Yaoshen = {
    name: 'yaoshen',
    age:  '24',
    height: '187',
    dog: {
        name: '欢欢',
        sex: '女'
    },

    selfIntroduction: () => {
        console.log(this.name); //这里输出'yaoshen'
    }
}
           

硬绑定

然后，硬绑定是在隐式绑定基础上，修改了this的指向。这里之所以叫硬绑定是因为它的优先级要高于前两种。实现硬绑定的方法有三种，分别是call、bind、apply。虽然这三种在语法上略有差别，但是本质上都通过传入的第一个参数修改了this指向。

// 硬绑定示例
const Yaoshen = {
    name: 'yaoshen',
    age:  '24',
    height: '187',
    dog: {
        name: '欢欢',
        sex: '女'
    },

    selfIntroduction: () => {
        console.log(this.name);
    }
}

const mars = {
    name: 'mars'
}

Yaoshe.selfIntroduction.call(mars); //这里输出'mars'
           

构造函数

// 构造函数绑定示例
function myConstructor(name, sex) {
    return {
        name,
        sex
        selfIntroduction: () => {
            console.log(this.name);
        }
    }
}

const tiantian = new myConstructor('tiantian', '女');
const mars = {
    name: 'mars',
    sex: '男'
}

tiantian.selfIntroduction.call(mars); //这里输出'mars'
           

结束语