Understand JavaScript prototype chains and Javascrip inheritance

The prototype chain is one of the basic content of JavaScript. Its essence is the design logic inside JavaScript.

First look at a set of code:

1<script type="Text/javascript">2 function Parent () {3              This. name="Cehis";4         }5 6 function Son () {7              This. age= One;8         }9 Ten function sub () { One              This. sex="nan"; A         } -  -         //simple implementation under inheritance theSon.prototype=Newparent (); -Sub.prototype=Newson (); -          -         varsunfromsub=NewSub (); +         varsonformson=Newson (); -Console.log (Sunfromsub.name,sunfromsub.age,sunfromsub.sex);//Cehis nan +Console.log (Sonformson.name,sonformson.age,sonformson.sex);//cehis undefined A  at         //Take a look at the __proto__ attribute - Console.log (sunfromsub.__proto__); - Console.log (sunfromsub.__proto__.__proto__); - Console.log (sunfromsub.__proto__.__proto__.__proto__); - Console.log (sunfromsub.__proto__.__proto__.__proto__.__proto__); -Console.log (sunfromsub.__proto__.__proto__.__proto__.__proto__.__proto__);//NULL in  - Console.log (sonformson.__proto__); to Console.log (sonformson.__proto__.__proto__); + Console.log (sonformson.__proto__.__proto__.__proto__); -Console.log (sonformson.__proto__.__proto__.__proto__.__proto__);//NULL the</script>

Summarize the points of knowledge:

Prototype is a property of a function (each function has a prototype property), and this property is a pointer to an object. It is a property that displays the prototype of the modified object.

__proto__ is a built-in property owned by an object (note: Prototype is a built-in property of a function, __proto__ is a built-in property of an object), and is a property of JS internal use to find the prototype chain .

Simply by cascading access to the __proto__ attribute, go back to the JS internal prototype. Until null.

The JavaScript prototype chain is the chain formed by __proto__. is a static structure.

The inheritance of JavaScript is a kind of access mechanism inside JavaScript. This mechanism is the chain of backtracking __proto__ formation.

Result: An instance of the constructor can inherit the property values on the constructor itself and on the prototype. Until null has been inherited.

It should be noted that there are more than one way of JavaScript inheritance, where the constructor instance inherits the constructor data from the prototype data in the preceding code.

If you implement inheritance using the following code:

1       function Parent () {2              This. name="Cehis";3         }4 function Son () {5              This. age= One;6         } 7     8Son.prototype=Newparent ();9Son.prototype.id=111;Ten         //just inherit the constructor prototype on the property that is the inheritance ID One         varaudience1=object.create (son.prototype); A         //neither inherits the constructor's own property nor inherits the constructor prototype property -         varAudience2=Object.create (son); -           theConsole.log (Audience1.id,audience1.age,audience1.name);//111 undefined "Cehis" -Console.log (Audience2.id,audience2.age,audience2.name);//undefined undefined "son"

Use Object.create to create an instance, implement inheritance, and if the argument is the constructor itself, it inherits the properties of the constructor, but does not inherit the properties of its parent element's prototype object.

If the argument is a prototype prototype inherits the parent element property and the constructor prototype property.

If you use apply or call to implement inheritance.

1 function Parent (name,age) {2          This. Name =name;3          This. age=Age ;4     }5Parent.prototype.id=222;6 function Son (name,age,sex) {7Parent.call ( This, name,age);8          This. Sex =sex;9     }Ten      One  A     varexample=NewSon"Jack", A,"nan"); -Console.log (example.name,example.age,example.sex,example.id);//Jack Nan undefined

The above only inherits the properties of the constructor itself, without inheriting the properties of the constructor prototype. Apply or call itself is borrowed, not inherited.

Strictly speaking, only new and object.create () are inherited. will only backtrack.

This article concludes.

Understand JavaScript prototype chains and Javascrip inheritance