JavaScript non-constructor inheritance

1. What is the inheritance of "non-constructor"?
For example, there is an object called "Chinese".

The code is as follows:

　var Chinese = { 
　　　　nation:'中国' 
　　};

There is also an object called "Doctor".

The code is as follows:

var Doctor ={ 
　　　　career:'医生' 
　　}

How can I let "doctor" inherit "Chinese", that is, how can I generate a "Chinese doctor" "The object of "?
It should be noted here that these two objects are ordinary objects, not constructors, and "inheritance" cannot be implemented using the constructor method.

2. Object() method

Douglas Crockford, the inventor of json format, proposed an object() function that can do this a little.

The code is as follows:

　function object(o) { 
　　　　function F() {} 
　　　　F.prototype = o; 
　　　　return new F(); 
　　}

This object() function actually only does one thing, which is to point the prototype attribute of the child object to the parent object, thus Connect the child object to the parent object.
When using it, the first step is to generate a child object based on the parent object:
　var Doctor = object(Chinese);
Then, add the attributes of the child object itself:
Doctor.career = 'Doctor';
At this time, the child object has inherited the attributes of the parent object.
　alert(Doctor.nation); //China

3. Shallow copy

In addition to using the "prototype chain", There is another way of thinking: copying all the properties of the parent object to the child object can also achieve inheritance.
The following function is copying:

The code is as follows:

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

When using it, write like this:

The code is as follows:

var Doctor = extendCopy(Chinese); 
　　Doctor.career = '医生'; 
　　alert(Doctor.nation); // 中国

However, there is a problem with such a copy. That is, if the properties of the parent object are equal to an array or another object, then in fact, what the child object obtains is only a memory address, not a real copy, so there is a possibility that the parent object has been tampered with.
Please see, now add a "birthplace" attribute to Chinese, its value is an array.
Chinese.birthPlaces = ['Beijing','Shanghai','Hong Kong'];
Through the extendCopy() function, Doctor inherits Chinese.
　var Doctor = extendCopy(Chinese);
Then, we add a city for Doctor's "birthplace":
　Doctor.birthPlaces.push('Xiamen');
What happened? Chinese's "place of birth" 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, we call this copy "shallow copy". This is how inheritance was implemented in early jQuery.

4. Deep copy

The so-called "deep copy" is the ability to copy arrays and objects in the true sense. Its implementation is not difficult, just call "shallow copy" recursively.

The code is as follows:

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 like this:
var Doctor = deepCopy(Chinese);
Now, add A property whose value is an array. Then, modify this attribute on the child object:

The code is as follows:

Chinese.birthPlaces = ['北京','上海','香港']; 
Doctor.birthPlaces.push('厦门');

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

The code is as follows:

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门 
alert(Chinese.birthPlaces); //北京, 上海, 香港

Currently, the jQuery library uses this inheritance method.

【Recommended related tutorials】

1. JavaScript video tutorial
2. JavaScript online manual
3. bootstrap tutorial