В чем разница между этими двумя способами создания конструкторских функций в Javascript? [Дубликат]

Есть некоторые отличия между Class и Function - большинство людей начнут с того, что класс будет «просто синтаксическим сахаром», но этот сахар имеет значение совсем немного. Когда парсер JS обрабатывает код JavaScript, парсер будет сохранять их в разных узлах AST, как показано здесь, ClassDeclaration и ClassExpression - это разные типы узлов в полученном дереве AST:

https: // github.com/estree/estree/blob/master/es2015.md#classes

Вы можете видеть, что для этого анализатора новая спецификация классов ES6 вводит ряд новых элементов AST для синтаксис:

• ClassBody
• MethodDefinition
• ClassDeclaration
• ClassExpression
• MetaProperty

Поскольку синтаксис AST не является стандартным, в зависимости от анализатора может быть больше или меньше типов, но важно заметить, что когда код вводит объявление класса или выражение класса, он будет интерпретироваться по-разному JavaScript.

Это означает, что объявления класса и функции не могут быть обменены. Вы можете увидеть это, если попытаетесь написать

class notWorking {
  return 1;  // <-- creates a parser error
};

. Это связано с тем, что когда парсер встречает ключевое слово класса, он начнет обрабатывать следующий код как ClassBody либо ClassDeclaration, либо ClassExpression, а затем он expexts find MethodDefinitions.

Это небольшая проблема, потому что создание частных переменных становится немного сложнее. Объявление функции может точно определять частную переменную следующим образом:

function myClass() {
    var privateVar;
}

Объявление класса не может иметь этого:

class myClass {
    var privateVar; // ERROR: should be a method
}

Это потому, что синтаксис класса допускает только методы для объявления внутри тела класса. По крайней мере, сейчас.

Однако существует предложение создать частные поля:

https://github.com/zenparsing/es-private-fields

Таким образом, в будущем вы могли бы сказать

class myClass {
   #privateVar; // maybe this works in the future?
}

Существует отдельный ответ, рассматривающий частные свойства в классах ES6, что предполагает некоторые обходные пути, например использование символов:

Частные свойства в JavaScript Классы ES6

var property = Symbol(); // private property workaround example
class Something {
    constructor(){
        this[property] = "test";
    }
}

Естественно, что существуют различия между классами и функциями. Одним из них является Подъем 1 - в отличие от функций, вы не можете объявить класс в любом месте области:

Важное различие между объявлениями функций и объявлениями классов состоит в том, что объявляются объявления функций, а объявления классов - нет. Сначала вам нужно объявить свой класс, а затем получить доступ к нему

Объявления классов и объявления функций весьма схожи;

function foo1() {} // can be used before declaration
class  foo2{}      // new foo2(); works only after this declaration

Выражения класса работают аналогично функции например, они могут быть назначены переменной:

var myClass = class foobar {};

Больше различий 1

1. Тело exression / декларации класса всегда выполняется в Строгий режим - не нужно указывать, что вручную
2. У классов есть специальный конструктор ключевых слов - может быть только один из них, или возникает ошибка. Функции могут иметь несколько определений переменной функции с именем «конструктор»
3. . Классы имеют специальное ключевое слово super, которое относится к конструктору родительских классов. Если вы находитесь внутри конструктора, вы можете вызвать super (x, y); для вызова конструктора родительского класса, но внутри метода вы можете вызвать super.foobar () для вызова вызова любой функции родительского класса.
4. Внутри тела класса вы можете определить функцию со статическим ключевым словом, чтобы ее можно было вызывать, используя только ClassName.FunctionName () -syntax.
5. В объявлениях классов и выражениях можно использовать ключевое слово extends, например class Dog extends Animal
6. MethodDeclaration не нуждается в функции - префикс, таким образом, вы можете определить функцию «ok» внутри класса «m» следующим образом: class m {ok () {}}. На самом деле даже не разрешено определять функцию как class m {function ok () {}}

Однако после того, как парсер завершил работу, класс экземпляр, по сути, работает так же, как и любой другой объект.

Новый синтаксис ES6 Class является, по существу, более понятным способом выражения объектов традиционным способом ООП, и если вам это нравится, вы должны его использовать.

EDIT: также синтаксис класса ES6 имеет и другое ограничение: он не позволяет использовать функции-члены с помощью лексической привязки с использованием стрелки жира. Кажется, что ES7 имеет экспериментальную функцию . Это может быть полезно, например, когда методы привязки к обработчикам событий, связанный с этим вопрос здесь .

1 https: // developer. mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes