Как использовать анонимные функции в классе ES6 - PullRequest
Новая
       8

Как использовать анонимные функции в классе ES6

0 голосов
/ 28 июня 2018

Я новичок в интерфейсной разработке и 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?

1 Ответ

0 голосов
/ 28 июня 2018

Вы не должны добавлять анонимные функции в ваши классы 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
...