javascript - 如何在 ES6 类中使用匿名函数

Question

我是前端开发和 JavaScript 的新手，我正在研究 JavaScript ES6 类、匿名函数和函数声明。我试图在 ES6 类中使用匿名函数的概念，但我在语法上出错了。

我尝试了以下方法，但没有用:

class ChatController {
    constructor(a) {
        this.a = a;
        this.a ++;
        console.log("hello world");
    }
   var getChat = function() {
       console.log(this.a);
     }
}

我做错了什么？

是否可以在 ES6 类中使用匿名函数？

Answer 1

您不应该向您的 JavaScript 类添加匿名函数，而是在类的主体中声明您的函数/方法。

...然而

---

注意事项

下面的例子是为了可能性而不是推荐!下面的一些例子，当分配匿名函数给类/原型(prototype)时，相反在类里面声明它们，被认为是不好的做法是有原因的。仅当您有充分的理由时才使用它们!

class ChatController {
    static staticNamedFunction() {
      console.log('ChatController.staticNamedFunction()');
    }
    
    constructor(a) {
        this._a = a;
        this._a++;
        
        // ** bad practice **
        // add an anonymous function under a name 
        // to the instance of the class during construction
        this.functionFromConstructor = () => {
          console.log('ChatController.functionFromConstructor(...)');
        };
        
        console.log('ChatController.constructor(...)');
    }
    
    // regular getter
    get a() {
      return this._a;
    }
    
    // Java-style getter
    getA() {
      return this._a;
    }
    
    namedFunction() {
      console.log('ChatController.namedFunction()');
    }
}

// call a static function of the class
ChatController.staticNamedFunction();

// ** bad practice **
// add an anonymus function, that behaves as a statis function under a name
ChatController['newStaticFunction'] = () => {
  console.log('newStaticFunction');
};

// ...and call that function
ChatController.newStaticFunction();

// initialize the class to use the instance functions (or methods)
var chat = new ChatController(0);

// call a function of the class
chat.namedFunction();

// call that function, that was defined in the constructor
chat.functionFromConstructor();

// ** bad practice **
// add an anonymus function to the instance under a name
// that will only be available in this instance of the class
chat['newFunction'] = () => {
  console.log('newFunction');
}

// ..and call that function
chat.newFunction();

// ** bad practice **
// add an anonymus function to prototype of the class under a name
// that will be available on all instances of the class
// even on the previously instantiated ones
ChatController.prototype.anotherNewFunction = () => {
  console.log('anotherNewFunction');
}

// ..and call that function on the instance, that was previously declared
chat.anotherNewFunction();

// based on your sample code:
var getChat = function() {
  var chat = new ChatController(0);
  
  // accessing '_a' via a getter
  console.log(chat.a);
  
  // accessing '_a' via a Java-style getter
  console.log(chat.getA());
  
  // ** bad practice **
  // accessing '_a' directly
  console.log(chat._a);
  
  // ** bad practice **
  // adding and binding an anonymous function under a name
  chat['bindedFunction'] = function() {
    // after binding the anonymous function, you can access 
    // the instance functions/methods and variables/properties of the class
    console.log('bindedFunction', this.a);
  }.bind(chat);
  
  // ...and call that function
  chat.bindedFunction();
  
  return chat;
}

getChat(); // returns a ChatConsroller instance