Learn JavaScript basics in one step (5): Object inheritance for object-oriented design (prototype chain inheritance)

The previous article introduced several basic ways of object creation, and today we look at the inheritance of objects under analysis.

First, the prototype chain inherits 1. Implement inheritance by setting prototype to an instance of the parent class.

function Obj1 () {    this. name1 = "Zhang San";}  function  New  Obj1 (); var New Obj2 (); alert (t2.name1);

One obvious drawback here is this: (if the parent class's property is a reference type, we modify the properties in the prototype when the object instance modifies the property, which changes the data in each instance object, which is not the effect we want)

function Obj1 () {    this. arr = ["Zhang San"];}  function  New  Obj1 (); var New Obj2 (); alert (T2.arr); // print "Zhang San"t2.arr[t2.arr.length] = "John Doe"; var New Obj2 (); alert (T1.arr); // print "Zhang San, John Doe"

Cases:

function Obj1 () {This.arr = ["Zhang San"];} function Obj2 () {}obj2.prototype = new Obj1 (); var t2 = new Obj2 (); alert (t2.arr);//print "Zhang San" t2.arr[t2.arr.length] = "John Doe"; var t 1 = new Obj2 (); alert (t1.arr);//print "Zhang San, John Doe"

So how do we circumvent this problem? Then look down.

2. Using constructors to implement inheritance

functionObj1 () { This. arr = ["Zhang San"];}functionObj2 () {Obj1.call ( This);//"1. New"}//Obj2.prototype = new Obj1 (); "2. Comment on this line"vart2 =NewObj2 (); alert (T2.arr);//print "Zhang San"T2.arr[t2.arr.length] = "John Doe";varT1 =NewObj2 (); alert (T1.arr);//print "Zhang San, John Doe"

We see the above code, we comment on a line, added later. The printed effect is completely different. The Arr property is now unique to each instance object. ( previously defined on the prototype, and the properties of the prototype are shared for each instance )

Cases:

function Obj1 () {This.arr = ["Zhang San"];} function Obj2 () {obj1.call (this);//"1. Add"}//obj2.prototype = new Obj1 (); "2. Note this line" var t2 = new Obj2 (); alert (t2.arr);//print " Zhang San "t2.arr[t2.arr.length] =" John Doe "; var t1 = new Obj2 (); alert (t1.arr);//print" Zhang San, John Doe "

Similarly, there is a problem with this simple approach. Because we can't inherit the methods of the object like this. Such as:

function Obj1 () {    this. arr = [' Zhang San 'function () {alert (this. arr);} // //"1. New" function Obj2 () {    Obj1.call (this);}         var New Obj2 (); // There is no Sayhi method in T2.

We can use the mix of prototypes and constructs to solve, as follows:

3. Implementing inheritance through prototypes and constructs

 function   Obj1 () { this . arr = ["Zhang San"  = function  () {alert ( this  .arr);  function   Obj2 () {Obj1.call ( Span style= "color: #0000ff;" >this  );} Obj2.prototype  = new  Obj1 (); //  var  t2 = new   Obj2 (); T2.sayhi ();  

As above, through the constructor of Obj1.call (this) , and set the prototype properties Obj2.prototype = new Obj1 () , combined with the perfect solution.

Here is a place to watch if you put obj2.prototype = new Obj1 () , change to obj2.prototype = Obj1.prototype; Such as:

functionObj1 () { This. arr = ["Zhang San"];} Obj1.prototype.sayHi=function() {Alert ( This. arr); }functionObj2 () {Obj1.call ( This);} Obj2.prototype= Obj1.prototype;//"1. New"vart2 =NewObj2 (); T2.constructor.prototype.sayHi=function() {Alert ("Test")};//ways to modify prototypes in Obj2varT1 =NewObj1 (); T1.sayhi ();//A method that affects the prototype in Obj1. Because Obj2.prototype = Obj1.prototype, the prototypes for the two objects point to the same place. //so you can only use Obj2.prototype = new Obj1 ();

Cases:

function Obj1 () {This.arr = ["Zhang San"];} Obj1.prototype.sayHi = function () {alert (This.arr);} function Obj2 () {obj1.call (this);} Obj2.prototype = obj1.prototype;//"1. Added" var t2 = new Obj2 (); t2.constructor.prototype.sayHi = function () {alert ("Test")} ;//Modify the prototype in Obj2 var t1 = new Obj1 (); T1.sayhi ();

4. What is a prototype chain

Such as:

//*************obj1****functionObj1 () { This. arr = ["Zhang San"];} Obj1.prototype.sayHi=function() {Alert ( This. arr); }//*************obj2****functionObj2 () {Obj1.call ( This);  This. Name = "Zhang San";} Obj2.prototype=NewObj1 (); Obj2.prototype.sayHi2=function() {Alert ( This. Name); };//*************obj3****functionObj3 () {Obj2.call ( This);} Obj3.prototype=NewObj2 (); Obj3.prototype.sayHi3=function () { };//*******************varT3 =NewObj3 (); T3.sayhi ();

Obj3 inherits Obj2,obj2 inheritance Obj1. When our Obj3 instance object accesses Sayhi, we go to Obj3 's instance object and look for the Sayhi method (not found), then go to the OBJ3 prototype (not found), then go to the parent OBJ2 prototype (not found), and then go to the OBJ1 prototype (found). The path to finding is the prototype chain.

This is a learning record, not a tutorial. You can point out mistakes, but don't be mean.

Original link: http://haojima.net/zhaopei/517.html

This article has been synchronized to the catalog index: learn JavaScript step

Welcome to Shanghai "Program Ape/Yuan", "Siege Lion" into the group: "Shanghai Ape" 229082941 into the group notice

Welcome to the personal blog interested in the group of Friends join: "Hi-Blog" 469075305 into the group notice

If you feel that the article is a little bit of help to you, then trouble you gently to praise, in order to encourage.

Stepping through JavaScript basics (5): Object inheritance for object-oriented design (prototype chain inheritance)