this的指向问题

前言：js中常常会看到this.，在不理解this的时候就会形成this的“滥用”，致使开发过程当中须要花费大量的时间查找由于this的指向问题致使的bug。但愿经过本文可以让你们理解this，节省你们开发时间。

一、什么是this

this是当前执行代码的环境对象，若是在非严格模式下，老是指向一个对象；若是在严格模式下，能够是任意值。 在不一样的状况下this的指向也有所不一样，接下来咱们看一下几种不一样状况下this的指向。

二、不一样状况下this的指向

• 全局环境

全局环境中，this指向全局对象（本文只讨论在浏览器环境，不讨论nodejs）：

console.log(this === window); // true
复制代码

• 函数环境

函数环境中，this的值取决于函数被调用的方式，也能够理解为函数由谁调用，this就指向谁：

function f1() {
    return this;
}
console.log(f1() === window); // true
复制代码

f1()调用的时候至关于window.f1()，这里是省略了window。

• 对象方法中

当函数做为对象中的方法被调用时，this是调用该函数的对象：

var user = {
    age: 31,
    getAge: function() {
        return this.age;
    }
}
console.log(user.getAge()); // 31
复制代码

this是在getAge函数中，getAge又是被user调用，因此getAge中的this就指向了user，this.age也就是user.age。

• 原型链中

若是this所在的方法存在于原型链中，那么this也是指向该方法的调用对象：

var util = {
    sum: function() {
        return this.a + this.b;
    }
};
var _util = Object.create(util);
_util.a = 1;
_util.b = 2;
console.log(_util.sum()); // 3
复制代码

• 构造函数中

当一个函数用做构造函数时（使用new关键字），它的this被绑定到正在构造的新对象：

function userConstructor() {
    this.age = 33;
}
var user3 = new userConstructor();
console.log(user3.age); // 33
function userConstructor2() {
    this.age = 34;
    return {
        age: 35
    }
}
var user4 = new userConstructor2();
console.log(user4.age); // 35
复制代码

对于user3.age这个很好理解，而user4中构造函数里直接返回了一个对象，这里若是构造函数中直接返回一个对象，那么经过new关键字建立出来的对象就是return的那个值，因此user.age值为35。

• 箭头函数中

箭头函数中，this与封闭词法环境的this保持一致：

var user4 = {
    name: 'tom',
    age: 20,
    getName() {
        console.log(this.name);
    },
    getAge: () => {
        console.log(this.age);
    }
}
user4.getName(); // tom
user4.getAge(); // undefined
复制代码

getName不是用的箭头函数，因此getName中的this指向该函数的调用者user4，this.name也就至关于user4.name；
可是getAge是一个箭头函数，它里面的this指向该函数所在的做用域，根据做用域相关的知识能够知道getAge应该在全局环境中，因此this指向window，这里假设全局环境没有age变量，因此this.age的值就为undefined。

三、如何改变this的指向

虽然this的指向有必定的规则，可是咱们也能够主动的修改它的指向，如下三种方法能够修改this：

• call
• apply
• bind

这三种方法能够指定this，具体怎么使用就再也不多说，你们能够自行搜索学习。

四、总结

this的指向是前端的一个比较很差理解的知识点，可是一旦理解了this，对咱们在平时开发过程当中有很大的帮助，可以减少项目出现bug的概率，节省开发时间。