JavaScript prototype

 

 Alessandro Santese 27/05/2015

1) Prototype property

2) The Secret Link (AKA  “_Proto_”)

3) Constructor

4) Augmenting the prototype property with methods and properties

5) Benefits of using prototype

6) Questions???

 

 

 Alessandro Santese 27/05/2015

MAIN POINTS

Prototype is one of these properties that gets automatically assigned when a function gets created.

It is initially empty by default and we can attach methods and properties when we want to implement inheritance, so that these properties and methods are available to instances of that function.

• Methods: apply() and call()
• Properties: length, constructor and prototype

Why?

In JS there is no such a thing like classical inheritance as for other OO JS languages (based on classes), so prototype is used instead. (New version of JS has the “class” key word which allows us to create classes)

 

 

 Alessandro Santese 27/05/2015

PROTOTYPE PROPERTY

Every object in js has a secret link named “_proto_” which allows to access the prototype chain. (object inherits from object). However _proto_ is not available in all the browsers therefore is not a best practice to base some functionality on it.

IMPORTANT ==> _proto_  !==  object’s prototype

var myObject = function(name){

    this.name = name;

    return this;

};

console.log(typeof myObject.prototype); // object

 

 Alessandro Santese 27/05/2015

THE SECRET LINK AKA  "_PROTO_"

console.log(myObject.length); ==> 1 (being the amount of available arguments)

How does this work?

1)  JS engine looks for “length” property on myObject and doesn’t find it

2)  It goes up the chain using “_proto_” link, finds the property and returns the value

 Alessandro Santese 27/05/2015

THE SECRET LINK AKA  "_PROTO_"

“A constructor is a function used for initializing new objects, and you use the ‘new’ keyword to call the constructor”

Ex. var someFoo = new Foo();

BEST PRACTICE: when defining a constructor function always start the function name with a capital letter to differentiate it from a regular function.

 Alessandro Santese 27/05/2015

CONSTRUCTOR PROPERTY

function Toy (name, color){

    this.name = name;

    this.whatAmI = function(){

        return this.name + this.color;

    }

}

Toy.prototype.price = 100;  // adding properties and methods:

Toy.prototype.getInfo = function(){

    return this.price;

};

 Alessandro Santese 27/05/2015

AUGMENTING THE PROTOTYPE WITH METHODS AND PROPERTIES

Even better written like this:

Toy.prototype = {

    price: 100,

    getInfo: function(){

        return this.price;

    }

};

more compact and saves you some writing....

 Alessandro Santese 27/05/2015

AUGMENTING THE PROTOTYPE WITH METHODS AND PROPERTIES

Say we are creating a game where need a huge number of objects to visible on screen at the same time:

This will KILL the computer memory having a huge performance hit.

var GameObject = function(width, height) {  // define the GameObject constructor function

    this.x = Math.floor((Math.random() * myCanvasWidth) + 1);

    this.y = Math.floor((Math.random() * myCanvasHeight) + 1);

    this.width = width;

    this.height = height;

    return this;

};

 Alessandro Santese 27/05/2015

BENEFITS OF USING PROTOTYPE

// (re)define the GameObject prototype object

GameObject.prototype = {

    draw: function() {

        myCanvasContext.fillRect(this.x, this.y, this.width, this.height);

    }

"For loop" to output 100 instances which will share the same “draw” method saving lots of memory in the application.

 Alessandro Santese 27/05/2015

BENEFITS OF USING PROTOTYPE

- http://javascriptissexy.com/javascript-prototype-in-plain-detailed-language/

- https://code.tutsplus.com/tutorials/prototypes-in-javascript--net-24949

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

 

 Alessandro Santese 27/05/2015

LINKS RESOURCES