JavaScript special object-oriented and inheritance details (introductory article)

Learn JavaScript people, mostly heard a word called JS inside everything is the object. I was just beginning to touch JavaScript object-oriented programming time, very messy, I was accustomed to the PHP surface object thinking applied to JS above, in fact, JS object-oriented and traditional object-oriented still have a lot of differences. Here is no longer to explain what the basis of object-oriented, see this article by default everyone knows the concept of object-oriented.

First of all, in the current JS version, still did not introduce the keyword class, JS there is no concept of classes, other languages in the instantiation of an object, are using the new class name to get an instance, and JS because there is no class, so its object-oriented can also be understood as a simulation of the way. First of all, we say that JS inside the function, JS inside all functions have a feature, that is, all functions have a return value, if we do not manually write a return. Then the function returns a underfind, and if it is written, it returns the value you wrote. This return value occurs in the case of a normal function call. Like what:

function A () {

return 123;

}

A ();

This returns 123.

function A () {

}

A ();

This returns Underfind.

Then, we call JS inside the function, in fact, more than this one way, commonly used also use call or Apply method can also make function execution, this later. In addition, we can also call the function by means of new, new in JS is actually an operator, whenever the function is called by it, the return value will be changed. If we do not write the return value in the function or the return value is not the object type of the data, then this function will return an empty object, if we write the return value is an object, then we will return to write the object. So as long as the function is called through new, the return value becomes the object.

JS also takes advantage of this to simulate the traditional object-oriented, let's look at an example:

function Obj () {

This.name= ' Little Red ';

This.age= ' 24 ';

}

var poeple = new OBJ ();

As we said above, when we use new to invoke the function, we return the object, so we can tell that people is actually an object. We see the above code in This.name= ' Little Red ', this.age= ' 24 ', what's this actually? In fact this is the object we return, that is to say this is people, if not understand, just remember, this is the characteristics of JS. We went on to look at:

　　

function Obj () {

This.name= ' Little Red ';

This.age= ' 24 ';

}

var poeple = new OBJ ();

alert (people.name);

alert (people.age);

After running the above code, the small red and 24 are ejected respectively, which is more accurate to note that this is people.

But this is not necessarily just people, exactly say this is who specifically to see who is calling this function, see example:

function Obj () {

This.name= ' Little Red ';

This.age= ' 24 ';

}

OBJ ();

When I call this way, who is this this pointing to? In fact, JS is running in the browser, the browser has a top-level object called window, all the variables and functions are actually hanging underneath him, see example:

OBJ ();

Window. OBJ ();

The effect of these two formulations is the same, when not called by new, is actually a normal function, and the function of the caller is the window, so this this point to the window.

So the point of this is not fixed, it depends on the specific invocation method and who is calling.

We generally refer to the function of the object to be returned as a constructor, and his role is to create objects, generally to distinguish between constructors and ordinary functions, the first letter of the constructor is capitalized. When I was learning early, I confused the constructors here with the classes in other languages, but they were different things.

The second is that JS object-oriented also has inherited functions, but its inheritance and the traditional way of inheritance is not the same, I personally think is also a simulation. First of all, in JS, all the objects have a property called __proto__, all functions have __proto_ properties and prototype properties, prototype property corresponding to the value is an object, this object can save a lot of things, Chinese name is called prototype object, see example:

　　

function Obj () {

This.name= ' Little Red ';

This.age= ' 24 ';

}

obj.prototype.job= ' teacher ';

var poeple = new OBJ ();

alert (people.job);//Popup teacher

As already said, people is an object at this time, and obj is a function, people is an instance object of obj, there must be a relationship between them, since people is an object, then he must have _proto_ attribute, This attribute actually points to the prototype of obj, and then in detail, the people __proto__ holds an address that points to the prototype property of the people constructor, obj. So the program runs to People.job, people this object in its own properties to start looking for job this thing, but the wood has found, then he found his __proto__, along the address found Obj.prototype, The job was found here, and then he bounced out the job value. This series of action jargon is called the prototype chain lookup, then why to say this, mainly because JS inheritance has a way to be called prototype inheritance. The above has already made clear the connection between the object and the constructor in terms of the prototype. Then let's talk about JS prototype inheritance, see Example:

　　

function A () {

This.name= ' Little Red ';

This.age= ' 24 ';

}

　　

Function B () {

this.job= ' Little Red ';

This.sex= ' man ';

}

B.prototype=new A ();

var C = new B ();

alert (c.name);//Little Red

The above code, do a function, the prototype object of B is modified to a instance object, when the instance object of B to access the Name property, first in its own search, did not find, then go to his prototype of the constructor B to find, and at this time the prototype of B is an instance of a object, The instance object of a, of course, has the name and age attributes, so it is accessed. This way becomes the prototype inheritance, there is a small problem, that is, the object is directly assigned to prototype, modified the prototype inside the Constructer property, Constructer attribute.
In addition to the prototype inheritance, there are some ways to implement inheritance, the most common is the call and apply method, to explain the problem also need to understand another feature, we have seen above, called method can be used to invoke the function, in fact, his function is more than this, The core function is to change this point, let's take a look at the example:

At this point, Object C has the name Age self three attribute, and the first two are inherited.

In fact, the actual writing process, often the above two methods of inheritance at the same time use, of course, there are some other ways of inheriting, we can go online to check.

Here, there is a little bit of a problem with the prototype inheritance method above, the direct assignment of the object to the prototype leads to an error in the constructor of the prototype, which is actually used to hold the object's constructor, which means that an object is instantiated by that constructor, Then this constructor represents that constructor. Example:

　　

function A () {

This.name= ' Little Red ';

This.age= ' 24 ';

}

var B = new A ();

alert (a.constructor); The entire function is printed out.

If the object is directly assigned to the prototype, this constructor value will be modified, so, for the sake of insurance, many people will manually add a sentence a.prototype.constructor = A;

Here does not introduce more object-oriented things, the process of writing also encountered doubts, if there are errors, please give us a lot of advice!

JavaScript special object-oriented and inheritance details (introductory article)