On the trap _javascript techniques of JavaScript prototype inheritance

JavaScript defaults to prototype inheritance. Although there is no concept of Class (class), its functions (function) can act as constructors (constructor). Constructors combine this,new to build a Java-like class. As a result, JavaScript can simulate Class (class-based) inheritance by extending itself.

JavaScript is the same as other object-oriented languages, and object types take the form of references. The variable holding the object is only an address, and the base type data is a value. There may be traps when you store objects on a prototype.

Let's look at the first example.

Copy Code code as follows:

var create = function () {
function Fn () {}
return function (parent) {
Fn.prototype = Parent
return new Fn
}
}()

var parent = {
Name: ' Jack ',
Age:30,
Ismarried:false
}
var child = Create (parent)
Console.log (Child)

The Create tool function implements a basic prototype inheritance, and each call to create copies a new object based on the parent object, and the entire property of the new object comes from parent. Here the parent has three attributes, all basic data types: String, Number, Boolean.

Then modify the child to see if it will affect parent

Copy Code code as follows:

Child.name = ' Lily '
Child.age = 20,
Child.ismarried = True

Console.log (Child)
Console.log (parent)

The results are as follows

That is, modifying the child does not affect parent.

And look at another example.

Copy Code code as follows:

var create = function () {
function Fn () {}
return function (parent) {
Fn.prototype = Parent
return new Fn
}
}()

var parent = {
Data: {
Name: ' Jack ',
Age:30,
Ismarried:false
},
Language: [' Java ']
}
var child = Create (parent)

Child.data.name = ' Lily '
Child.data.age = 20
Child.data.isMarried = True
Child.language.push (' JavaScript ')
Console.dir (Child)
Console.dir (parent)

Note that the two attributes of parent data,language are reference types, one is an object, the other is an array. The child still inherits with parent, then modifies the child, and the results are as follows

It can be seen that at this time the parent was also modified, and the child's name,age and so are the same. This is what you need to be aware of when using prototype inheritance.

The better way to use inheritance is to:

1, the data attribute is inherited by class (hanging on this) so that new can also be configured by parameter

2, the method uses the prototype inheritance, this can save the memory, while the subclass overrides the method also does not affect the parent class

Here is a write-class tool function that satisfies the above 2 points

Copy Code code as follows:

/**
 * @param {String} className
 * @param {string/functi on} supercls
 * @param {function} factory
 */
Function $class (name, superclass, factory) {     if (superclass = = ") Superclass = Object
    function Clazz () {
 &N bsp;      if (typeof this.init = = ' function ') {
      & nbsp;     this.init.apply (this, arguments)
       }
   }
    var p = clazz.prototype = new Supercls
    clazz.prototype.constructor = Clazz
    clazz.prototype.className = className
    var supr = Supercls.prototype br>    Window[classname] = clazz
    factory.call (P, SUPR)
}

When an object type is placed on a parent class prototype, be careful that the subclass modifies it, and instances of all subclasses that inherit from the parent class are modified. And the bugs are not easy to spot.

A new API is added to the ES5 to implement prototype inheritance: Object.create. You can use it instead of the implementation of the CREATE function above, as follows

Copy Code code as follows:

var parent = {
Name: ' Jack ',
Age:30,
Ismarried:false
}
var child = object.create (parent)
Console.log (Child)