Inheritance of JavaScript non-constructors

inheritance of JavaScript non-constructors

This article is to introduce you to do not use the constructor to achieve "inheritance", very simple, small partners can be very familiar with the understanding of the.

One, what is the "non-constructor" inheritance?

For example, now there is an object called "Chinese".

The code is as follows:

var Chinese = {Nation: ' China '};

There is also an object called "Doctor".

The code is as follows:

var doctor ={career: ' Doctor '}

How can I let "Doctor" to Inherit "Chinese", that is to say, how can I produce a "Chinese Doctor" object?

Notice here that both objects are normal objects, not constructors, and cannot be implemented with the constructor method.

Two, Object () method

The JSON-formatted inventor Douglas Crockford, presents an object () function that can do this.

?

1 2 3 4 5 6 7 8 9

function Object (o) {function F () {} f.prototype = O;   　　return new F (); }

This object () function, in fact, only do one thing, that is, the object of the prototype attribute, point to the parent object, so that child objects and the parent object together.

When used, the first step is to generate child objects on the basis of the parent object:

The code is as follows:

var Doctor = object (Chinese);

Then, plus the properties of the child object itself:

The code is as follows:

Doctor.career = ' Doctor ';

At this point, the child object has inherited the properties of the parent object.

The code is as follows:

alert (doctor.nation); China

Third, shallow copy

In addition to using the "prototype chain", there is another idea: the parent object's attributes, all copied to the child object, can also implement inheritance.

The following function is making a copy:

?

1 2 3 4 5 6 7 8 9 10 11

function Extendcopy (p) {var c = {}; 　　　 for (var i in P) {c[i] = P[i];   　} c.uber = P; return C; }

When used, write like this:

The code is as follows:

var doctor = extendcopy (Chinese);

Doctor.career = ' Doctor ';

alert (doctor.nation); China

However, there is a problem with such a copy. That is, if the parent object's properties are equal to an array or another object, the child object actually gets only a memory address, not a real copy, so there is a possibility that the parent object has been tampered with.

See, now add a "birthplace" attribute to Chinese, whose value is an array.

The code is as follows:

chinese.birthplaces = [' Beijing ', ' Shanghai ', ' Hong Kong '];

Through the Extendcopy () function, doctor inherits the Chinese.

The code is as follows:

var doctor = extendcopy (Chinese);

Then, we add a city for doctor's "birthplace":

The code is as follows:

Doctor.birthPlaces.push (' Xiamen ');

What happened? Chinese's "birthplace" has also been changed!

The code is as follows:

alert (doctor.birthplaces); BEIJING, Shanghai, Hong Kong, Xiamen

alert (chinese.birthplaces); BEIJING, Shanghai, Hong Kong, Xiamen

So, extendcopy () just copies the basic type of data, and we call this copy "shallow copy." This is how early jquery implements inheritance.

Four, deep copy

The so-called "deep copy" is the ability to achieve the true meaning of the array and the copy of the object. Its implementation is not difficult, as long as the recursive call "shallow copy" on the line.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19-20

function Deepcopy (p, c) {var c = c | |   　　　　{}; for (var i in P) {if (typeof p[i] = = = ' object ') {C[i] = (P[i].constructor = = Array)?   　　　　　　　　[] : {};   　　　　　　Deepcopy (P[i], c[i]);   　　　　　　else {C[i] = P[i]; } return C; }

When used, write this:

The code is as follows:

var doctor = deepcopy (Chinese);

Now, add a property to the parent object, and the value is an array. Then, modify the property on the child object:

The code is as follows:

chinese.birthplaces = [' Beijing ', ' Shanghai ', ' Hong Kong '];

Doctor.birthPlaces.push (' Xiamen ');

At this point, the parent object will not be affected.

The code is as follows:

alert (doctor.birthplaces); BEIJING, Shanghai, Hong Kong, Xiamen

alert (chinese.birthplaces); BEIJING, Shanghai, Hong Kong

Currently, the jquery library is using this inheritance method.

The above is the entire contents of this article, I hope you can enjoy.