When to use the word "prototype" in adding new properties to an object in javascript?

Object"s Prototype

As mentioned before, object"s prototype property is invisible. Use Object.getPrototypeOf(obj) method instead of __proto__ to access prototype object.


Bạn đang xem: When to use the word "prototype" in adding new properties to an object in javascript?

function Student() this.name = "John"; this.gender = "M";var studObj = new Student();Student.prototype.sayHi= function() alert("Hi");;var studObj1 = new Student();var proto = Object.getPrototypeOf(studObj1); // returns Student"s prototype object alert(proto.constructor); // returns Student function

Property mô tả tìm kiếm
constructor Returns a function that created instance.
__proto__ This is invisible property of an object. It returns prototype object of a function to lớn which it liên kết to.

Method description
hasOwnProperty() Returns a boolean indicating whether an object contains the specified property as a direct property of that object & not inherited through the prototype chain.
isPrototypeOf() Returns a boolean indication whether the specified object is in the prototype chain of the object this method is called upon.
propertyIsEnumerable() Returns a boolean that indicates whether the specified property is enumerable or not.
toLocaleString() Returns string in local format.
toString() Returns string.
valueOf Returns the primitive value of the specified object.

Chrome & Firefox denotes object"s prototype as __proto__ which is public link whereas internally it reference as <>. Internet Explorer does not include __proto__. Only IE 11 includes it.

The getPrototypeOf() method is standardize since ECMAScript 5 & is available since IE 9.

Changing Prototype

As mentioned above, each object"s prototype is linked to function"s prototype object. If you change function"s prototype then only new objects will be linked lớn changed prototype. All other existing objects will still link to old prototype of function. The following example demonstrates this scenario.


Xem thêm: Ukvi Là Gì - Ielts Ukvi Và Life Skills Là Gì

Example: Changing Prototype

function Student() this.name = "John"; this.gender = "M";Student.prototype.age = 15;var studObj1 = new Student();alert("studObj1.age = " + studObj1.age); // 15var studObj2 = new Student();alert("studObj2.age = " + studObj2.age); // 15Student.prototype = age : trăng tròn ;var studObj3 = new Student();alert("studObj3.age = " + studObj3.age); // 20alert("studObj1.age = " + studObj1.age); // 15alert("studObj2.age = " + studObj2.age); // 15
Try it

Use of Prototype

The prototype object is being used by JavaScript engine in two things, 1) to find properties & methods of an object 2) lớn implement inheritance in JavaScript.


function Student() this.name = "John"; this.gender = "M";Student.prototype.sayHi = function() alert("Hi");;var studObj = new Student();studObj.toString();
In the above example, toString() method is not defined in Student, so how và from where it finds toString()?

Here, prototype comes into picture. First of all, JavaScript engine checks whether toString() method is attached to lớn studObj? (It is possible lớn attach a new function lớn a instance in JavaScript). If it does not find there then it uses studObj"s __proto__ link which points to the prototype object of Student function. If it still cannot find it there then it goes up in the heirarchy and check prototype object of Object function because all the objects are derived from Object in JavaScript, và look for toString() method. Thus, it finds toString() method in the prototype object of Object function và so we can hotline studObj.toString().

This way, prototype is useful in keeping only one copy of functions for all the objects (instances).

The following figure illustrates the above scenario.

*
Prototype in JavaScript

Learn how we can achieve inheritance using prototype in the next section.