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
Post a Comment