Object.create (): The New-to-create Objects in JavaScript

There is a lot of ways to create Objects in JavaScript, perhaps even + to integrate inheritance into them. Just When you thought this you ' ve seen every possible a-to-create JS objects, I ' m here to announce that there ' s yet Anot Her:the new Object Create () method. Wouldn ' t know it, there is some pretty good reasons to use it. But before we get to that, let's get familiar with how it works.

JS Object Creation Revisited

Let's quickly review some typical ways that objects is created in JS right now.

Most people define a constructor function and then create an object by using the New keyword:

function Car (desc) {    THIS.DESC = desc;    This.color = "Red";    This.getinfo = function GetInfo () {        return ' A ' + this.color + ' + This.desc + '. ';}    ;} Instantiate object using the constructor Functionvar car = new Car (' Porsche boxter '); car.color = "Blue"; Alert (Car.getinf O ()); Displays ' A blue Porsche boxter. '

　　

Winning in the API economydownload now

A variation on the above theme are to create a constructor function, but to append methods to the Object prototype. That shares the method across objects:

function Car (desc) {    THIS.DESC = desc;    This.color = "Red";} Car.prototype.getInfo = function () {    return ' A ' + this.color + ' + This.desc + '. ';}; A more sophisticated use of the prototype property was to set it on one fell swoop using either a function or an object lit Eral:function Car (DESC) {    THIS.DESC = desc;    This.color = "Red";} Car.prototype = {    getinfo:function () {      return ' A ' + this.color + ' + This.desc + '. ';    },    drive:functi On () {      //do SOMETHING    },    stop:function () {      //do SOMETHING    }};

　　

The Object.create () Method

The Object.create () method can just as adeptly create our Car Object. It accepts either one or both properties as follows:

Object.create (Proto [, Propertiesobject])

　　

The first argument is the prototype to extend. If you aren ' t subclassing another object and you must pass a null value to the function. The Second optional argument is a object containing the object ' s property descriptors. More on those in a bit.

We already has a Car prototype, so it makes sense-to-pass it to Object.create (). Unfortunately, what makes sense isn ' t always what works!

function Car (desc) {    THIS.DESC = desc;    This.color = "Red";} Car.prototype = {    getinfo:function () {      return ' A ' + this.color + ' + This.desc + '. ';    }};/ /instantiate object using the constructor Functionvar car =  object.create (car.prototype); car.color = "Blue"; alert ( Car.getinfo ()); Displays ' A blue undefined. '??!

　　

The description is lost. So what is it? Simple; The Create () method is uses the prototype and not the constructor. Hence, object.create () is a excellent choice for creating a Object without going through its constructor. We'll be examining that application in the next instalment. For now, let's tackle how to assign the description.

The solution of course is to supply it via the second parameter.

While we are in it, why isn't assign the color property as well using a Properties Object:

var Car2 = object.create (null); This was an empty object, like {}car2.prototype = {  getinfo:function () {    return ' A ' + this.color + ' + THIS.D ESC + '. ';}  ; var car2 = object.create (Car2.prototype, {  //value properties  color:   {writable:true,  configurable:  True, value: ' Red '},  //concrete desc value  rawdesc: {writable:false, configurable:true, Value: ' Porsche boxter ' },  //Data properties (assigned using getters and setters)  desc: {     configurable:true,     get:function (      {return this.rawDesc.toUpperCase ();  },    set:function (value) {This.rawdesc = Value.tolowercase ();}    }}); Car2.color = ' blue '; alert (Car2.getinfo ()); Displays ' A RED PORSCHE boxter. '

　　

It looks a little confusing at first glance because all property have its own set of properties known collectively as a de Scriptor. A descriptor is an object that can be one of the types-data descriptors or Accessor descriptors.

Data descriptors

• Writable:whether the concrete value of the property is changed. Only applies to data descriptors.
• Configurable:whether the type of descriptor is changed, or if the property can be removed.
• Enumerable:whether The property was listed in a loop through the properties of the object.
• Value:the value of a property. This property is applies to Data descriptors because they reference concrete values, so the value describes the concrete Data bound to the property.

Accessor descriptors

Accessor descriptors, on the other hand, proxies access to the concrete value through getter and setter functions. These is useful when some type of transformation or constraints is required. When isn't set, they ' ll default to undefined.

• Get (): A function called with no arguments when the property value is requested using dot notation (i,e:obj.prop).
• Set (newvalue): A function called with the new value for the property when the user tries to modify the value of the Prope Rty using dot notation (I,e:obj.prop = ' new value ').

Browser Support

Most of the major browsers support Object.create (), with the exception of Internet Explorer, which are adding it to version 10.

What ' s Next

The Create () method is just one of several new Object methods. We'll be looking on how to use those next time.

Object.create (): The New-to-create Objects in JavaScript