JS 中在严格模式下 this 的指向问题

JS 中的 this 表示函数执行时所在的上下文对象，在不同的情况下，this 指向的对象是不同的，这是 JS 中一个比较重要，也比较复杂的概念。

在严格模式下，this 指向的对象与非严格模式下不同。下面我们通过两个示例来详细讲解在严格模式下 this 的指向问题。

示例一

'use strict';

function showThis() {
  console.log(`in showThis, this is ${this}`);
}

showThis(); // TypeError: this is undefined

在函数 showThis 内部，由于是在严格模式下执行，this 并没有指向全局对象，而是 undefined，因为严格模式下，函数内部的 this 不能默认指向全局对象。

示例二

'use strict';

const person = {
  firstName: '张',
  lastName: '三',
  fullName: function() {
    console.log(`当前对象中的 this: ${this}`);
    function getName() {
      console.log(`函数中的 this: ${this}`);
      return this.firstName + this.lastName;
    }
    return getName();
  }
}

person.fullName(); // 函数中的 this: undefined
                   // Uncaught TypeError: Cannot read property 'firstName' of undefined

在函数 fullName 中调用函数 getName，其中 getName 函数是一个独立函数，它的执行环境并不是在 person 对象下。由于在严格模式下，独立函数内部的 this 不会指向全局对象，所以此时的 this 是 undefined，导致后面的 firstName 和 lastName 操作都会报错。

为了解决这个问题，我们可以使用 call、apply 或 bind 方法明确指定 this 的指向，或者使用箭头函数来绑定上下文。

'use strict';

const person = {
  firstName: '张',
  lastName: '三',
  fullName: function() {
    const _this = this;
    function getName() {
      console.log(`函数中的 this: ${this}`);
      return _this.firstName + _this.lastName;
    }
    return getName.call(_this);
  }
}

person.fullName(); // 函数中的 this: { firstName: '张', lastName: '三', fullName: [Function: fullName] }
                   // 张三

以上就是关于在严格模式下 this 的指向问题的详细说明，如果熟悉了这个概念，就可以更好地理解 JS 中的许多复杂问题了。