Best Practices for JavaScript inheritance

Respect the original, reproduced please specify the source: Http://blog.csdn.net/zoutongyuan

What is inheritance?

Inheritance is the most significant feature of object-oriented. Inheritance is the derivation of new classes from existing classes, which can absorb data properties and behaviors of existing classes, and can extend new capabilities.

There is no concept of class in JavaScript, it is the constructor that produces the object,

The constructor is a normal function. Usually when the function name starts with uppercase. We think it's a constructor, otherwise it's a normal method.

function A () {    this.name = ' a Class instance ';} function M1 () {}

since Javascript produces objects through constructors. So how do we define its properties and methods?

var a1 = new A (); is to create a new Class A object, by default. In the constructor, use this to point to the newly created object.

The object properties of JavaScript can be later bound, i.e.

var obj = {};obj.name = ' obj1 '; Obj.say = function say () {    console.log (this.name);}

The ability to produce objects first, when you need to add attributes. attribute is added by obj. property name or obj[' property name '.

So we use this in the constructor. property name to define the properties and methods of the resulting object.

function A () {this.name = ' a Class instance ';    This.say = function () {console.log (' hi,i am ' + this.name); }}var A1 = new A (), var a2 = new A (); A1.say (); Hi,i am A Class instancea2.say (); Hi,i am A Class Instance

Let's analyze the above code.

The A1,a2 object was created, and the A1 was created. The A2 object is joined by a say () method, and the 2 objects have the same say method,

Just think of the assumption that creating N Class A objects is not a say () method for these n objects, which is a waste of memory.

So the concept of the prototype prototype is referenced in javascript:

Each constructor has a prototype object. Use the constructor to instantiate an object, and when you access this object property, assume that the object has that property. is returned, otherwise it will be found on the prototype of the object's constructor until it is found and returned, otherwise undefined is returned.

To verify:

In the above code, the Say method is not defined in the A constructor,

But A1. A2 can call the Say () method, because the function of a prototype by default points to Object.prototype;

Only Object is saved in memory at this time . prototype. Say, and a produces objects that are searched through the prototype mechanism, one layer at a level, and then called.

So through the prototype prototype mechanism, we are able to implement code reuse, and inheritance.

A.prototype.say = function () {    console.log (' hi,i am ' + this.name);} function A () {    this.name = ' a Class instance ';} var a1 = new A (), var a2 = new A (); A1.say (); Hi,i am A Class instancea2.say (); Hi,i am A class Instancefunction B () {    this.name = ' B class instance ';} B.prototype = new A (); B.prototype.constructor = B;var B = new B (); B.say ();

Analyze the results of the above code operation:

We define a Class B and point his prototype to an instance object of a.

It then produces a B object, invokes the B object say (), and outputs the content.

What is this for?

When visiting the B object property, the assumption does not exist. Will be interviewed in their prototype,

< Span style= "font-family: ' Microsoft Yahei '; Font-size:18px "" is an interview with the  prototype   default is point to object. prototype,

And we're in Object. prototype defines the say method, and the B object can also access the Say () method as if B inherits the attributes from the parent class.

Here we can also see that once the prototype chain is too long. Can lead to prototype of multiple objects .

Therefore, the design should not exceed the 3-layer prototype chain . can consider other ways.

Best Practices for Javascript:

Define the Animal class function Animal (type, name) {//define attribute This.type = type; THIS.name = name;} Definition Method Animal.prototype.say = function () {console.log (' Hi,my name is%s, I am a%s ', this.name, This.type);}  Define the Dog class function dog (type, name, hobby) {//Here This refers to the newly created Dog object, and the Animal method is called by animal.apply form,//display specifies its this  , point to the newly created dog object, and then pass in the object's parameters///So the code in the Animal constructor is assigned a value for the newly created dog object//thereby implementing the inheritance of the property animal.apply (this, [Type,    Name]); This.hobby = hobby;} Dog.prototype = new Animal ();D og.prototype.constructor = Dog;var d = new Dog (' dog ', ' rhubarb dog ', ' eat bone ');d. Say ();

Defined:

The properties of an object are defined through constructors.

Through the prototype object. Defines the method of the object.

Inherited:

Use the prototype of the constructor. Inheritance of implementation methods

In the constructor, use the

The parent class constructor. Call (this,);

Parent class constructor. Apply (this,[])

This enables inheritance of attributes.

A new approach has been introduced in ECMAScript 5: object.create. The ability to call this method to create a new object. The prototype of the new object is the first argument that is passed in when the Create method is called:

Keep in mind that Javascript does not inherit properties from the prototype object, but rather when visiting the object's properties. In turn, on the prototype object,

In order to achieve the effect of inheritance, this isthe essence of J Avascript inheritance, so we just need to establish the object (sub-object) of the prototype and the object (the parent object) relationship can be.

Do not define any content in Object.prototype

Inheritance can also be implemented in a very wide variety of ways. For example, the replication of attributes, etc., should be used flexibly.

Best Practices for JavaScript inheritance