Javascript: classes and prototypes

Source: Internet
Author: User

"Prototypal inheritance" is a key feature of JavaScript.

What's prototype?

Every JavaScript Object has a second JavaScript Object (or null, but this is rare .) associated with it. this second object is known as a prototype, and the first object inherits properties from the prototype.

How to designate prototype for one object?
All objects created by ojbect literals (as below shown) have the same prototype object, and we can refer to this prototype object in JavaScript code as object. prototype.
VaR point = {X: 0, Y: 0 };

Objects created using the new keyword and a construtor invocation use the value of the prototype property of the constructor function as their prototype.
So the object created by new object () inherits from object. prototype just as the object created by {} does. similarly, the object created by new array () uses array. prototype as its prototype, and the object created by new date () uses date. prototype as its prototype.

Objects Created with object. Create () use the first argument to that function (which may be null) as their prototype.

How to inherit?
Object. prototype is one of the rare objects that has no prototype: it does not inherit any properties. Other prototype objects are normal objects that do have a prototype.
All of the built-in Constructors (and most user-defined constructors) have a prototype that inherits from object. prototype. for example, date. prototype inherits properties from object. prototype, so a date object created by new date () inherits properties from
Both date. prototype and object. Prototype. This linked series of prototype objectsis known as a prototype chain.

Javescript has the ability to create a new object with an arbitrary prototype. That's to say the ability to create an "heir" for any object.

How to query the prototype of an object?
Every object has associated prototype, class, and extensible attributes.
In ecmascript 5, you can query the prototype of any object by passing that object to object. getprototypeof (). In ecmascript 3, there is other workarround.


The connection between prototypes and constructors.

Objects Created with object. Create () use the first argument to that function (which may be null) as their prototype.

Example: A range class using a constructor.

// This is a constructor function that initializes new range objects.
// Note that it does not create or return the object. It just initializes this.
Function range (from, ){
// Store the start and end points (State) of this new range object.
// There are noninherited properties that are unique to this objects.
This. From = from;
This. To =;
}

// All range objects inherit from this object.
// Note that the property name must be "prototype" for this to work.
// In fact, every function automatically (by default) has a prototype property.
// The value is an object that has a single constructor property. The value of the contructor property is the function object.
Range. Prototype = {
Constructor: range, // explicitly set the constructor back-Reference
Des: function (x) {return this. From <= x & x <= this. ;},
Foreach: function (f ){
For (VAR x = math. Ceil (this. From); x <= this. To; X ++)
F (x );
},
Tostring: function (){
Return "(" + this. From + "..." + this. To + ")";
}
};

The above code overwrites the predefined range. Prototype object with an object of its own.

Another common technique is to use the predefined prototype object with its constructor property, and add methods to it one at a time.
Range. Prototype. Include = ...;
Range. Prototype. foreach = ...;
Range. Prototype. tostring = ...;

// Here are example uses of a range object
VaR r = new range (1, 3 );
R. Include (2 );
R. foreach (console. Log );
Console. Log (R );
-----------------------------------------------
The new object is automatically created before the constructor is called, and it is accessible as the this value. The range () constructor merely has to initialize this.

Inheritance.
Suppose you assign to the property X of the object o. if O already has an own (noninherited) property named X, then the assignment simply changes the value of this existing property. otherwise, the assignment creates a new property named X on the object o. if
O previusly inherithed the property X, that inherited property is now hidden by the newly created own property with the same name.

The Inheritance occurs when querying properties but not when setting them is a key feature of JavaScript. This allows us to selectively override inherited properties.

The prototype connection does not work when it is updated. When we change an object, the prototype of the object is not touched.
A prototype connection is used only when a value is retrieved. If we try to get a property value of an object without this property name, JavaScript will try to get the property value in the prototype object. If the prototype object does not have this attribute, search for it from its prototype, and so on until the process reaches the destination object. prototype. If the desired attribute does not exist in the prototype chain, the result is the undefined value. This process is called delegation.

Javescript's prototype-based inheritance mechanic is dynamic: an object inherits properties from its prototype, even if the properties of the prototype change after the object is created. This means that we can augment Javascript
Classes simply by adding new methods to their prototype objects.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.