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
网友评论