Javascript object-oriented programming (3) Inheritance of non-constructor functions

Javascript object-oriented programming (3) Inheritance of non-constructor functions_js object-oriented

WBOY

Release： 2016-05-16 18:02:58

Original

883 people have browsed it

Today is the last part, introducing "inheritance" without using constructors.
1. What is the inheritance of "non-constructor"?
For example, there is an object called "Chinese".

Copy code The code is as follows:

 
 var Chinese = { 
 nation: 'China' 
　}; 

There is another object called "Doctor".

Copy code The code is as follows:

 
 var Doctor ={ 
career: 'Doctor' 
　} 

How can I let "Doctor" inherit "Chinese"? In other words, how can I generate an object of "Chinese Doctor"?
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.

Copy code 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 handle The prototype attribute of the object points to the parent object, thereby connecting 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: copy the attributes of the parent object, All are copied to the child object, and inheritance can also be achieved.
The following function is copying:

Copy code The code is as follows:

 
 function extendCopy(p) { 
　var c = {}; 
　for (var i in p) { 
　c[i] = p[i]; 
　　} 
　c.uber = p; 
　 return c; >
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 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.

Copy code

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

Write like this when using it:
var Doctor = deepCopy(Chinese);
Now, add an attribute to the parent object with the value as an array. Then, modify this property on the child object:

Copy the code The code is as follows:

 
　Chinese. birthPlaces = ['Beijing','Shanghai','Hong Kong']; 
Doctor.birthPlaces.push('Xiamen'); 

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

Copy code The code is as follows:

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

Currently, the jQuery library uses this inheritance method.
(End)