Inheritance of Javascript non constructors

1. What is "non-constructor" inheritance?

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

var Chinese = { nation:' China ' };

There's another one, called "doctor."

　var Doctor ={ career:' The doctor ' }

How can I make a "doctor" inherit a "Chinese", that is, how can I make a "Chinese doctor"?

Note here that both of these objects are ordinary objects, not constructors, and you cannot use constructor methods to "inherit."

2. object () method

The inventor of json, Douglas Crockford, proposes an object() function that does just that.

function object(o) {

　　　　function F() {}

　　　　F.prototype = o;

　　　　return new F();

　　}

The object() function, in fact, only does one thing, which is to point the prototype property of the child object to the parent object, so that the child object and the parent object are connected at 1.

When used, step 1 first generates child objects based on the parent object:

　　var Doctor = object(Chinese);

Then, add the properties of the child object itself:

　　Doctor.career = ' The doctor ';

At this point, the child object already inherits the properties of the parent object.

　　alert(Doctor.nation); // China 

3. The shallow copy

In addition to using the "prototype chain ", there is another way of thinking: copy all the properties of the parent object to the child object. Inheritance can also be realized.

The following function is copying:

　　function extendCopy(p) {

　　　　var c = {};

　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　 }

　　　　c.uber = p;

　return c; }

To use, write:

　　var Doctor = extendCopy(Chinese);

　　Doctor.career = ' The doctor ';

　　alert(Doctor.nation); //  China 

However, there is one problem with such a copy. That is, if the properties of the parent object are equal to an array or another object, then the child object actually gets a memory address, not a real copy, so there is a possibility that the parent object was tampered with.

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

　　Chinese.birthPlaces = [' Beijing ',' Shanghai ',' Hong Kong '];

Doctor inherits Chinese through the extendCopy() function.

　　var Doctor = extendCopy(Chinese);

Then, we add a city to Doctor's "birthplace" :

　　Doctor.birthPlaces.push(' xiamen ');

What happened? The "birthplace" of Chinese has also been changed!

　　alert(Doctor.birthPlaces); // Beijing ,  Shanghai ,  Hong Kong ,  xiamen 

　　alert(Chinese.birthPlaces); // Beijing ,  Shanghai ,  Hong Kong ,  xiamen 

So, extendCopy() is just copying basic types of data, which we call "shallow copies." This is how jQuery implemented inheritance in the early days.

4. A deep copy

A "deep copy" is a real copy of an array or object. It's not that hard to implement, as long as you recursively call "shallow copy."

　　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; }

Use it like this:

　　var Doctor = deepCopy(Chinese);

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

　　Chinese.birthPlaces = [' Beijing ',' Shanghai ',' Hong Kong '];

　　Doctor.birthPlaces.push(' xiamen ');

At this point, the parent object is not affected.

　　alert(Doctor.birthPlaces); // Beijing ,  Shanghai ,  Hong Kong ,  xiamen 

　　alert(Chinese.birthPlaces); // Beijing ,  Shanghai ,  Hong Kong 

Currently, the jQuery library USES this inheritance method.

That's all for this article, I hope you enjoy it.