如何在ES6中替代`bind(this)`？如何用箭头函数替换代码第3行？

Hey there! Let's break down your two ES6 questions one by one, with clear examples to make it easy to follow:

一、ES6中替代bind(this)的常见方案 #

bind(this) used to be the go-to way to lock down a function's this context, but ES6 gives us cleaner alternatives:

• 箭头函数：Arrow functions don't create their own this—they inherit the this from the outer scope where they're defined. This makes them perfect for replacing bind(this) in async callbacks, event handlers, and similar scenarios.
  Example:

  // Old approach
  setTimeout(function() {
    console.log(this.username);
  }.bind(this));
  
  // ES6 replacement
  setTimeout(() => {
    console.log(this.username);
  });
  

• Class Fields Syntax：When defining methods in a class, assign an arrow function directly as a class field. This permanently binds the method's this to the class instance, so you don't need to call bind in the constructor.
  Example:

  // Old approach
  class Profile {
    constructor(username) {
      this.username = username;
      this.showName = this.showName.bind(this);
    }
    showName() {
      console.log(`My username is ${this.username}`);
    }
  }
  
  // ES6 replacement
  class Profile {
    constructor(username) {
      this.username = username;
    }
    // Arrow function method auto-binds to the instance
    showName = () => {
      console.log(`My username is ${this.username}`);
    }
  }
  

• call/apply for one-off calls：If you only need to specify this for a single function execution, skip binding entirely and use call or apply to invoke the function directly with the desired context.
  Example:

  // Old approach
  this.handleSubmit.bind(this)(formData);
  
  // ES6 replacement (one-off call)
  this.handleSubmit.call(this, formData);
  

二、Replacing Line 3 with an Arrow Function (Common Scenarios) #

Since you didn't share the original code, I'll cover two of the most frequent use cases where bind(this) appears on a line:

Scenario 1: Binding a class method in the constructor #

Suppose your original code looks like this (Line 3 is the bind call):

class TodoList {
  constructor() {
    this.items = [];
    this.addItem = this.addItem.bind(this); // Line 3
  }
  addItem(text) {
    this.items.push(text);
  }
}

Replace Line 3 by redefining the method as an arrow function class field, then remove the bind line:

class TodoList {
  constructor() {
    this.items = [];
  }
  // Replace the bind logic with an arrow function method
  addItem = (text) => {
    this.items.push(text);
  }
}

Scenario 2: Binding an async callback #

Suppose your original code looks like this (Line 3 is the bind call):

function fetchPosts() {
  this.posts = [];
  fetch('/api/posts')
    .then(res => res.json())
    .then(function(data) { this.posts = data; }.bind(this)); // Line 3
}

Replace Line 3 by swapping the regular function with an arrow function, which automatically inherits the outer this:

function fetchPosts() {
  this.posts = [];
  fetch('/api/posts')
    .then(res => res.json())
    .then((data) => { this.posts = data; }); // Replaced Line 3
}

The key takeaway: Arrow functions use lexical scoping for this, meaning they capture the this value from the scope where they're defined—no need for bind(this) to fix the context.

内容的提问来源于stack exchange，提问作者BAE