Как создавать (состязаться) класс в языке сценариев JavaScript?

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

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

// Declaración de la clase y herencia
public class NombreClase: ClasePadre
{
    // Constructor
    NombreClase() {
        // Código de inicialización
    }

    // Propiedades y métodos que tendrá el objeto
    // Métodos privados no son accesibles por las instancias creadas
    private string propiedadPrivada { get; set; }
    public void metodoPublico(string parametro) {

    }
}

Это определение признаков объекта (будьте прочитаны свойства, методы, и т.д.) обусловлено так методами, которые высказываются в том же классе как в классах отец, и видимость вышеупомянутых признаков может контролироваться в том же определении класса.

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

// Constructor
function NombreClase {
    // Código de inicialización
}

// Herencia
NombreClase.prototype.propiedad = 'valor';
NombreClase.prototype.metodo = function() {};

Все свойства публичные и нужно прибегать к приемам, чтобы ему удается encapsulación. Также возможно создавать новые свойства в выполнении того же строителя

// Constructor
function NombreClase {
    // método o propiedad privada
    var privado = 'valor';
    // Esta propiedad se creará en todas las instancias
    this.metodo = function() {};
}

У этого есть невыгода, которой сейчас существует различная копия метода из-за каждого объекта, которым прототип использован, чтобы делать более работоспособным создание методов, так как все инстанции имеют тот же метод.

Поскольку это очевидно, язык очень позволяющий и у него нет рисунка классов, как он определяется обычно в программировании, ориентируемом на объекты, из-за которого симулировать класс произвело sinnúmero различных осуществлений, все их сфокусированные в компенсировании недостатков языка.

Главным образом они существуют два способа создавать класс и все книжные магазины, которые могут использоваться, используют внутри один или другой метод.

Closure

// Constructor
function ClasePadre(nombre) {
  var ref = this;

  // Métodos de la clase
  ref.nombre = nombre;
  ref.imprime = function() {
    console.log(ref.toString());
  };

  // Métodos a sobreescribir
  ref.toString = function() {
    return 'Mi nombre es ' + ref.nombre;
  };
}

// Constructor
function Clase(nombre, apellido) {
  var ref = this;
  var base = {};
  ref.apellido = apellido;

  // Herencia
  // Ejecutando la funcion padre pero cambiando su valor this
  // y usando el de la función actual
  ClasePadre.call(ref, nombre);

  // Guardando referencia a los métodos que se sobreescriben
  // Aquí ref.toString contiene el método heredado de la clase padre
  base.toString = ref.toString;
  // Sobreescribiendo el método con la implementación particular
  // Accediendo a los métodos de la clase base
  ref.toString = function() {
    return base.toString() + ' y mi apellido es ' + ref.apellido;
  };
};

var padre = new ClasePadre('José');
padre.imprime();

var hijo = new Clase('José', 'Perez');
hijo.imprime();

Поскольку ты видишь, не используется прототип нигде и у этого есть немедленная невыгода, что оператор instanceof прекрати функционировать. Кроме того создавать методы в строителе - менее работоспособное, как я упомянул ранее. Преимущество состоит в том, что обычно в javascript ты должен делать такие вещи как эта setTimeout(hijo.imprime.bind(hijo), 1000) из-за формы, поскольку функционирует ключевое слово this и в этом случае ты можешь выполнять прямо setTimeout(hijo.imprime, 1000).

// Constructor
function ClasePadre(nombre) {
  var ref = this;

  ref.nombre = nombre;
  ref.imprime = function() {
    console.log(ref.toString());
  };

  ref.toString = function() {
    return 'Mi nombre es ' + ref.nombre;
  };
}

// Constructor
function Clase(nombre, apellido) {
  var ref = this;
  var base = {};
  ref.apellido = apellido;

  // Herencia
  // Ejecutando la funcion padre pero cambiando su valor this
  // y usando el de la función actual
  ClasePadre.call(ref, nombre);

  // Guardando referencia a los métodos que se sobreescriben
  // Aquí ref.toString contiene el método heredado de la clase padre
  base.toString = ref.toString;
  // Sobreescribiendo el método con la implementación particular
  ref.toString = function() {
    return 'Mi nombre y apellidos son ' + ref.nombre + ' ' + ref.apellido;
  };
};

var hijo = new Clase('José', 'Perez');
setTimeout(hijo.imprime, 1000);
console.log('Instancia de Clase', hijo instanceof Clase);
console.log('Instancia de ClasePadre', hijo instanceof ClasePadre);

Прототип

Это излюбленный вариант и ты будешь находиться много осуществлений, которые ведут себя слегка различно, но главным образом делают что-то как это

// Constructor
function ClasePadre(nombre) {
  this.nombre = nombre;
}

// Métodos heredables de la clase padre
ClasePadre.prototype.imprime = function() {
  console.log(this.toString());
};

ClasePadre.prototype.toString = function() {
  return 'Mi nombre es ' + this.nombre;
};

// Constructor
function Clase(nombre, apellido) {
  var ref = this;
  ref.apellido = apellido;

  // Herencia
  // Ejecutando el constructor de la clase padre
  ClasePadre.call(ref, nombre);
}

Clase.prototype = new ClasePadre();

Clase.prototype.toString = function() {
  // Accediendo a los métodos de la clase base
  return ClasePadre.prototype.toString.call(this) + ' y mi apellido es ' + this.apellido;
};

var padre = new ClasePadre('José');
padre.imprime();

var hijo = new Clase('José', 'Perez');
hijo.imprime();

Поскольку ты можешь видеть все определение, он радикально отличный от определения estandard класса, так как она является рассеянной и не является очень легкой для того, чтобы быть обоснованным. Прием этого метода всегда состоит в замене или изменении свойства prototype функции (класса), чтобы устанавливать цепь наследства, так как в javascript, когда свойство снабжено ссылками, переводчик ищет в Вашем прототипе и в прототипе Вашего отца, и я схватил последовательно до тех пор, пока он не прибывает к Object.prototype.

Решения вертятся всегда касательно этого механизма. Здесь я оставляю тебе осуществление util.inherits node, которое использует метод Object.create, чтобы устанавливать прототип. У этого есть свойственная функция использования свойства super_ чтобы хранить ссылку на класс отец для Вашего последующего использования.

function inherits(ctor, superCtor) {
  if (ctor === undefined || ctor === null)
    throw new TypeError('The constructor to `inherits` must not be ' +
      'null or undefined.');

  if (superCtor === undefined || superCtor === null)
    throw new TypeError('The super constructor to `inherits` must not ' +
      'be null or undefined.');

  if (superCtor.prototype === undefined)
    throw new TypeError('The super constructor to `inherits` must ' +
      'have a prototype.');

  ctor.super_ = superCtor;
  ctor.prototype = Object.create(superCtor.prototype, {
    constructor: {
      value: ctor,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
}

Классы ES6

Эти классы - синтаксический сахар на архетипичном традиционном наследстве javascript.

Классы javascript введены в ECMAScript 6 и - сахар синтаксическая на существующем наследстве, основанном на прототипах языка сценариев JavaScript. Синтаксис классов не вводит новую модель наследства, ориентируемого на объекты в язык сценариев JavaScript. Классы языка сценариев JavaScript поставляют гораздо более ясный и простой синтаксис, чтобы создавать объекты и бороться с наследством.

class ClasePadre {
  constructor(nombre) {
    this.nombre = nombre;
  }

  imprime() {
    console.log(this.toString());
  }

  toString() {
    return 'Mi nombre es ' + this.nombre;
  };
}

class Clase extends ClasePadre {
  constructor(nombre, apellido) {
    super(nombre);
    this.apellido = apellido;
  }

  toString() {
    return 'Mi nombre y apellidos son ' + this.nombre + ' ' + this.apellido;
  };
}

var padre = new ClasePadre('José');
padre.imprime();

var hijo = new Clase('José', 'Perez');
hijo.imprime();

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

function ClasePadre(nombre) {
  this.nombre = nombre;
}

ClasePadre.prototype.imprime = function() {
  console.log(this.toString());
}

ClasePadre.prototype.toString = function() {
  return 'Mi nombre es ' + this.nombre;
};

class Clase extends ClasePadre {
  constructor(nombre, apellido) {
    super(nombre);
    this.apellido = apellido;
  }

  toString() {
    return 'Mi nombre y apellidos son ' + this.nombre + ' ' + this.apellido;
  };
}

var padre = new ClasePadre('José');
padre.imprime();

var hijo = new Clase('José', 'Perez');
hijo.imprime();

Здесь есть список самых заметных книжных магазинов, которые осуществляют OOP прямо в javascript или которые составляют в этот

• Prototype
• Cofeescript
• Typescript
• Backbone
• Mootools
• Dojo

Создай родной класс языка сценариев JavaScript.

Между многими вещами, которые он вводит, ECMAScript 6 включает определение классов посредством ключевого слова class:

class NombreClase {
    constructor (arg1, arg2) {
        this.arg1 = arg1;
        this.arg2 = arg2;
    }

    metodo () {
        // código
    }

    static metodoEstatico () {
        // código
    }
}

Если ты работаешь с Node.js, классы доступны в последних версиях. В предыдущих версиях они доступны посредством выбора --harmony.

Проблема обычно приходит, захотев использовать эти характеристики в браузере, в случае которого рекомендуемо использовать Вавилон, составитель ES6 в ES5, что выносит классы, между другими вещами. Вавилон также доступен для Node.js, если твои обязательные условия включают совместимость с ES5.

В 3er случай не симулирует класс, так как просто имеется единственный объект со свойствами и функциями.

В 2-ом, распределив функции prototype, определяются методы в прототипе функции, что значит, что существует единственная копия методов для всех инстанций "класса", сходной формы, как он осуществляется в других языках.

В 1er не одинокий случай добивается предыдущего но в кредит закрытие позволено герметизировать в корпусе также частные методы, у которых нет достижения вне самой внешней функции, с чем это самое похожее на класс.

Кроме из-за частного метода эта форма - как TypeScript, который является супернабором языка сценариев JavaScript, составляет Ваши классы в язык сценариев JavaScript.

Typescript:

class NombreClase {
    metodo(){
        //código
    }

    static metodoEstático(){
        //código
    }
}

Язык сценариев JavaScript:

var NombreClase = (function () {
    function NombreClase() {
    }
    NombreClase.prototype.metodo = function () {
        //código
    };
    NombreClase.metodoEstático = function () {
        //código
    };
    return NombreClase;
})();

Заметь: Нужно упоминать также, о том, что синтаксис классов TypeScript (не считая аннотаций типов) совпадает с синтаксисом ECMAScript 2015 (ранее такой знакомый как ECMAScript 6) а следовательно, если твоя платформа цель старая, ты можешь использовать TypeScript, и если платформа достаточно современная, ты можешь использовать язык сценариев JavaScript в обоих случаях с тем же синтаксисом.

Он не умел бы говорить тебе, который является лучшей или самым худшим способом создавать классы в Javascript, так как направила бы тема данной дискуссии предпочтения определенного программиста.

Относительно темы результата, думалось бы, что это тот же результат для любой из них, что ты должен думать в действительности, в результате в названный к методам и получение даты, которая меняет очень мало, например, хорошую практику, - осуществляя закоулок в javascript

Относительно создания классов в javascript, будьте таким, как он был что emules класс, я рекомендую тебе создавать ее внутри contenedores/namespaces.

Namespace

Область имен - контейнер, который позволяет присоединять всю функциональность определенного объекта к единственному имени. В языке сценариев JavaScript область имен - объект, который позволяет в методы, свойства и объекты присоединяться. Мысль создавать области имен в языке сценариев JavaScript - простая: Создавать единственный глобальный объект для переменных, методов, функций превращая их в свойства этого объекта. Использование namespace позволяет приуменьшать конфликт имен с другими объектами делая их единственными внутри нашего приложения.

// namespace global
var MIAPLICACION = MIAPLICACION || {};

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

Если твой код будет взбираться настолько, насколько, чтобы нуждаться в классах, моя рекомендация состоит в том, чтобы ты он не ходил и инициализировался с

TypeScript

TypeScript - superset языка javascript, что присоединяет характеристики POO и strong typing. Произведя проект TypeScript то, что следует из 'компиляции', является простым javascript стандартом высокой производительности и функционально.

TypeScript уже присоединяет full опору для ECMA Рукописный шрифт 6 и был принят большими актерами промышленности как

• Microsoft
• Google / AngularJS
• Ebay

и один без конца больше

Он очень легкий для того, чтобы быть изученным, потому что superset совсем то, что уже ты знаешь javascript, ты это можешь продолжать использовать существо.

Руководитель Типескрипт

Примеры

В Ceylon мы используем второй подход, подход прототипа, но строитель - один funciГіn уборная. Тип мы это определяем asГ-:

function MiClase(inst) {
  $init$MiClase();
  if (inst===undefined)inst=new MiClase.$;
  //pegarle propiedades
  return inst;
}
function $init$MiClase() {
  if (MiClase.$===undefined) {
    MiClase.$=function(){};
    (function(miclase) {
      //pegar cosas al prototipo
      miclase.metodo=function metodo(){};
    })(MiClase.$.prototype);
  }
}

, Чтобы создавать инстанцию:

var miclase=MiClase();

Восток diseГ±o мы сделали это основанным на книге "язык сценариев JavaScript: The Good parts" , Дугласа Крокфорда. Вместе с какими-то добавочными механизмами, он позволяет нам осуществлять даже наследство mГєltiple.

opciГіn он состоит в том, чтобы использовать хорошую одну babeljs, чтобы мочь использовать caracterГ-sticas es6/7 как это классы.

https://babeljs.io /

это способ работать очень популярно в последнем времени и ты можешь использовать babeljs рядом с webpack или browserify, чтобы составлять и оптимизировать весь твой код в единственном buddle.

Я прибыл в нее conclusiГіn, которого есть 3 хороших способа это делать. и creГ© следующий post на теме:

http://ricardogeek.com/3-formas-de-definir-clases-en-javascript/

Надеялся, что он помогает тебе:)