【原创】this 指向问题总结

2019-06-03 本文已影响0人 whelm

JavaScript 中关于 this 指向的问题是一个令人比较头疼的问题，至于为什么要在 JavaScript 中引入这种 this 机制，我个人认为是为了使用 call，apply 等方法，使得同一个方法可以在不同的域中进行调用，从而产生不同的结果。

关于 this 的指向问题，为了能弄清这个问题，我们可以将常见的情况分为四种：

隐式绑定（普通绑定，在编程过程中较为常见）
显式绑定（使用 call，apply 等方法进行手动绑定）
new 关键字绑定（创建实例时构造方法中的 this 指向）
”词法“绑定（箭头函数）
全局指向

下面我们来一个一个进行分析。

隐式绑定

该类型适合分析大部分的 this 指向问题。相信大家并不陌生，this 的指向问题最主要是要分析方法被调用时发生了什么，也就是说 this 的指向由方法调用时决定，而不是定义时决定。

对于隐式绑定，我们要分析方法调用时，是被谁调用的，this 就指向谁。例如：

const user = {
  name: 'nena',
  get: function() {
    console.log(this.name);
  }
}

user.get();

最简单的办法是查看调用时方法左边是否有. ，如果有. ，那么很大可能性是隐式绑定，如果.左侧有表达式，且该表达式得到的是一个引用，则 this 就指向这个引用。

上面的例子中.左侧是 user 实例的引用，所以 this 指向 user, this.name 相当于 user.name

隐式绑定的情况较为简单，如果不能解决问题，就要查看是否是以下的另外一些情况。

显式绑定

显式绑定比较好区分，甚至，如果是显式绑定，说明写这段代码的人对于 this指向胸有成竹。例如，还是上面这段代码，只不过改为显式绑定：

const user = {
  name: 'nena',
}
function get() {
  console.log(this.name);
}

get() // undefined
get.call(user);

如果直接调用 get 方法，没有使用任何对象进行调用，this 将会落于全局对象上，全局对象没有声明 name 的变量，因此得到 undefined 的结果。如果我们想要 this 指向上面声明的 user 对象，则可以使用 call 方法。

call 方法是定义在 function 原型上的一个方法，它的参数意为调用 call 的方法将于这个参数上进行调用。由代码解释就是

get.call(user)  == user.get()

同时，call 方法从第二参数开始也可以传递原方法进行调用时需要的参数，相似的方法还有 apply 方法。对此不进行赘述，具体可以查看这两个方法的 api.

new 关键字绑定

另外一种是在构造方法中的 this，一旦使用该构造方法创建实例后，构造方法中的 this 将指向这个实例。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const p = new Person('nena', 0);
console.log(p.name);

使用 Person 创建实例之后，构造函数中的 this 指向 p, 所以赋给 this 的name, 相当于赋给了 p 实例。

”词法“绑定

这种情况一般指箭头函数中 this 的指向。我们首先来看一下不使用箭头函数会发生什么情况。

var user =  {
  lang: ['java', 'sql', 'js'],
  getLang: function () {
     return this.lang.reduce(function(pre, cur, i) {
        if(i === this.lang.length - 1){
           return `${pre} and ${cur}.`;
        }else {
           return pre ? `${pre}, ${cur}` : cur;
        }
     }, '')
  }
}

var s = user.getLang();
console.log(s);

以上这段代码照理说应该打印出java, sql and js. ，但实际上报错了，错误信息为

Uncaught TypeError: Cannot read property 'length' of undefined

就是说第五行，this.lang为 undefined.造成这个问题原因是 this 指向。我们分析一下这个 this 的指向，先使用第一种情况分析，该 this 应当为 reduce 方法中这个参数，即匿名函数调用时决定，但是在代码执行时 reduce 的参数什么时候进行了调用，由谁调用，这些都无法确定，因此，默认为落到上层，即全局环境中，全局作用域未声明 lang 字段，就会报错了。

这里我们需要将这个 this 指向 user,那么该怎么做呢? 最简单的方法就是使用箭头函数：

var user =  {
  lang: ['java', 'sql', 'js'],
  getLang: function () {
     return this.lang.reduce((pre, cur, i) => {
        if(i === this.lang.length - 1){
           return `${pre} and ${cur}.`;
        }else {
           return pre ? `${pre}, ${cur}` : cur;
        }
     }, '')
  }
}

var s = user.getLang();
console.log(s);

这样就解决了问题。关于箭头函数，它本身没有 this,它内部的 this 就像词法变量一样，会寻找最近的父级作用域中的 this

全局指向

这种情况就是上面提到的，如果找不到对应的 this 指向，那么 this 最终会落到全局环境，在非严格模式下指向 window, 在严格模式下为 undefined

var age = 25;
function sayAge () {
  console.log(`My age is ${this.age}`)
} 
sayAge();

'use strict';
var age = 25;
function sayAge () {
  console.log(`My age is ${this.age}`)
}
sayAge();

下方的代码报错：

Uncaught TypeError: Cannot read property 'age' of undefined