Inheritance and prototype chain

For developers who are familiar with class-based object-oriented languages (Java or C + +), the syntax for JavaScript is rather bizarre, because JavaScript is a dynamic language and it does not 类的概念 (although it class is a reserved word, cannot be used as a variable name).

In terms of inheritance, each object in JavaScript has an internal private link pointing to another object, which is the prototype of the original object. The prototype object also has its own prototype until the object is prototyped null (that is, there is no prototype). This first-level chain structure is called the prototype chain .

While this is often referred to as one of the weaknesses of JavaScript, it is actually more powerful than the classic inheritance model. While it is quite trivial to build a classic model on a prototype model, it is more difficult to implement it in other ways.

Inheritance based on the prototype chainInheritance Properties

JavaScript objects have two different properties, one is the property of the object itself, and the other is inherited from the prototype chain. The following code shows the behavior that occurs when you access the properties of an object:

Suppose we have an object o, and O is located in the prototype chain as follows://{a:1, b:2}---> {b:3, c:4}---> null//' a ' and ' B ' are the properties of O itself.//In this case, use the object. [[Prototype]] "to represent the prototype of this object.//This is only a purely symbolic representation (also used in the ECMAScript standard) and cannot be used in actual code. Console.log (O.A); 1//A is O's own property? Yes, the value of this property is 1console.log (O.B); 2//B is O's own property? Yes, the value of this property is 2//O.[[prototype]] and there is a ' B ' property on it, but it is not accessed. This is referred to as "property masking". Console.log (O.C); 4//C is the self-attribute of O? No, look at O. [[Prototype]] there is no.//C is O. [[Prototype]] 's own property? Yes, the value of this property is 4console.log (O.D); undefined//D is O's own property? No, look at O. [[Prototype]] there is no.//D is O. [[Prototype]] 's own properties? No, look at O. [[Prototype]]. [[Prototype]] there is no.//O.[[prototype]]. [[[Prototype]] is NULL, the prototype chain has reached the top, there is no D attribute, return undefined

Inheritance method

JavaScript does not have a real "method", JavaScript has only functions, and any function can be added to an object as a property of an object. Inherited functions are basically no different from other properties, including property masking, which is equivalent to a method override in another language.

When an inherited function is called, this it points to the object that is currently inheriting the prototype, not the prototype object in which the inherited function resides.

var o = {a:2, m:function () {return THIS.A + 1; }};console.log (O.M ()); 3//when calling O.M, ' this ' points to o.var p = object.create (o);//P is an object, P.[[prototype]] is o.p.a = 12; Create the Self attribute of P A.console.log (p.m.)); When 13//calls p.m., ' This ' points to p. ' This.a ' is 12.

Use different methods to create objects and build prototype chainsCreate an object using normal syntax

var o = {a:1};//O This object inherits all the properties above Object.prototype//So can use O.hasownproperty (' a ').//hasOwnProperty Is the property of Object.prototype itself. The Object.prototype prototype is null. The prototype chain is as follows://O---> Object.prototype---> Nullvar a = ["Yo", "whadup", "?"];/ /arrays are inherited from Array.prototype (IndexOf, foreach, and so on).//The prototype chain is as follows:/a---> Array.prototype---> Object.prototype--- > Nullfunction f () {return 2;} Functions are inherited from Function.prototype (call, bind, and so on)://F---> Function.prototype---> Object.prototype---> Null

Creating objects using construction methods

In JavaScript, the construction method is actually a normal function. When you use the new operator to function, it can be called a construction method (constructor).

function Graph () {this.vertexes = []; This.edges = [];}  Graph.prototype = {Addvertex:function (v) {This.vertexes.push (v); }};var g = new Graph ();//G is the generated object, his own attributes are ' vertexes ' and ' edges './/When G is instantiated, G.[[prototype]] points to graph.prototype.

Create an object using Object.create

A new approach has been introduced in ECMAScript 5: object.create. You can call this method to create a new object. The prototype of a new object is the create first parameter passed in when the method is called:

var a = {a:1}; A---> Object.prototype---> Nullvar b = object.create (a),//b---> A---> Object.prototype---> Nullcon Sole.log (B.A); 1 (inherited) var C = object.create (b);//c---> B---> A---> Object.prototype---> Nullvar d = object.create (nu ll);//D---> Nullconsole.log (d.hasownproperty); Undefined, because D did not inherit Object.prototype

Performance

Finding properties on the prototype chain is time consuming and has side effects on performance, which is important in demanding performance situations. In addition, attempting to access an attribute that does not exist traverses the entire prototype chain.

When iterating through the properties of an object, each property on the prototype chain is enumerable.

It is necessary to use the hasOwnProperty method, which is inherited from all objects, to detect whether the object's properties are defined on itself or on the prototype chain Object.proptotype .

hasOwnProperty is the only method in JavaScript that involves only the object's own properties and does not traverse the prototype chain.

Note: Just by judging whether a value is undefined is not enough to detect whether a property exists, a property may exist and its value is exactly undefined .

Bad practice: Extending prototypes of Native objects

A frequently used bad practice is the Object.prototype prototype of an extension or other built-in object.

This technique is called monkey patching, which destroys the encapsulation of objects. While some popular frameworks (such as prototype.js) are using the technology, the technology is still not a good practice, and the additional nonstandard approach makes the built-in type confusing.

The only justification for extending the built-in object prototype is to migrate the features of the newer JavaScript engine, such as Array.forEach .

Conclusion

It is important to understand the prototype inheritance model before writing complex code that uses the prototype inheritance model. Also, be aware of the length of the prototype chain in your code and, if necessary, end the prototype chain to avoid possible performance problems. Further, you should never extend the prototype of a native object unless you are compatible with the new JavaScript feature.

Inheritance and prototype chain