Javascript Prototype Keyword

Question

What is the prototype property and why is it necessary? So far, I have learned that this provides open access to a more internal and private prototype object; It's right?

Also, what is the difference between the following statements?

 MyConstructor.age = 30; MyConstructor.prototype.age = 30; 

In short, I need to better understand the prototype keyword.

thank

Answer 1

"Prototype" is what plays a role in objects.

In Javascript, everything is an object. Each object has a form and, therefore, inherits a prototype this type.

For example, take a simple array: var a = [] . You can perform operations with it, for example a.push(10) . Where does this push method come from? From the prototype of the Array object, which a is.

You can add your own methods to Array objects by simply specifying them in the prototype object. For example:

 Array.prototype.sortNum = function() {this.sort(function(a, b) {return a - b});}; 

This way you can do something like a.sortNum() with all arrays, even those that were created before you defined the sortNum method.

(Note: for compatibility reasons, it is usually not recommended to extend the prototype of your own objects, such as Array s. But this specific example is usually a nice addition, as well as the normalization of methods such as map and forEach for older browsers.)

(Just never expands Object.prototype ! If you don't want to mess up the for...in statements, the in statement and similar cases.)

If you want to define your own classes, as the name MyConstructor , you will need to define its prototype in order to define methods for all instances of this class:

 function MyConstructor(name) {this.name = name}; MyConstructor.prototype = { print: function() {return this.name;} }; var mc = new MyConstructor("foo"); alert(mc.print()); // alerts "foo" 

You can define more than just functions in prototype s:

 MyConstructor.prototype.age = 30; alert(mc.age); // alerts 30 

Beware when you do this to determine the default values ​​of an object, since changing it can lead to change in all instances of this class.

But this is convenient when using Object.defineProperty :

 Object.defineProperty(MyConstructor.prototype, "wholeString", { get: function() {return this.name + "=" + this.age;}, set: function(v) {this.name = v.substring(3);} }); alert(mc.wholeString); // alerts "foo = 30" 

(Unfortunately, IE <9 only allows this for DOM objects ...)

When you define MyConstructor.age = 30 instead, what you are actually doing is defining a member of the MyConstructor function, so mc.age will be undefined. Each instance of MyConstructor inherits the methods and members defined in MyConstructor.prototype , and not those functions of MyConstructor .

In fact, much more can be said. Objects can be a subclass of another class, thus inheriting the prototype superclass. For example, document.body is an instance of HTMLBodyElement , which is a subclass of HTMLElement , which is a subclass of Element , etc., until you get Object as the top superclass. Thus, document.body inherits all the methods defined in the prototype HTMLBodyElement , HTMLElement , Element and Object . This is called the prototype chain.

Doing the same with custom objects is a bit complicated:

 function Class() {}; Class.prototype.foo = function() {alert("foo");}; function Subclass() {}; Subclass.prototype = new Class(); Subclass.prototype.bar = function() {alert("bar");}; var a = new Class(), b = new Subclass(); a.foo(); // alerts"foo" a.bar(); // throws an error b.foo(); // alerts "foo" b.bar(); // alerts "bar" a instanceof Class; // true a instanceof Subclass; // false b instanceof Class; // true b instanceof Subclass; // true 

Answer 2

In JavaScript, function objects have a built-in .prototype property. The value of this property is an object. If the function is used as a constructor, the resulting instances inherit from this prototype object.

Example:

 var Dog = function () {}; // the constructor function Dog.prototype.bark = function () {}; // adding a method to Dog.prototype var dog1 = new Dog; // creating a new instance dog1.bark(); // the instance inherits the "bark" method from Dog.prototype 

Note that the .prototype property (function objects) does not match the internal [[Prototype]] property. All objects contain the latter. This is an internal reference to a prototype object. (In the above example, the dog1 [[Prototype]] object refers to Dog.prototype .) On the other hand, only object objects have the built-in .prototype property (which makes sense, since only object objects can be used as constructors).

Answer 3

 var foo = function () {}; foo.bar = 5; foo.prototype.foobar = 10; var x = new foo(); x.bar; // undefined x.foobar; // 10 

Edit: Alternatively, you can do

 foo.prototype.foobar = 20; x.foobar; // 20