Ключевое слово класса в Javascript

Question

Согласно этой статье это должен быть способ определения класса в Javascript 2.0. Однако я никогда не видел это на практике. Таким образом, вопрос. Как использовать ключевое слово класса и в чем разница между Javascript 1.x и другими способами?

Answer 1

Я знаю, что это старый пост, но с сегодняшнего дня, то есть с появлением ECMAScript 6 , мы можем объявить классы javascript.

Синтаксис выглядит следующим образом:

class Person{
  constructor(name){
    this.name = name;
  }
  printName(){
    console.log('Name is '+this.name);
  }
}
var john = new Person('John Doe');
john.printName(); // This prints 'Name is John Doe'

Полное руководство по этому вопросу можно найти в этом посте

Answer 2

Причина, по которой вы никогда не видели ключевое слово class, используемое на практике, заключается в том, что все текущие реализации JavaScript - 1.x.

JavaScript 2.0 был объединен с ECMAScript 4, который был довольно непопулярным и поэтому никогда не превращался в реальный мир.

Итак, чтобы ответить на ваш вопрос, как вы используете ключевое слово class? Вы не можете.

Answer 3

Вы никогда не видели это на практике, потому что практически ничто не поддерживает JavaScript 2.0. Этот черновик взят из спецификации, которая умерла прежде, чем стала чем-то иным, кроме черновика.

Answer 4

Резюме

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

Пример

class Person {

  constructor(name) {
    this.name = name;
  }
  talk() { console.log('hi'); }
}

const me = new Person('Willem');

console.log(typeof Person) 
// logs function, Person class is just another constructor function under the hood

console.log(me.__proto__ === Person.prototype) 
// logs true, classes just use the same prototypal inheritance pattern which is used by constructor functions. 
// An object created with the new keyword gets a __proto__ property on it which is a reference to the prototype property on a constructor function.

В приведенном выше примере в первом журнале видно, что классы, создаваемые из ключевого слова class, на самом деле являются скрытыми функциями.

console.log(typeof Person) // logs 'function'

es6 классы используют тот же шаблон наследования прототипа, который используется функциями конструктора. Вот еще один пример, демонстрирующий это поведение:

class Dog {

  constructor (name) {
      this.name = name;
  }
  
  bark () { console.log('bark') };

}

let doggie = new Dog('fluffy');

doggie.bark(); // logs bark


Dog.prototype.bark = () => console.log('woof');  
// changing the prototype of Dog, doggie refers to this with its __proto__ property. 
//Therefore doggie bark method has also changed.


doggie.bark(); // logs woof

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

Answer 5

Конечно, вы можете создавать классы в JS, используя прототип!

var foo = function() {
  this.hurrah = "yay!";
  return this;
}

foo.prototype.doit() {
  alert(this.hurrah);
}

Answer 6

Просто добавьте способ создания классов ECMA5.

Обратите внимание, что у него нет функции конструктора таким образом (но вы можете вызвать функцию инициализации, если хотите)

        var Class = {
          el: null,
          socket: null,

          init: function (params) {

            if (!(this.el instanceof HTMLElement)) {
              throw new Error('Chat room has no DOM element to attach on.');
            }

            return this.doStuff();

          },
          doStuff: function (params) {
            return this;
          }
        };

    var instanceofClass = Object.create(Class, {
      el: {
        value: document.body.querySelector('.what ever')
      },
      someMoreData: {
        value: [0,5,7,3]
      }
    }).init();

* редактировать перемещенное описание вне блока кода

Answer 7

Если у вас есть фон Java или C #, вот как определить класс в JavaScript

var MyClass = function (f, l){//constructor 
    //private members
    var firstName = f,
        lastName = l,
        fullName = function () { //fullName is a private function
            return firstName + " " + lastName;
        };
    return {
        //public members
        getFullName: fullName 
    };
}

var output = document.getElementById('Output'); //<div id="Output"></div>
var myName = new MyClass("First", "Last");
output.innerHTML = myName.getFullName();