JavaScript Zhongyuan (prototype) and prototype chain

JavaScript is a dynamic language (Dynamic Language Dynamics Programming Language: Dynamic type language, meaning that the type of check is done at run time, that is, "weak type" language), there is no class concept, there are classes reserved words, But cannot be used as a variable name

Prototype: Each object in JavaScript has an internal private connection pointing to another object, which is the prototype of the original object note: The prototype is an object, and other objects can inherit the property through him.

Prototype chain: This prototype object also has its own prototype, until the object's prototype is null (i.e. no prototype), this first-level chain structure is called the prototype chain

Objects in javascript: In JavaScript, an object is a collection of any unordered key-value pairs, which is an object if it is not a primary data type (undefined,null,boolean,number,string)

Once the object's prototype is defined, it can be inherited by multiple instances that reference it, that is, the prototype object that the prototype of the instance object is pointing to.

Inheritance based on the prototype chain:

Inheritance properties:

　　JavaScript objects have two different property sources, one is the object's own property and the other is inherited from the prototype chain.

Cases:

//Suppose there is an object Obj={a:1,b:2}, and the prototype chain where obj is located is as follows://{A:1,b:2}---> {b:3,c:4}---> Null//A, B is the property of obj itself//in this case, use the object. [[Prototype]] "to represent the prototype of this objectalert (OBJ.A);//Output 1 proves that a is a property of obj itselfalert (OBJ.B);//Output 2 proves that B is the property of obj itself//in obj. There is also a ' B ' property in [[Prototype]], but it will not be accessed. This is referred to as "attribute shadowing". alert (OBJ.C);//Output 4 C is not a property of obj itself, but obj. Properties of [[prototype]]alert (OBJ.D);//output undefined d is neither a property of obj itself nor obj. Properties of [[prototype]]//nor is it obj. [[prototype]]. [[prototype]] (that is, null) property, the prototype chain has reached the top, no D property, return undefined

View Code

Inheritance function:

Any function in JavaScript can be added to an object as a property of an object. Inheritance functions are fundamentally different from inherited properties, including "attribute shadowing" (equivalent to method overrides in other languages) Note: When an inherited function is called, this refers to an inherited object, not a function-declared prototype object

Cases:

 var  obj={A:  2, M:  function   (b) { return   //  output 3, when OBJ.M is called, ' this ' points to obj  Span style= "color: #0000ff;"　　>var  p=object.create (obj); // p is an object, P.[[prototype]] is obj 　　p.a  = 12; // 　　alert (p.m.);  //  output 13, when you call p.m., ' This ' points to P, ' THIS.A ' is the  

View Code

Different ways to create an object and build a prototype chain:

To create an object using the normal method:

Cases:

varObj={a:1};//obj This object inherits all the attributes above Object.prototype, so you can use Obj.hasownproperty (' a ')//hasOwnProperty is Object.prototype's own property, and Object.prototype's prototype is NULL, as follows://obj---> object.prototype---> Nullvara=["One", "one", "three"];//Arrays are inherited by Array.prototype, and inheritors inherit some of their methods, such as: Indexof,foreach, the prototype chain is as follows://a---> array.prototype---> Object.prototype--->nullfunctionF () {return2;}//functions are inherited by Function.prototype, and inheritors inherit some of their methods, such as: Call,bind, the prototype chain is as follows://F---> Function.prototype---> Object.prototype--->null

View Code

To create an object using the constructor:

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

Cases:

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 ' // G is instantiated, G.[[prototype]] points to the Graph.prototype

View Code

To 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 first parameter passed in when the Create method is called:

Cases:

varA={a:1};//a---> object.prototype---> Nullvarb=Object.create (a);//b---> A---> object.prototype---> Nullalert (B.A);//Output 1 (inherited)varC=Object.create (b);//c---> B---> A---> object.prototype---> NullvarD=object.create (NULL);//d---> nullalert (d.hasownproperty);//output Undefined, because D does not inherit Object.prototype

View Code

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.

Related articles:

　　Angus Croll:javascript,javascript ...

@ March Sands: Understanding JavaScript Prototypes

　　

Tranch (from MDN): Inheriting from the prototype chain

JavaScript Zhongyuan (prototype) and prototype chain