JavaScript: inheritance and prototype chain)

JavaScript is a bit confusing for programmers with experience in class-based programming languages (such as Java or C ++), because it is a dynamic language, and class implementation is not provided (although the keyword class is reserved, it cannot be used as a variable name ). Speaking of inheritance, JavaScript has only one structure... syntaxHighlighter. for programmers with experience in class-based programming languages (such as Java or C ++), al is a bit confusing because it is a dynamic language, and class implementation is not provided (although the keyword class is reserved, it cannot be used as a variable name ). When it comes to inheritance, JavaScript has only one structure: object. Each object has an internal link pointing to another object. This object is called prototype ). The prototype object also has its own prototype until it uses null as its prototype. Null, defined as no prototype, exists as the last link of this prototype chain. Using prototype chain to implement inheritance property JavaScript objects can be seen as dynamic loading of attributes (here referred to as its own property) "bags", and each object has a chain pointing to a prototype object. The following is what happens when you try to access a property: // assume there is an object o, and its prototype chain is as follows: // {a: 1, B: 2} ---> {B: 3, c: 4} ---> null // 'A' and 'B' are o's own attributes. // In this example, someObject. [[Prototype] specifies the Prototype of someObject. // This is completely a markup symbol (used based on the ECMAScript standard) and cannot be used in scripts. Console. log (o. a); // 1 // does o have its own attribute 'A? Yes. The value is 1 console. log (o. B); // 2 // does o have its own attribute 'B? Yes, the prototype with a value of 2 // o also has an attribute 'B', but it will not be accessed here. This is called property shadowing console. log (o. c); // 4 // does o have its own property 'C? No. Check whether its Prototype/o. [[Prototype] has its own property 'C? Yes, the value is 4. Console. log (o. d); // undefined // does o have its own property 'd? No. Check whether its Prototype/o. [[Prototype] has its own property 'D? No. Check whether its Prototype/o. [[Prototype]. [[Prototype] is null. Stop searching. If no attribute is found, undefined is returned. Assigning an attribute to an object creates a self-owned attribute. For behavior rules for obtaining and setting properties, the only exception is that an inherited property carries an attribute value accessor setter. The inherited "method" JavaScript does not have a "method" defined in the form of a class-based programming language ". In JavaScript, any function can be added to an object as an attribute. An inherited function operates like any other property, including hiding the property shown above (here, called method override ). When executing an inherited function, the value of this points to the inherited object instead of the prototype object, which is the property of the prototype object. Var o = {a: 2, m: function (B) {return this. a + 1 ;}}; console. log (o. m (); // 3 // here when calling o. m, 'eas' references o var p = Object. create (o); // p is an object inherited from o. a = 12; // create a self-owned property 'A' console for p. log (p. m (); // 13 // call p. m, 'eas' references p //. Therefore, when p inherits the o function m, 'this. a' means p. a and p have their own attributes 'A'. Different methods are used to create objects, and the resulting prototype chain creates an object var o = {a: 1} In a syntax structure }; // The newly created Object o has an Object. prototype as its [[Prototype] // o does not have its own property named 'hasownproperties' // hasOwnProperty is Object. Prototype attributes. Therefore, o inherits hasOwnProperty from Object. prototype // Object. prototype uses null as its prototype. // O ---> Object. prototype ---> null var a = ["yo", "whadup ","? "]; // The Array inherits from Array. prototype (it has methods such as indexOf and forEach ). // The prototype chain is as follows: // a ---> Array. prototype ---> Object. prototype ---> null function f () {return 2;} // The Function inherits from the function. prototype (it has call, bind, and other methods): // f ---> Function. prototype ---> Object. prototype ---> null uses the constructor JavaScript, and the "Constructor" is a function that is called exactly with the new operator. Function Graph () {this. vertexes = []; this. edges = [];} Graph. prototype = {addVertex: function (v) {this. vertexes. push (v) ;}}; var g = new Graph (); // g is an object with its own attributes 'vertexes' and 'edges. // After new Graph () is executed, g. [[Prototype] is the value of Graph. prototype. Object. create ECMAScript 5 introduces a new method: Object. create. Call this method to create a new object. The prototype of this Object is the first parameter of the function: var a = {a: 1}; // a ---> Object. prototype ---> null var B = Object. create (a); // B ---> a ---> Object. prototype ---> nullconsole. log (B. a); // 1 (inherited) var c = Object. create (B); // c ---> B ---> a ---> Object. prototype ---> null var d = Object. create (null); // d ---> nullconsole. log (d. hasOwnProperty); // undefined, because d does not inherit from Object. prototype