JavaScript prototype and constructor -


i have following piece of code purpose of learning javascript.

function pizza(type, slices) {     this.type = type;     this.slices = slices; }   pizza.prototype.divvyup = function () {     alert("the " + this.type + " pizza has been divvied up!"); };  var sausagepizza = new pizza("sausage", 8);   sausagepizza.constructor.prototype.divvyup(); sausagepizza.divvyup(); if (sausagepizza.constructor.prototype.divvyup === sausagepizza.divvyup) {     alert("yes equal"); } 

the thing when these 2 lines of code executed:

sausagepizza.constructor.prototype.divvyup(); sausagepizza.divvyup(); 

though if statement next them ratifies equal far types , values concerned. first line gives me result reads "the undefined pizza has been divvied up" , second line turns out giving me little different result reads "the sausage pizza has been divvied up". i'm super confused why can't first line among these 2 read this.type variable value , throws undefined alert message inside divvyup() function when equal according if statement.

the differences between 2 concerns how "this" bound within function calls.

the object on left of . in front of function call object "this" bound to.

sausagepizza.constructor.prototype.divvyup(); //sausagepizza.constructor.prototype left of .divvyup() //so bound this. however, prototype object not have //a type property this.type returns undefined 

however, case of sausagepizza, constructor did create properties.

sausagepizza.divvyup() //here sausage pizza left of .dizzyup() , "this" bound it. 

edit: understand prototypes in javascript might have spelled out. first functions objects, means have properties. every function created basic properties. 1 of these prototype, starts out empty object.

function pizza(type, slices) {   this.type = type;   this.slices = slices; } console.log(pizza.prototype) // prints {} empty object  pizza.prototype.divvyup = function () {   alert("the " + this.type + " pizza has been divvied up!"); }; console.log(pizza.prototype) // prints {divvyup: [function]} 

now when use new operator in front of function creates new empty object, sets object __proto__ , constructor properties, , runs function "this" bound new object.

var sausagepizza = new pizza("sausage", 8); console.log(sausagepizza) // {type: "sausage", slices: 8} //objects in javascript can have hidden properties.  //if unhide relevant ones example //sausagepizza looks this.  {    constructor: pizza, //the function    __proto__: pizza.prototype, //the object on function    type: "sausage",    slices: 8 } 

so . operator works looking object on left key on right (e.g. . ). if not find key looking in properties object on left, looks __proto__ of object key. when

sausagepizza.divvyup() //javascript first looks sausagepizza divvyup. //it not find it. //then looks divvyup in sausagepizza.__proto__ //it find divvyup there , () calls function //if javascript had not found divvyup in sausagepizza.__proto__ have //looked sausagepizza.__proto__.__proto__ if existed, , on 

Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -