Javascript Object-oriented explanation-go

Transferred from: http://blog.csdn.net/yueguanghaidao/article/details/9747033

Just contact JS Children's shoes will be very unaccustomed to JS prototype inheritance, whether it is C++,java, or Python has a complete class inheritance mechanism, if the previous ideas to the JS, you will eat a lot of losses, so we first to do is to convert ideas, JS inheritance mechanism as a new thing to learn, and do not wonder why JS inheritance so troublesome, why no class support it? All of the doubts you have to change the idea, if you first contact with the development language is JS, when you encounter C + +, you will have the same doubts, so tell yourself that people are so realized, Just do it.

One: Prototype and constructor

First look at the following code (all JS code can be run in the Firebug console)

1 function people (name,age) {2     this. name=name; 3     this. age= age; 4     this. getname=function() {5         return this . Name; 6     }7 }

I think the class that we imagine should be written like this, but we'll find getname this function is the same as the name variable, that is, each new object is to define this function, seemingly a bit wasteful of resources, with the following as proof:

1 var New People (' A ',); 2 var New People (' B ', +); 3 Console.log (a.getname==b.getname);

The output is: false

You say JS is true, do not provide class support is just, member functions can not be written in the constructor, what you say the constructor, yes, function people is the constructor of the People class. In fact, there is no difference from the general function, we can also run directly.

1 people (' C ', +); 2 Console.log (window.name); 3 Console.log (Window.getname ());

Program output result: all C

Since we are calling directly, so this is not specified, then the default is the Global Window object.

And we can get a reference to the constructor of the object,

Console.log (A.constructor==b.constructor); The result of the output is: true,

How should we write the class in JS? This is related to JS unique prototype.

1 functionpeople (name,age) {2      This. name=name;3      This. age=Age ;4     5 }6People.prototype.getname=function(){7         return  This. Name;8 }9 TenPeople.prototype.getage=function(){ One     return  This. Age; A}

Prototype is a property of every class, and this property is simply an object, so the object must be a property, and every object you new will have all the properties of that object.

Then if you define the prototype object of the class, you implement the purpose of defining the member function for the class.

So the above code is equivalent to:

1 functionpeople (name,age) {2      This. name=name;3      This. age=Age ;4     5 }6People.prototype={7GetName:function(){8         return  This. Name;9         },TenGetage:function(){ One         return  This. Age; A         } -};

Now we all know that as long as you set anything we want in the prototype property of the class, every object that is instantiated will have that property, how perfect it is.

Let's see if the object after the instance has these methods:

1 var New People (' A ',); 2  for inch a) 3  Console.log (X.tostring ());

Output:

name AgeGetNameGetage
Sure enough, the object after the instance has properties owned by the prototype object.

Since People.prototype is also an object, we should also be able to hit its properties.

1  for inch People.prototype) 2    Console.log (X.tostring ());

Output:

GetNameGetage

How can you be sure that you are referencing prototype properties instead of copying them?

1 functionpeople (name,age) {2      This. name=name;3      This. age=Age ;4     5 }6People.prototype={7ID: ' I am a People '8 };9 varA =NewPeople (' A ', 18);Ten varb =NewPeople (' B ', 19); OneConsole.log (a.name==b.name); AConsole.log (a.id==b.id);

Output Result: false true

From the above we can see that the reference is indeed used.

Then I want to modify a.id what to do, b.id will change? Think about what you would do if you were a designer.

1 var aid=a.id2 a.id= "I am a"; 3 Console.log (b.id); 4 Console.log (aid===b.id);

Program output:

I am a People true

As you can imagine, the a.id will definitely be re-bound.

Here in fact, we have no problem with single-instance prototype, here also need to expand the constructor property.

In fact, through (1) people.prototype.getname=function () {}: and (2) people.prototype={}; or is it a little different, The difference is whether prototype discards the reference to the constructor property.

Both instance and prototype of the object have the constructor property (a reference to the constructor)

By (1), People.protorype is determined by the constructor property, which is tested as follows:

1 console.log (people.prototyp.constructor===people);

will be output true

Passing (2) will output: false.

II: Inheritance

See here must be familiar with the prototype, then the inheritance is very simple.

functionpeople (name,age) { This. name=name;  This. age=Age ; }people.prototype={getName:function(){        return  This. Name; }, Getage:function(){        return  This. Age; }};functionBoy (Name,age,shape) {People.call ( This, Name,age);  This. shape=shape;} Boy.prototype=People.prototype; Boy.prototype.getShape=function(){    return  This. Shape;};varboy=NewBoy (' Kitty ', 6, ' fat '); Console.log (Boy.getname ()); Console.log (Boy.getshape ()) ;

The boy class inherits the people class, so the simplest thing is to make boy's prototype equal to people prototype, so that boy will have all the properties of People.prototype, and finally add the member functions he needs.

In fact, we can add all the properties of People.prototype to Boy.prototype in the boy's constructor, and the constructor code is modified as follows:

1 function Boy (name,age,shape) {2     People.call (this, name,age); 3     this. shape=shape; 4      for inch People.prototype) {5         boy.prototype[f]=people.prototype[f]; 6     }7 }

Javascript Object-oriented explanation-go