如何在ES6类中使用匿名函数 [英] How to use anonymous functions in ES6 class

问题描述

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

I am new to front-end development and JavaScript, I am going through JavaScript ES6 classes, anonymous functions and function declarations. I am trying to use the concept of anonymous functions in an ES6 class but I am going wrong syntactically.

我尝试了以下不起作用的方法:

I tried in following way which did not work:

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

我在做什么错了?

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

推荐答案

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

You shouldn't add anonymous functions to your JavaScript classes, instead declare your functions/methods in the body of the class.

...但是

此处提供以下示例是为了可能，而不是建议！以下某些示例是在将匿名函数分配给类/原型时使用的，而不是在类的主体中声明它们的原因是出于某种原因而考虑的不良做法.仅在有充分理由的情况下使用它们！

The examples below are presented here for the sake of possibility, not for recommendation! Some of the examples below, when assigning anonymous functions to the class/prototype, instead of declaring them in the body of the class, are considered bad practices for a reason. Only use them if you have a solid reason to do so!

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

这篇关于如何在ES6类中使用匿名函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！