Javascript design pattern-inheritance (II)

The subject of this chapter is inheritance. In JavaScript, implementation inheritance is much more complex than other facial object languages. It mainly uses prototype inheritance. The following describes several common inheritance methods.

1. Classic inheritance (classical inheritance)

First, create a person class.

/* Class Person. */function Person(name) {　　this.name = name;}Person.prototype.getName = function() {　　return this.name;}

Now we create an author class inherited from person

/* Class author. */function author (name, books) {// This method can only inherit objects within the person constructor.
Person. Call (this, name); // call the superclass's constructor in the scope of this.
This. Books = books; // Add an attribute to author .}
// Point the prototype of author to the person instance, so that it inherits the object in the person prototype.
Author. Prototype = new person (); // set up the prototype chain.
// Note that the constructor of author should be re-pointed to itself, because after the prototype is specified, the constructor is already null and needs to be re-specified
Author. prototype. constructor = author; // set the constructor attribute to author. author. prototype. getbooks = function () {// Add a method to author. return this. books ;};

Classic inheritance is implemented through the above steps. If you need to use the author class, it is quite simple.

var author = [];author[0] = new Author('Dustin Diaz', ['JavaScript Design Patterns']);author[1] = new Author('Ross Harmes', ['JavaScript Design Patterns']);author[1].getName();author[1].getBooks();

Of course, we can use an extension method to make inheritance generic.

/* Extend function. */function extend(subClass, superClass) {　　var F = function() {};　　F.prototype = superClass.prototype;　　subClass.prototype = new F();　　subClass.prototype.constructor = subClass;}

Now the entire inheritance process becomes:

/* Class Person. */function Person(name) {　　this.name = name;}Person.prototype.getName = function() {　　return this.name;}/* Class Author. */function Author(name, books) {　　Person.call(this, name);　　this.books = books;}extend(Author, Person);Author.prototype.getBooks = function() {　　return this.books;};

 

2. Prototypal inheritance)

Classic inheritance declares the structure of a class and creates a new object by initializing the instance of the class. The new object includes its own attributes and the sharing method with other instances. However, prototype inheritance does not have class constructor. Instead, it creates only one object and provides it to other sub-classes as a prototype. The following is an example:

/* Clone function. */
function clone(object) {
　　function F() {}
　　F.prototype = object;
　　return new F;
}

/* Person Prototype Object. */var Person = {　　name: 'default name',　　getName: function() {　　　　return this.name;　　}};
var reader = clone(Person);
alert(reader.getName()); // This will output 'default name'.
reader.name = 'John Smith';
alert(reader.getName()); // This will now output 'John Smith'.

The clone method creates a new empty function f, points the prototype of F to the prototype object, and finally returns the instance of F.

 

Comparison between classic inheritance and prototype inheritance:

Undoubtedly, classic inheritance is easier to understand. Almost all JavaScript OOP is implemented in this way. If you create a widely used API, you 'd better use this method.

Prototype inheritance consumes less memory, because all clone objects share the same set of attributes and methods, unless they implement their own uniqueness through the write method directly.