ES6类方法无法调用，console.log输出undefined，求解决方案

Hey there! Let's figure out why you're seeing undefined when trying to call methods on your ES6 class, and get those method results showing up in the console properly. Here are the most common issues and fixes:

1. You're calling the method on the class itself, not an instance #

ES6 class methods are meant to be called on instances of the class, not the class constructor directly. If you skip creating an instance with new, you'll get undefined (or an error in strict mode).

Wrong: #

class Greeting {
  sayHi() {
    return "Hello!";
  }
}

// Trying to call the method on the class, not an instance
console.log(Greeting.sayHi()); // undefined

Fixed: #

const myGreeting = new Greeting();
console.log(myGreeting.sayHi()); // "Hello!"

2. The this context inside your method is broken #

If your method uses this to access class properties, but this isn't pointing to the class instance, you'll get undefined when trying to access those properties. This often happens in callbacks (like setTimeout or event listeners).

Wrong: #

class User {
  constructor(username) {
    this.username = username;
  }

  announce() {
    setTimeout(function() {
      // `this` here doesn't point to the User instance!
      console.log(`I'm ${this.username}`); // "I'm undefined"
    }, 100);
  }
}

const user = new User("Bob");
user.announce();

Fixed (two common ways): #

• Use an arrow function (it inherits the this context from the surrounding scope):

  announce() {
    setTimeout(() => {
      console.log(`I'm ${this.username}`); // "I'm Bob"
    }, 100);
  }
  

• Bind this to the callback function:

  announce() {
    setTimeout(function() {
      console.log(`I'm ${this.username}`);
    }.bind(this), 100);
  }
  

3. Your method doesn't have a return statement #

If you're expecting the method to return a value but forgot to add return, console.log will print undefined because the method implicitly returns undefined.

Wrong: #

class Calculator {
  multiply(a, b) {
    // No return here!
    a * b;
  }
}

const calc = new Calculator();
console.log(calc.multiply(4, 5)); // undefined

Fixed: #

multiply(a, b) {
  return a * b;
}

console.log(calc.multiply(4, 5)); // 20

4. You used incorrect syntax to define the method #

ES6 class methods have a specific syntax—if you accidentally use object literal syntax (like method: function() {}), it won't work as expected (unless you're using class fields, which require specific environment support).

Wrong: #

class MyClass {
  // Incorrect syntax for a class method
  myMethod: function() {
    return "Oops, wrong syntax!";
  }
}

Fixed: #

class MyClass {
  myMethod() {
    return "Correct syntax!";
  }
}

const instance = new MyClass();
console.log(instance.myMethod()); // "Correct syntax!"

Start by checking these scenarios—chances are one of them is causing your undefined issue. If you share a snippet of your actual code, we can narrow it down even more!

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