JavaScript Object-oriented programming (iii) Inheritance of non-constructors

The first part of this series describes "encapsulation," and the second section introduces the use of constructors to implement inheritance.

Today is the last section, which describes not using constructors to implement inheritance.

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

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

var Chinese = {

Nation: ' China '

};

There is also an object called "Doctor".

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.

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:

var Doctor = object (Chinese);

Then, plus the properties of the child object itself:

Doctor.career = ' Doctor ';

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

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:

function Extendcopy (p) {

var c = {};

for (var i in P) {

C[i] = P[i];

}

C.uber = p;

return C;

}

When used, write like this:

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.

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

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

var doctor = extendcopy (Chinese);

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

Doctor.birthPlaces.push (' Xiamen ');

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

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

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/

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.

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:

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:

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

Doctor.birthPlaces.push (' Xiamen ');

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

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

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

Currently, the jquery library is using this inheritance method.

Original website: http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html