JS 中几种轻松处理’this’指向方式

const reduce = Array.prototype.reduce;

function sumArgs() {
   return reduce.call(arguments, (sum, value) => {
         return sum += value;
  });
}

 sumArgs(1, 2, 3); // => 6
 ```

另一方面，`this` 很难把握。

咱们经常会发现自己用的 `this` 指向不正确。下面的教你如何简单地将 `this` 绑定到所需的值。

在开始之前，我需要一个辅助函数`execute(func)`，它仅执行作为参数提供的函数。

```JavaScript
function execute(func) {
    return func();
}

 execute(function() { return 10 }); // => 10
 ```

现在，继续理解围绕`this`错误的本质:方法分离。

## 1.方法分离问题
假设有一个类`Person`包含字段`firstName`和`lastName`。此外，它还有一个方法`getFullName()`，该方法返回此人的全名。如下所示：

```JavaScript
function Person(firstName, lastName) {
    this.firstName = firstName;
  this.lastName = lastName;

  this.getFullName = function() {
     this === agent; // => true
         return `${this.firstName} ${this.lastName}`;
  }
}

const agent = new Person('前端', '小智');
 agent.getFullName(); // => '前端 小智'
 ```

可以看到`Person`函数作为构造函数被调用：`new Person('前端', '小智')`。 函数内部的 `this` 表示新创建的实例。

`getfullname()`返回此人的全名:`'前端 小智'`。正如预期的那样，`getFullName()`方法内的 `this` 等于`agent`。

如果辅助函数执行`agent.getFullName`方法会发生什么：

```JavaScript
 execute(agent.getFullName); // => 'undefined undefined'
 ```

执行结果不正确:`'undefined undefined'`，这是 `this` 指向不正确导致的问题。

现在在`getFullName()` 方法中，`this`的值是全局对象（浏览器环境中的 `window` ）。 `this` 等于 `window`，`${window.firstName} ${window.lastName}` 执行结果是 `'undefined undefined'`。

发生这种情况是因为在调用`execute(agent.getFullName)`时该方法与对象分离。 基本上发生的只是常规函数调用（不是方法调用）：

```JavaScript
 execute(agent.getFullName); // => 'undefined undefined'

// 等价于:

const getFullNameSeparated = agent.getFullName;
 execute(getFullNameSeparated); // => 'undefined undefined'
 ```

这个就是所谓的方法从它的对象中分离出来，当方法被分离，然后执行时，`this` 与原始对象没有连接。

为了确保方法内部的`this`指向正确的对象，必须这样做

1. 以属性访问器的形式执行方法:`agent.getFullName()`
2. 或者静态地将`this`绑定到包含的对象(使用箭头函数、`.bind()`方法等)

方法分离问题，以及由此导致`this`指向不正确，一般会在下面的几种情况中出现：

**回调**

```JavaScript
// `methodHandler()`中的`this`是全局对象
setTimeout(object.handlerMethod, 1000);

// React: `methodHandler()`中的`this`是全局对象
<button onClick={object.handlerMethod}>
  Click me
</button>

```JavaScript
 function Person(firstName, lastName) {
     this.firstName = firstName;
   this.lastName = lastName;
const self = this;
this.getFullName = function() {
      self === agent; // => true
          return <code>${self.firstName} ${self.lastName}</code>;
   }
 }
const agent = new Person('前端', '小智');
agent.getFullName();        // => '前端 小智'
  execute(agent.getFullName); // => '前端 小智'
  ```

```JavaScript
 function Person(firstName, lastName) {
     this.firstName = firstName;
   this.lastName = lastName;
this.getFullName = () => <code>${this.firstName} ${this.lastName}</code>;
    }
const agent = new Person('前端', '小智');
agent.getFullName();        // => '前端 小智'
  execute(agent.getFullName); // => '前端 小智'
  ```

```JavaScript
 class Person {
     constructor(firstName, lastName) {
       this.firstName = firstName;
     this.lastName = lastName;
   }
getFullName() {
       return <code>${this.firstName} ${this.lastName}</code>;
   }
 }
const agent = new Person('前端', '小智');
agent.getFullName();        // => '前端 小智'
  execute(agent.getFullName); // => 'undefined undefined'
  ```

```JavaScript
 class Person {
     constructor(firstName, lastName) {
       this.firstName = firstName;
     this.lastName = lastName;
<pre><code>this.getFullName = this.getFullName.bind(this);
 </code></pre>
}
getFullName() {
       return <code>${this.firstName} ${this.lastName}</code>;
   }
 }
const agent = new Person('前端', '小智');
agent.getFullName();        // => '前端 小智'
  execute(agent.getFullName); // => '前端 小智'
  ```

```JavaScript
 class Person {
     constructor(firstName, lastName) {
       this.firstName = firstName;
     this.lastName = lastName;
   }
getFullName = () => {
          return <code>${this.firstName} ${this.lastName}</code>;
   }
 }
const agent = new Person('前端', '小智');
agent.getFullName();        // => '前端 小智'
  execute(agent.getFullName); // => '前端 小智'
  ```