Использование «Object.create» вместо «new»

Question

Javascript 1.9.3/ECMAScript 5 представляет Object.create, который Дуглас Крокфорд среди других был advocating в течение длительного времени. Как заменить new на код ниже: Object.create?

var UserA = function(nameParam) { 
    this.id = MY_GLOBAL.nextId(); 
    this.name = nameParam; 
} 
UserA.prototype.sayHello = function() { 
    console.log('Hello '+ this.name); 
} 
var bob = new UserA('bob'); 
bob.sayHello(); 

(Предположим, MY_GLOBAL.nextId существует).

Лучшее, что я могу придумать это:

var userB = { 
    init: function(nameParam) { 
     this.id = MY_GLOBAL.nextId(); 
     this.name = nameParam; 
    }, 
    sayHello: function() { 
     console.log('Hello '+ this.name); 
    } 
}; 
var bob = Object.create(userB); 
bob.init('Bob'); 
bob.sayHello(); 

не кажется Там будет никаких преимуществ, так что я думаю, что я не получаю его. Возможно, я слишком неоклассичен. Как я должен использовать Object.create для создания пользователя 'bob'?

Answer 1

Имея только один уровень наследования, ваш пример может не позволить вам увидеть реальные преимущества Object.create.

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

На вашем userB Например, я не думаю, что ваш метод init должен быть публичным или даже существовать, если вы звоните снова этот метод на существующем экземпляре объекта, id и name свойства будут меняться.

Object.create позволяет инициализировать свойства объекта, используя свой второй аргумент, например:

var userB = { 
    sayHello: function() { 
    console.log('Hello '+ this.name); 
    } 
}; 

var bob = Object.create(userB, { 
    'id' : { 
    value: MY_GLOBAL.nextId(), 
    enumerable:true // writable:false, configurable(deletable):false by default 
    }, 
    'name': { 
    value: 'Bob', 
    enumerable: true 
    } 
}); 

Как вы можете видеть, свойства могут быть инициализирована на второй аргумент Object.create с литерала объекта, используя синтаксис, аналогичный используемый методами Object.defineProperties и Object.defineProperty.

Это позволяет вам установить атрибуты свойств (enumerable, writable, или configurable), что может быть действительно полезно.

Answer 2

Вы должны сделать обычай Object.create() функции. Один, который касается проблем Крокфорда, а также вызывает вашу функцию init.

Это будет работать:

var userBPrototype = { 
    init: function(nameParam) { 
     this.name = nameParam; 
    }, 
    sayHello: function() { 
     console.log('Hello '+ this.name); 
    } 
}; 


function UserB(name) { 
    function F() {}; 
    F.prototype = userBPrototype; 
    var f = new F; 
    f.init(name); 
    return f; 
} 

var bob = UserB('bob'); 
bob.sayHello(); 

Здесь UserB, как Object.create, но с поправкой на наши нужды.

Если вы хотите, вы также можете позвонить:

var bob = new UserB('bob'); 

Answer 3

Object.create еще не стандарт на нескольких браузерах, например, IE8, Opera v11.5, Konq 4.3 не имеют его. Вы можете использовать версию Object.create для Douglas Crockford для этих браузеров, но это не включает второй параметр «объект инициализации», используемый в ответе CMS.

Для кросс-кода браузера одним из способов получить инициализацию объекта в то же время является настройка объекта Object.create от Crockford.Вот один способ: -

Object.build = function(o) { 
    var initArgs = Array.prototype.slice.call(arguments,1) 
    function F() { 
     if((typeof o.init === 'function') && initArgs.length) { 
     o.init.apply(this,initArgs) 
     } 
    } 
    F.prototype = o 
    return new F() 
} 

Это поддерживает Крокфорд прототипичного наследование, а также проверяет наличие какого-либо метод инициализации в объекте, а затем запускает его с параметром (ами), как, скажем, новый человек («Джон»,» Smith "). Ваш код становится: -

MY_GLOBAL = {i: 1, nextId: function(){return this.i++}} // For example 

var userB = { 
    init: function(nameParam) { 
     this.id = MY_GLOBAL.nextId(); 
     this.name = nameParam; 
    }, 
    sayHello: function() { 
     console.log('Hello '+ this.name); 
    } 
}; 
var bob = Object.build(userB, 'Bob'); // Different from your code 
bob.sayHello(); 

Так боб наследует метод SayHello и теперь имеет собственные свойства ID = 1 и имя = 'Bob'. Конечно, эти свойства записываются и перечислимы. Это также гораздо более простой способ инициализации, чем для объекта ECMA Object.create, особенно если вас не беспокоят доступные для записи, перечислимые и настраиваемые атрибуты.

Для инициализации без метода инициализации следующего Крокфорда моды могут быть использованы: -

Object.gen = function(o) { 
    var makeArgs = arguments 
    function F() { 
     var prop, i=1, arg, val 
     for(prop in o) { 
     if(!o.hasOwnProperty(prop)) continue 
     val = o[prop] 
     arg = makeArgs[i++] 
     if(typeof arg === 'undefined') break 
     this[prop] = arg 
     } 
    } 
    F.prototype = o 
    return new F() 
} 

Это заполняет UserB собственных свойств, в том порядке, они определены, используя параметры Object.gen слева направо после параметра userB. Он использует цикл for (prop in o), поэтому по стандартам ECMA порядок перечисления свойств не может быть гарантирован так же, как и порядок определения свойства. Тем не менее, несколько примеров кода, проверенных на (4) основных браузерах, показывают, что они одинаковы, если используется фильтр hasOwnProperty, а иногда даже если нет.

MY_GLOBAL = {i: 1, nextId: function(){return this.i++}}; // For example 

var userB = { 
    name: null, 
    id: null, 
    sayHello: function() { 
     console.log('Hello '+ this.name); 
    } 
} 

var bob = Object.gen(userB, 'Bob', MY_GLOBAL.nextId()); 

В некоторой степени проще сказать, чем Object.build, так как userB не нуждается в методе init. Кроме того, userB не является конструктором, но выглядит как обычный одноэлементный объект. Таким образом, с помощью этого метода вы можете создавать и инициализировать обычные обычные объекты.

Answer 4

Вы могли бы сделать init метод возврата this, а затем цепь вызовов вместе, как это:

var userB = { 
    init: function(nameParam) { 
     this.id = MY_GLOBAL.nextId(); 
     this.name = nameParam; 
     return this; 
    }, 
    sayHello: function() { 
     console.log('Hello '+ this.name); 
    } 
}; 

var bob = Object.create(userB).init('Bob'); 

Answer 5

Другим возможным использование Object.create является клонировать неизменные объекты в cheap and effective way.

var anObj = { 
    a: "test", 
    b: "jest" 
}; 

var bObj = Object.create(anObj); 

bObj.b = "gone"; // replace an existing (by masking prototype) 
bObj.c = "brand"; // add a new to demonstrate it is actually a new obj 

// now bObj is {a: test, b: gone, c: brand} 

Примечания: приведенный выше фрагмент кода создает клон объекта источника (он же не ссылка, как и в cObj = aObj). Это выгодно для метода свойств копирования (см. 1), поскольку он не копирует свойства объекта-объекта. Скорее он создает другой объект -destination-object с его прототипом, установленным на исходном объекте. Более того, когда свойства изменяются на объекте dest, они создаются «на лету», маскируя свойства прототипа (src). Это представляет собой быстрый эффективный способ клонирования неизменяемых объектов.

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

Сценарий здесь (http://jsfiddle.net/y5b5q/1/) (необходим браузер с возможностью создания объектов Object.create).

Answer 6

На самом деле нет никакого преимущества при использовании Object.create(...) по сравнению с new object.

Те, кто выступает за этот метод, в целом формулируют довольно двусмысленные преимущества: "scalability", или «more natural to JavaScript» и т. Д.

Однако я до сих пор не видим конкретный пример, который показывает, что Object.create имеет любые преимущества по сравнению с использованием new. Напротив, с ним есть известные проблемы. Sam Elsamman describes what happens when there are nested objects and Object.create(...) is used:

var Animal = { 
    traits: {}, 
} 
var lion = Object.create(Animal); 
lion.traits.legs = 4; 
var bird = Object.create(Animal); 
bird.traits.legs = 2; 
alert(lion.traits.legs) // shows 2!!! 

Это происходит потому, что Object.create(...) выступает практика, где данные используется для создания новых объектов; здесь Animal datum становится частью прототипа lion и bird и вызывает проблемы по мере совместного использования. При использовании нового прототипичного наследование явно:

function Animal() { 
    this.traits = {}; 
} 

function Lion() { } 
Lion.prototype = new Animal(); 
function Bird() { } 
Bird.prototype = new Animal(); 

var lion = new Lion(); 
lion.traits.legs = 4; 
var bird = new Bird(); 
bird.traits.legs = 2; 
alert(lion.traits.legs) // now shows 4 

касавшиеся, необязательные атрибуты собственности, которые передаются в Object.create(...), они могут быть добавлены с помощью Object.defineProperties(...).

Answer 7

Преимущество заключается в том, что Object.create, как правило, медленнее, чем new на большинстве браузеров

In this jsperf example, в Chromium, браузер new является 30 раз быстро, как Object.create(obj) хотя и довольно быстро. Это все довольно странно, потому что новое делает больше вещей (например, вызывает конструктор), где Object.create должен просто создавать новый объект с переданным в объекте в качестве прототипа (секретная ссылка в Crockford-speak)

Возможно, браузеры не догнали в создании Object.create более эффективным (возможно, они основывают его на new под одеялом ... даже в машинном коде)

Answer 8

TL; DR:

new Computer() будет вызывать функцию-конструктор Computer(){} за один раз , а Object.create(Computer.prototype) - нет.

Все преимущества основаны на этом пункте.

Хотя для некоторых причин оптимизации внутри двигателя Object.create может быть медленнее, что не является интуитивным.

Answer 9

Иногда вы не можете создать объект с NEW, но все еще можете вызвать метод CREATE.

Например: если вы хотите определить пользовательский элемент, он должен быть получен из HTMLElement.

proto = new HTMLElement //fail :(
proto = Object.create(HTMLElement.prototype) //OK :) 
document.registerElement("custom-element", { prototype: proto }) 

Answer 10

Я думаю, что главное в вопросе - это понять разницу между new и Object.create подходов. Соответственно к this answer и this videonew ключевого слова делает следующие вещи:

1. Создает новый объект.

2. Ссылки new object to constructor function (prototype).

3. Делает this переменную точку на новый объект.

4. Выполняет функцию конструктора с использованием нового объекта и неявного выполнения return this;

5. Назначает имя функции конструктора новому объекту объекта constructor.

Object.create выполняет только 1st и 2nd шаги !!!

В примере коды, представленном в вопросе это не большая проблема, но в следующем примере это:

var onlineUsers = []; 
function SiteMember(name) { 
    this.name = name; 
    onlineUsers.push(name); 
} 
SiteMember.prototype.getName = function() { 
    return this.name; 
} 
function Guest(name) { 
    SiteMember.call(this, name); 
} 
Guest.prototype = new SiteMember(); 

var g = new Guest('James'); 
console.log(onlineUsers); 

Как результат побочного эффекта будет:

[ undefined, 'James' ] 

из Guest.prototype = new SiteMember();
Но нам не нужно выполнять метод родительского конструктора, нам нужно только сделать метод getName, который будет доступен в Гостевой. Следовательно, мы должны использовать Object.create.
Если заменить Guest.prototype = new SiteMember();
на Guest.prototype = Object.create(SiteMember.prototype); результат будет:

[ 'James' ] 

Answer 11

В то время как Дуглас Крокфорд раньше был ревностным сторонником Object.create(), и он в основном причина, почему эта конструкция на самом деле находится в JavaScript, он не дольше это мнение.

Он прекратил использование Object.create, потому что он прекратил использовать ключевое слово, так как это вызывает слишком много проблем. Например, если вы не будете осторожны, он может легко указать на глобальный объект, который может иметь очень плохие последствия. И он утверждает, что без использования этот Object.create больше не имеет смысла.

Вы можете проверить это видео с 2014 года, когда он говорит на Nordic.js:

https://www.youtube.com/watch?v=PSGEjv3Tqo0

Answer 12

Я предпочитаю закрывающий подход.

Я все еще использую new. Я не использую Object.create. Я не использую this.

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

Рассмотрите это для простого наследования.

window.Quad = (function() { 

    function Quad() { 

     const wheels = 4; 
     const drivingWheels = 2; 

     function getWheelCount() { 
      return wheels; 
     } 

     function getDrivingWheelCount() { 
      return drivingWheels; 
     } 
     return Object.freeze({ 
      getWheelCount, 
      getDrivingWheelCount 
     }); 
    } 

    return Object.freeze(Quad); 
})(); 

window.Car4wd = (function() { 

    function Car4wd() { 
     const quad = new Quad(); 

     const spareWheels = 1; 
     const extraDrivingWheels = 2; 

     function getSpareWheelCount() { 
      return spareWheels; 
     } 

     function getDrivingWheelCount() { 
      return quad.getDrivingWheelCount() + extraDrivingWheels; 
     } 

     return Object.freeze(Object.assign({}, quad, { 
      getSpareWheelCount, 
      getDrivingWheelCount 
     })); 
    } 

    return Object.freeze(Car4wd); 
})(); 

let myQuad = new Quad(); 
let myCar = new Car4wd(); 
console.log(myQuad.getWheelCount()); // 4 
console.log(myQuad.getDrivingWheelCount()); // 2 
console.log(myCar.getWheelCount()); // 4 
console.log(myCar.getDrivingWheelCount()); // 4 - The overridden method is called 
console.log(myCar.getSpareWheelCount()); // 1 

Отзыв приветствуется.