Detailed explanation of Javascript non-constructor inheritance examples

This article introduces to you the implementation of "inheritance" without using constructors. It is very simple. Friends will become very familiar with it if they understand it carefully.

1. What is the inheritance of "non-constructor"?

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

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

There is also an object called "Doctor".

　var Doctor ={ career:'医生' }

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 achieved using the constructor method.

2. Object() method

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

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, so that the child object and the parent object Objects are connected together.

When using it, the first step is to generate the child object based on the parent object:

var Doctor = object(Chinese);

Then, add the attributes of the child object itself:

Doctor.career = '医生';

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

alert(Doctor.nation); //中国

3. Shallow copy

In addition to using the "prototype chain", there is another way of thinking: copy the properties of the parent object, All are copied to the child object, and inheritance can also be achieved.

The following function is for copying:

　　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 = '医生';
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 = ['北京','上海','香港'];

Through the extendCopy() function, Doctor inherits Chinese.

var Doctor = extendCopy(Chinese);

Then we add a city for the Doctor's "birthplace":

Doctor.birthPlaces.push('厦门');

What happened? Chinese's "place of birth" has also been changed!

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

So, extendCopy() only copies 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.

　　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:

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: 　

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

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

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

Currently, the jQuery library uses this inheritance method.

The above is the detailed content of Detailed explanation of Javascript non-constructor inheritance examples. For more information, please follow other related articles on the PHP Chinese website!