Constructor Pattern JavaScript

Constructor pattern js

The Constructor Pattern is a special method that use to initialize a newly created object once memory has been allocated for it (in classical OOP languages). But in JavaScript we will use object constructors

We used object constructors to create some types of objects and preparing our objects for use and accepting arguments which a constructor will use to set the values of member propertie and method when the object is first created.

How to create an Object

We have 3 ways to create new objects in js:

// Each of the this options can create a new empty js object:
var newObject = {}; 
// or
var newObject = Object.create( Object.prototype ); 
// or
var newObject = new Object();

How to assign keys and values to an Object

We have 4 ways to do it in js:

// ECMAScript 3 compatible approaches
 
// 1. Dot syntax
 
// Set properties
newObject.someKey = "Hi World";
 
// Get properties
var value = newObject.someKey;
 
 
 
// 2. Square bracket syntax
 
// Set properties
newObject["someKey"] = "Hi World";
 
// Get properties
var value = newObject["someKey"];
 
 
 
// ECMAScript 5 only compatible approaches
// For more information see: http://kangax.github.com/es5-compat-table/
 
// 3. Object.defineProperty
 
// Set properties
Object.defineProperty( newObject, "someKey", {
    value: "for more control of the property's behavior",
    writable: true,
    enumerable: true,
    configurable: true
});
 
// If the above feels a little difficult to read, a short-hand could
// be written as follows:
 
var defineProp = function ( obj, key, value ){
  var config = {
    value: value,
    writable: true,
    enumerable: true,
    configurable: true
  };
  Object.defineProperty( obj, key, config );
};
 
// To use, we then create a new empty "person" object
var person = Object.create( Object.prototype );
 
// Populate the object with properties
defineProp( person, "car", "Delorean" );
defineProp( person, "dateOfBirth", "1987" );
defineProp( person, "hasBeard", false );
 
console.log(person);
// Outputs: Object {car: "Delorean", dateOfBirth: "1981", hasBeard: false}
 
 
// 4. Object.defineProperties
 
// Set properties
Object.defineProperties( newObject, {
 
  "someKey": {
    value: "Hi World",
    writable: true
  },
 
  "anotherKey": {
    value: "Foo bar",
    writable: false
  }
 
});
 
// Getting properties for 3. and 4. can be done using any of the
// options in 1. and 2.

The little later in the book, these methods can even be used for inheritance:

// Usage:
 
// Create a race car driver that inherits from the person object
var driver = Object.create( person );
 
// Set some properties for the driver
defineProp(driver, "topSpeed", "100mph");
 
// Get an inherited property (1981)
console.log( driver.dateOfBirth );
 
// Get the property we set (100mph)
console.log( driver.topSpeed );

What is Basic Constructor

As we will see, js doesn’t support classes but it does support special constructor functions that work with objects. You can call to a constructor function with the simply prefixing “new”

The constructor has keyword this references the new object that’s being created. Revisiting object creation, a basic constructor may look:

function Car( model, year, miles ) {
 
  this.model = model;
  this.year = year;
  this.miles = miles;
 
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}
 
// Usage:
 
// We can create new instances of the car
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
 
// and then open our browser console to view the
// output of the toString() method being called on
// these objects
console.log( civic.toString() );
console.log( mondeo.toString() )

The this Keyword

  • In JavaScript, the thing called this, is the object that “owns” the JavaScript code.
  • The value of this, when used in a function, is the object that “owns” the function.
  • The value of this, when used in an object, is the object itself.
  • The this keyword in an object constructor does not have a value. It is only a substitute for the new object.
  • The value of this will become the new object when the constructor is used to create an object.

this is not a variable. It is a keyword. You cannot change the value of this.

As we will see above is a simple version of the constructor pattern but it solution has some problems.
The first is that it makes inheritance difficult, The second is that functions like toString() are redefined for each of the new objects, that was created using the Car constructor.
But this not optimal as the function should ideally be shared between all of the instances of the Car type.

What is Constructors With Prototypes in JS

Multiple Car objects we can create which access the same prototype. It is be can extended the original example like this:

function Car(model, year, miles, price) {

  this.model = model;
  this.year = year;
  this.miles = miles;
  this.price = price;

  this.toString = function() {
    return this.model + " has done " + this.miles + " miles and cost $" + this.price;
  };
}

// We can create new instances of the car
var prius = new Car("Toyota Prius", 2015, 1500, 12000);
var focus = new Car("Ford Focus", 2010, 5000, 3000);

// these objects
console.log(prius.toString());
console.log(focus.toString());

In the sample above, a single instance of toString() will now be used between all of the Car objects.

  • Poland Info

    Constructor Pattern JavaScript

  • Pingback: Constructor pattern by douglas crockford - DexPage()

  • http://www.sga.su RPSmedia

    Constructor Pattern JavaScript

  • reziko

    Constructor Pattern Javascript :D :D