JavaScript Prototype and inheritance

in general, the object in JavaScript is a pointer to prototype and a list of its own properties. JavaScript uses the idea of copy-on-write when creating objects. only constructors have prototype properties, the prototype chain inherits the creation of a new pointer to the constructor's prototype property. The prototype property is special because JavaScript is determined by the traversal mechanism when reading properties. Essentially, it is a normal pointer. Constructors include:

1.object2.function3.array4.date5.string

Example:

   //each function has a default property of prototype, and this prototype constructor is the default point to this function   //Note that Person.constructor is not equal to Person.prototype.constructor. Function instance comes with constructor property   functionPerson (name) { This. Name =name;     }; Person.prototype.getName=function() {         return  This. Name;     }; varp =NewPerson ("Zhangsan"); Console.log (Person.prototype.constructor= = = person);//trueConsole.log (P.constructor = = = person);//true, this is because P itself does not contain the constructor attribute, so this is actually called Person.prototype.constructor

Our aim is to show

1. Indicates that person inherits from animal 2. Indicates that P2 is an instance of

person

Let's change the point of the prototype property so that person can get the method in the prototype attribute in animal. That person inherits from animal (man is Beast)

    functionPerson (name) { This. Name =name;    }; Person.prototype.getName=function() {        return  This. Name;    }; varP1 =NewPerson ("Zhangsan"); Console.log (P1.constructor= = = person);//trueConsole.log (Person.prototype.constructor = = = person);//true    functionAnimal () {} Person.prototype=NewAnimal ();//The reason for not using Person.prototype = Animal.prototype is because new has other features and concludes.     varP2 =NewPerson ("Zhangsan"); //(P2, Person.prototype, Animal.prototype, so p2.constructor is actually Animal.prototype.constructor)Console.log (P2.constructor= = = person);//The output is false, but our intention is to be true here, indicating that P2 is an instance of person. At this time the goal 1 achieved, the goal 2 did not reach. 

But if we fix this,

person.prototype = new Animal (); Person.prototype.constructor = person;

At this point P2.consturctor is right, pointing to the person, indicating that P2 is an instance of the person class, but the new problem arises. At this time the goal 2 achieved, the goal 1 did not reach. Objective 1 and Goal 2 at this time contradictory, because at this time prototype expressed the contradiction of two meaning,

1 indicates who the parent class is 2 copy as a prototype of its own instance

So we can't directly use the prototype property to represent who the parent class is, but instead use the getprototypeof () method to know who the parent class is.

    New Animal ();          = Person ,         varnew person ("Zhangsan");         P2.constructor     // display function person () {}         object.getprototypeof ( Person.prototype). Constructor     // display function Animal () {}  

The two concepts are separated, in fact, by using the hasOwnProperty () method, when to access the instance properties, when access to the prototype attribute is clear.


What did new do?

When the code var p = new person () is executed, new does the following several things:

Create a Blank object

Create a pointer to Person.prototype

Pass the object through the This keyword to the constructor and execute the constructor.

Specifically, in the following code,

  Person.prototype.getName = function () {  }

If we pass

var New Person (); //actually similar to  var New  = Person.prototype.getName;

Therefore, when calling the method through Person.getname (), this refers to the newly created object, not the prototype object.

This is actually used in the case of adding new functionality to existing functions, so we can extend the existing method:

// function MyFunc basically equals var myFunc = new function (); function  function(func) {  // can do something else here    returnfunction  () {  // can do something else here        return func.apply (this, arguments);}    } (MyFunc)

You can also access the object pointed to by the myfunc of the above code directly through this in the Function.prototype method.

function MyFunc () {} if (! Function.prototype.extend) {    Function() {        varthis;         return function () {            func.apply (this, arguments);}}    ; var myFunc = Myfunc.extend ();

Finally, summarize:

If you use Person.prototype = Animal.prototype to indicate that a person inherits from Animal, the Instanceof method also displays an instance of P and Animal, returning true.

This method is not used because of the following two reasons:

1.new creates a new object that avoids setting Person.prototype.constructor = person and causes the value of Animal.prototype.constructor to become a person. Instead, a constructor instance property is dynamically given to this newly created object. The attribute constructor on this instance covers the Animal.prototype.constructor so that Person.prototype.constructor and Animal.prototype.contructor are separated.

2.Animal properties of the This object are not passed to person

However, calling the constructor directly as follows may fail or have other effects.

Person.prototype = new Animal ();

To avoid this, we have introduced an intermediate function. So the right approach should be

Person.prototype = (funtion () {  function= animal.prototype  return  New  F ();}) ()

Original: http://www.cnblogs.com/lwzz/archive/2013/03/03/2941743.html

JavaScript Prototype and inheritance