Я знаю, что этому ответили до смерти, но я хотел бы показать фактический пример различий в скорости.

Здесь мы создаем 2 000 000 новых объектов с помощью метода print в Chrome. Мы сохраняем каждый объект в массиве. Помещение print на прототип занимает около 1/2.

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

Свойство prototype конструктора функции относится к объекту прототипа всех экземпляров, созданных с помощью этой функции при использовании new.

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

var A = function () {
    this.x = function () {
        //do something
    };
};

var a = new A();    // constructor function gets executed
                    // newly created object gets an 'x' property
                    // which is a function
a.x();              // and can be called like this

Во втором примере вы добавляете свойство объекта-прототипа, к которому указывают все экземпляры, созданные с A.

var A = function () { };
A.prototype.x = function () {
    //do something
};

var a = new A();    // constructor function gets executed
                    // which does nothing in this example

a.x();              // you are trying to access the 'x' property of an instance of 'A'
                    // which does not exist
                    // so JavaScript looks for that property in the prototype object
                    // that was defined using the 'prototype' property of the constructor

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

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

Я собрал jsperf чтобы показать это. Существует огромное различие во времени, которое требуется для создания экземпляра класса, хотя это действительно актуально, если вы делаете множество экземпляров.

http://jsperf.com/functions-in- конструктор-против-прототипа

Позвольте мне дать более полный ответ, который я узнал во время учебного курса JavaScript.

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

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

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

Рисунок декоратора объекта

Не уверен, что этот шаблон по-прежнему актуальен в настоящее время, но он существует. И это хорошо знать об этом. Вы просто передаете объект и свойство функции декоратора. Декоратор возвращает объект с помощью свойства и метода.

var carlike = function(obj, loc) {
    obj.loc = loc;
    obj.move = function() {
        obj.loc++;
    };
    return obj;
};

var amy = carlike({}, 1);
amy.move();
var ben = carlike({}, 9);
ben.move();

Функциональные классы

Функция в JavaScript является специализированным объектом. В дополнение к вызову функция может хранить свойства как любой другой объект.

В этом случае Car - это функция (также мыслящий объект), которая может быть вызвана, как вы привыкли делать. Он имеет свойство methods (которое является объектом с функцией move). Когда вызывается Car, вызывается функция extend, которая делает некоторую магию, и расширяет функцию Car (мыслящий объект) с помощью методов, определенных в methods.

В этом примере, хотя

Прототипные классы

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

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

Однако есть одна интересная вещь: каждый объект prototype имеет свойство удобства constructor, которое указывает на (думаю, объект), к которому он присоединился.

Относительно последних трех строк:

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

amy.constructor 's поиск завершен и, следовательно, делегирован Car.prototype, который имеет свойство конструктора. И поэтому amy.constructor есть Car.

Кроме того, amy является instanceof Car. Оператор instanceof работает, видя, что объект прототипа правого операнда (Car) можно найти где угодно в цепочке прототипов левого операнда (amy).

var Car = function(loc) {
    var obj = Object.create(Car.prototype);
    obj.loc = loc;
    return obj;
};

Car.prototype.move = function() {
        this.loc++;
};

var amy = Car(1);
amy.move();
var ben = Car(9);
ben.move();

console.log(Car.prototype.constructor);
console.log(amy.constructor);
console.log(amy instanceof Car);

Некоторые разработчики могут быть смущены в начале. Пример ниже:

var Dog = function() {
  return {legs: 4, bark: alert};
};

var fido = Dog();
console.log(fido instanceof Dog);

Оператор instanceof возвращает false, поскольку прототип Dog не может быть найден нигде в цепочке прототипов fido. fido - простой объект, созданный с помощью литерала объекта, т. е. он просто делегирует Object.prototype.

Псевдоклассические шаблоны

Это действительно просто еще одна форма прототипа в упрощенной форме и более знакомы для тех, кто программирует на Java, например, поскольку он использует конструктор new.

Он делает то же самое, что и в прототипном шаблоне, это просто синтаксический саун-надвод прототип.

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

var Car = function(loc) {
    this.loc = loc;
};

Car.prototype.move = function() {
        this.loc++;
};

var amy = new Car(1);
amy.move();
var ben = new Car(9);
ben.move();

Наконец, не должно быть слишком сложно понять, как может быть реализовано объектно-ориентированное программирование. Есть два раздела.

Один раздел, который определяет общие свойства / методы в прототипе (цепочке).

И еще один раздел, где вы помещаете определения, отличающие объекты друг от друга (переменная loc в примеры).

Это то, что позволяет применять такие понятия, как суперкласс или подкласс в JavaScript.

Не стесняйтесь добавлять или редактировать. Еще раз, я мог бы сделать это сообщество wiki возможно.

Первый пример изменяет интерфейс только для этого объекта. Второй пример изменяет интерфейс для всех объектов этого класса.

Прототип - это шаблон класса; который применяется ко всем будущим его экземплярам. В то время как это конкретный экземпляр объекта.

Как говорили другие, первая версия, используя «this», приводит к каждому экземпляру класса A, имеющему собственную независимую копию метода функции «x». Принимая во внимание, что использование «прототипа» будет означать, что каждый экземпляр класса A будет использовать одну и ту же копию метода «x».

Вот некоторый код, чтобы показать эту тонкую разницу:

// x is a method assigned to the object using "this"
var A = function () {
    this.x = function () { alert('A'); };
};
A.prototype.updateX = function( value ) {
    this.x = function() { alert( value ); }
};

var a1 = new A();
var a2 = new A();
a1.x();  // Displays 'A'
a2.x();  // Also displays 'A'
a1.updateX('Z');
a1.x();  // Displays 'Z'
a2.x();  // Still displays 'A'

// Here x is a method assigned to the object using "prototype"
var B = function () { };
B.prototype.x = function () { alert('B'); };

B.prototype.updateX = function( value ) {
    B.prototype.x = function() { alert( value ); }
}

var b1 = new B();
var b2 = new B();
b1.x();  // Displays 'B'
b2.x();  // Also displays 'B'
b1.updateX('Y');
b1.x();  // Displays 'Y'
b2.x();  // Also displays 'Y' because by using prototype we have changed it for all instances

Как отмечали другие, существуют разные причины выбора одного или другого метода. Мой образец просто предназначен, чтобы четко продемонстрировать разницу.

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

Причина использования первой формы является доступ к «частным членам». Например:

var A = function () {
    var private_var = ...;

    this.x = function () {
        return private_var;
    };

    this.setX = function (new_x) {
        private_var = new_x;
    };
};

Из-за правил определения javascript private_var доступен функции, назначенной this.x, но не вне объекта.