Electron中ES5-6混合OOP开发：Promise与this绑定优化方案问询

Great question—all those bind() calls can make your code feel clunky and hard to maintain, especially when mixing prototype methods, setTimeout, and Promises. Let's walk through a couple of practical solutions tailored to your Electron environment that eliminate repetitive binding while keeping your object logic clean and sequential.

Solution 1: Wrap Prototype Methods to Return Promises Directly #

Instead of passing resolve into your methods and manually creating Promises outside, let each prototype method handle its own Promise creation. This keeps this aligned naturally (since you'll call methods directly on the instance) and eliminates the need for external bind() calls.

Here's how to refactor your original code:

// ES5-style constructor function
function Importing() {
  this.name = "boot";
}

// Start method returns a Promise, handles setTimeout internally
Importing.prototype.start = function() {
  return new Promise((resolve) => {
    console.log('start -------->');
    // Use an arrow function in setTimeout to preserve `this` context
    setTimeout(() => {
      this.test(resolve);
    }, 1000);
  });
};

Importing.prototype.test = function(resolve) {
  console.log('Test -------->');
  resolve('Test'); // Resolve the Promise created in start()
};

// End method returns a resolved Promise directly
Importing.prototype.end = function() {
  console.log('end -------->');
  return Promise.resolve('end');
};

// Usage: Clean Promise chain with no bind() calls
const scan = new Importing();
Promise.resolve()
  .then(() => scan.start()) // Call method directly on instance—`this` is correct
  .then((startResult) => {
    console.log('Received from start:', startResult);
    return scan.end(); // Same here, no binding needed
  })
  .then((endResult) => {
    console.log('Received from end:', endResult);
  })
  .catch((error) => {
    console.log('Error message:', error);
  });

Why this works: #

• When you call scan.start(), this automatically refers to the scan instance (since it's a method call on the object).
• The arrow function inside setTimeout preserves the surrounding this context, so we don't need this.test.bind(this) anymore.
• Each method returns a Promise, so the chain flows naturally without needing to wrap calls in new Promise() externally.

Solution 2: Use ES6 Classes (Electron-Friendly) #

If you're open to ES6 classes (which Electron fully supports), you can simplify things even further by either binding methods once in the constructor or using class field arrow functions (a widely supported extension to ES6) to avoid binding entirely.

Option A: Constructor Binding (Strict ES6) #

class Importing {
  constructor() {
    this.name = "boot";
    // Bind methods once in the constructor—no more bind() elsewhere
    this.test = this.test.bind(this);
    this.end = this.end.bind(this);
  }

  start() {
    return new Promise((resolve) => {
      console.log('start -------->');
      setTimeout(() => this.test(resolve), 1000);
    });
  }

  test(resolve) {
    console.log('Test -------->');
    resolve('Test');
  }

  end() {
    console.log('end -------->');
    return Promise.resolve('end');
  }
}

// Usage is identical to the ES5 version
const scan = new Importing();
Promise.resolve()
  .then(() => scan.start())
  .then((startResult) => {
    console.log('Received from start:', startResult);
    return scan.end();
  })
  .then((endResult) => {
    console.log('Received from end:', endResult);
  })
  .catch((error) => {
    console.log('Error message:', error);
  });

Option B: Class Field Arrow Functions (Simpler) #

Electron supports class field arrow functions (even though they're not strictly ES6), which automatically bind this to the instance. This removes the need for constructor binding entirely:

class Importing {
  constructor() {
    this.name = "boot";
  }

  // Arrow function method—`this` is always the instance
  start = () => {
    return new Promise((resolve) => {
      console.log('start -------->');
      setTimeout(() => this.test(resolve), 1000);
    });
  };

  test = (resolve) => {
    console.log('Test -------->');
    resolve('Test');
  };

  end = () => {
    console.log('end -------->');
    return Promise.resolve('end');
  };
}

// Same clean usage as before
const scan = new Importing();
Promise.resolve()
  .then(() => scan.start())
  .then((startResult) => scan.end())
  .then((endResult) => console.log('Final result:', endResult))
  .catch((error) => console.log('Error:', error));

Key Takeaways #

Both solutions eliminate repetitive bind() calls while keeping your object logic modular and easy to maintain:

• For strict ES5 prototype style, go with Solution 1—wrap methods to return Promises and use arrow functions inside setTimeout to preserve context.
• For cleaner, more modern code (supported fully in Electron), ES6 classes with constructor binding or arrow function methods are the way to go.

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