Классы в JS

JavaScript полностью объектно ориентированный, казалось бы что может быть проще чем написать свой класс? Не тут то было, классы в JS не так просты, как изначально может показаться. Во-первых - в JS(версии ES5) нет конструкции с названием class, вместо этого используется объект function. Да, обычная функция в JavaScript играет роль класса:

var User=function (first_name,second_name){
    var name=first_name+" "+second_name;
    this.getName=function(){
        return name;
    }
}
var currentUser=new User("Василий", "Петров");
alert(currentUser.getName());

Такая незамысловатая конструкция создаст класс ввиде объекта функции и экземпляр этой функции. Затем выведет значение поля name класса User. Но все поля, созданные таким образом будут недоступны извне. Для прямого доступа к полям нужно пользоваться таким способом объявления переменных:

var User=function (first_name,second_name){
    this.name=first_name+" "+second_name;
}
var currentUser=new User("Василий", "Петров");
alert(currentUser.name);

Таким образом области видимости реализуются с помощью конструкций this.var_name и var var_name. Конструктор можно реализовать следующим образом:

var User=function (first_name,second_name){
    var name;
    var construct=function(){
        name=first_name+" "+second_name;
    }
    this.getName=function(){
        return name;
    } 
    construct();
}
var currentUser=new User("Василий", "Петров");
document.write(currentUser.getName());

Классы в ES6 В ES6 ввели синтаксический сахар над прототипным наследованием:

class Entity {
   constructor({ id }){
      this.id = id;
   }
    
   getId() {
      return this.id;
   }
}
 
class User extends Entity {
   constructor(props) {
      super(props);
      this.name = props.name; 
   }
   getName() {
      return this.name;
   }
}
 
const user = new User({ id: 86, name: "Igor" });
alert(user.getId());
alert(user.getName());

Проверить ES6 классы

Так в современных браузерах это уже будет работать, но старые браузеры не поймут такую запись. Так что если хотите разрабатывать с современными технологиями, то пользуйтесь современными трансляторами кода (babel-preset-2015) и полифиллами (babel-es6-polyfill) Спасибо за внимание.

Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Управление HTML элементами Обработчики событий. onClick, onMouseMove Javascript как изменить src (путь) изображения WebGL 3D Земля в браузере. Библиотека Three.js Что такое JavaScript