如何在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 类中，而应在类的主体中声明您的函数/方法。

...然而

笔记

此处提供以下示例是为了提供可能性，而不是为了推荐！下面的一些示例，当将匿名函数分配给类/原型时，而不是在类的主体中声明它们时，由于某种原因被认为是不好的做法。仅当您有充分理由时才使用它们！

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