JavaScript Object-oriented programming (c): Inheritance of non-constructors

Source: Internet
Author: User
Tags jquery library

JavaScript Object-oriented programming (c): Inheritance of non-constructors

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

Today is the last section, which describes the implementation of "inheritance" without using constructors.

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

For example, there is now 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, how can I generate a "Chinese doctor" object?

It is important to note that both objects are ordinary objects, not constructors, and cannot be implemented using constructor methods for "inheritance."

Second, the object () method

The inventor of the JSON format, 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, is the prototype property of the object, pointing to the parent object, so that the child object and the parent object together.

When used, the first step is to create a child object based on the parent object:

var Doctor = object (Chinese);

Then, add 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

Three, shallow copy

In addition to using the "prototype chain", there is another way of thinking: The Parent object's properties, 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 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 property is equal to an array or another object, then actually the child object obtains only one memory address, not a real copy, so there is a possibility that the parent object will be tampered with.

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

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

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

var Doctor = extendcopy (Chinese);

We then add a city to the birthplace of doctor:

Doctor.birthPlaces.push (' Xiamen ');

What happened? Chinese's "birthplace" was also changed!

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

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

So, extendcopy () just copies the basic types of data, and we call this copy "shallow copy." This is how early jquery implements inheritance.

Four, deep copy

The so-called "deep copy" is the ability to make real-world copies of arrays and objects. 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;
}

Use this to write:

var Doctor = deepcopy (Chinese);

Now, add an attribute to the parent object, and the value is an array. Then, modify this 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 method of inheritance.

JavaScript Object-oriented Programming (III): Inheritance of non-constructors

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.