this 的指向

---

一、认识

在实际的开发中，this指向主要分为以下四种场景：

• 作为对象的方法调用。
• 作为普通函数调用。
• 构造器调用。
• Function.prototype.call或Function.prototype.apply调用。

二、对象调用

当函数作为对象的方法被调用时，this指向该对象

var obj = {
  name: '张三',
  getName: function () {
    return this.name;
  },
  getThis: function () {
    return this;
  },
};

console.log(obj.name);      // 张三
console.log(obj.getName()); // 张三
console.log(obj.getThis()); // {name: "张三", getName: ƒ, getThis: ƒ}

三、函数调用

当函数不作为对象的属性被调用时，也就是我们常说的普通函数方式，此时的this总是指向全局对象。在浏览器的JavaScript里，这个全局对象是window对象。

window.name = '张三';
var obj = function () {
  return this;
};
console.log(obj()); // {window: Window, self: Window, document: document, name: "张三", location: Location, …}

注意：ECMAScript 5的strict模式下，这种情况下的this已经被规定为不会指向全局对象，而是undefined：

'use strict';
window.name = '张三';
var obj = function () {
  return this;
};
console.log(obj()); // undefined

四、构造器调用

JavaScript中没有类，但是可以从构造器中创建对象，同时也提供了new运算符，使得构造器看起来更像一个类。
大部分JavaScript函数都可以当作构造器使用。构造器的外表跟普通函数一模一样，它们的区别在于被调用的方式。当用new运算符调用函数时，该函数总会返回一个对象，通常情况下，构造器里的this就指向返回的这个对象。

window.name = '张三';

var Object = function () {
  this.name = '小张';
  getThis = function () {
    return this;
  };
};

var obj = new Object();
console.log(obj.name); // 小张

五、call、apply调用

跟普通的函数调用相比，用Function.prototype.call或Function.prototype.apply可以动态地改变传入函数的this。

• apply()
  第二个参数为数组类型，进行传参。
• call()
  第二~N个参数，进行传参。
• bind()

var obj1 = {
  name: '张三',
  getName: function () {
    return this.name;
  },
};
var obj2 = {
  name: '小张',
};

console.log(obj1.getName());          // 张三
console.log(obj1.getName.call(obj2)); // 小张