Я в последнее время вхожу в ES6 и наконец серьезно изучаю занятия. Я читал, что классы - это всего лишь прикрытие над объектами в Javascript, однако синтаксис мне кажется наиболее неудобным.

Может ли кто-нибудь объяснить / указать ссылку, где они объясняют, как классы имитируют и, что важно, как мы можем отобразить их в Javascript способ манипулирования объектами в нашем уме.

class NoteStore {
  constructor() {
    this.bindActions(NoteActions);

    this.notes = [];
  }
}

Согласно приведенному выше примеру кода, я думал, что классы - это просто конструкторы, но тогда что делает конструктор внутри конструктора?

Как человек, который начал изучать программирование с Js, я считаю, что добавление классов (также классов React) является ужасным дополнением к Js, поэтому любая помощь будет потрясающей.

Благодарность

3
Kayote 16 Дек 2015 в 13:46

3 ответа

Лучший ответ

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

Метод конструктора в определении класса несколько особенный, так как он вызывается при конструировании объекта. Поскольку он особенный, его нужно как-то пометить, и это делается путем присвоения ему имени constructor.

В классическом Javascript (ООП на основе прототипа) это работает по-другому: конструктор объекта - это простая функция, а методы, унаследованные каждым экземпляром объекта, определяются для объекта в свойстве .prototype этой функции. В конструкторе ООП на основе прототипа нет ничего особенного, это просто функция, и настоящая магия заключается в ключевом слове new и использовании this при создании объекта.

Выражение этого в форме class с помощью метода конструктора просто служит разработчикам классического ООП и, возможно, обеспечивает более компактный синтаксис.

class NoteStore {
  constructor() {
    this.bindActions(NoteActions);
    this.notes = [];
  }

  bindActions(actions) {
    ..
  }
}

Это выражается в простом Javascript:

function NoteStore() {
  this.bindActions(NoteActions);
  this.notes = [];
}

NoteStore.prototype.bindActions = function (actions) {
  ..
}
6
Bergi 16 Дек 2015 в 11:02

Ключевое слово JS class:

Javascript имеет систему наследования, которая называется прототипом наследования. Это система, в которой объекты наследуют свойства от других объектов. Когда функция вызывается с помощью ключевого слова new, новый созданный объект «наследует» свойства от свойства prototype функции конструктора.

Ключевое слово JS class является просто синтаксическим сахаром для функции конструктора. Ключевое слово class просто имеет другой синтаксис, но в сущности оно достигает той же цели создания объектов с помощью прототипов. Возьмем для примера следующий фрагмент:

class human {

  constructor (name) {
    this.name = name;
  }

  speak () { console.log('hi')}

};

console.log(typeof human); 
// logs function, a class is just a constructor function under the hood

const me = new human('Willem');

console.log(Object.getPrototypeOf(me) === human.prototype); 
// logs true, the object me has a reference to the human.prototype object.

me.speak(); 
// This speak method is located on the prototype of the object, not the object itself

console.log(me.hasOwnProperty('speak')); // logs false
console.log(human.prototype.hasOwnProperty('speak')); // logs true
0
Willem van der Veen 6 Июн 2019 в 14:37

Я думаю, что объяснение в MDN вполне понятно. Ключевое слово class - это не что иное, как новое имя для реализации ООП старого стиля, где мы используем конструктор функций для получения той же функциональности.

Ключевое слово class перенесено в JavaScript, чтобы сделать его более похожим на другие традиционные объектно-ориентированные языки, такие как C ++, Java. Но по сути это все еще конструктор функций с небольшими изменениями.

На ваш вопрос «что конструктор делает под конструктором» ES6 сделал некоторую модификацию для более старой версии, так что класс не будет действовать как конструктор для examaple класса, который не может быть вызван напрямую (без нового ключевого слова), как

NoteStore();

Это приведет к ошибке в ES6, но если это был конструктор функций, как в ES5, то это работает, оставляя вас в опасности ошибок. занятия тоже не подняты.

Для более подробной информации и примера вы можете прочитать эту ссылку.

4
sdgluck 16 Дек 2015 в 11:52