JavaScript Object-oriented learning--2

Inheritance is one of the object-oriented attributes (encapsulation, abstraction, inheritance, polymorphism), and JavaScript naturally has inherited attributes as an object-oriented language. If you want to really understand the inheritance mechanism of JavaScript, you should start with the JavaScript object's prototype.

1 prototype

Each object has a prototype attribute, and of course, different browsers do not have the same wrapper for this property. For example, if we use Firefox or Google Chrome, we can get the instance reference (prototype object) that the attribute points to by __proto__. IE browser can not be obtained by the above method, and does not indicate that this object does not exist! We know that JavaScript functions are also an object, a function object, since it is an object He also has a reference to the prototype object, his property name is prototype, in other words: we can get the prototype reference by the function call prototype way. Function can also be called as a class, then the instance of the class has a prototype reference and the function itself has a prototype reference is exactly the same, which guarantees the prototype sharing, for inheritance lay a good foundation.

Summarize:

1) Each function has a prototype (prototype) attribute, which is an object whose purpose is to include properties and methods shared by all instances. It is logical to understand that the benefits of using prototypes allow all object instances to share the properties and methods that it contains, and that the function itself shares a prototype with all instances of the function.

2) Function call prototype using Class.prototype, instance call prototype attribute obj.__proto__, Judge (Class.prototype ==obj.__proto__)

3) The prototype is an object, an instantiated object, the instantiation of this object is special, the special thing is that he is not instantiated through the class itself, but he is an instance of the class. For example, a class function person (name,age) {this.name=name; ...}; var p = new Person (' learn ', 23); If the prototype of P is instantiated by the class itself, then the prototype must have a name attribute, but actually the prototype is a person{}; It's not new by the way the person is constructed. You can use instanceof to test that the prototype does not belong to the person instance.

function person (name, age) {this.name = name;  This.age = age;  This.info = function () {return this.name + this.age; };} var p = new Person (' learn '); Console.info (Person.prototype); Person{}console.info (p.__proto__); Person{}console.info (Person.prototype = = p.__proto__);//trueconsole.info (p.__proto__ instanceof person);//false

2 Constructor

As with prototypes, each function has a constructor property, and each function prototype has a constructor property, and since the prototype has constructor properties, it is natural for each object instance to share the constructor attribute. So here's to note: The function actually has two constructor properties, one is its own property, can be obtained by Class.constructor (JS property calls the nearest principle), one is the constructor attribute in the prototype, can be Class.prototype.constructor or OBJ.__PROTO__.CONSTRUCOTR gets. These two are essentially different, the former is a reference to an anonymous function, and the latter is a reference to the class itself. The former is a proprietary property of the class and is not shared by the instance. In practical development, we do not touch the former, we often change the latter when we inherit it.

Summarize:

1) Each function has a class-private constructor property and a shared constructor property in a prototype

2) Only the class itself can invoke this private property: Class.constructor; prototype constructor property call: Obj.consturctor or OBJ.__PROTO__.CONSTRUCOTR or Class.prototype.constructor

3) The class-private constructor property points to a reference to an anonymous function, note that it is a function reference, not an instance reference to a function, and the constructor property of the prototype is a reference to the class itself, which is also a function reference, not an instance reference.

4) The constructor attribute of a prototype is an important symbol of a class, and he must point to the class itself, since the object-oriented rule constructor points to itself. However the private constructor property of the class is determined by the system, we do not better not touch.

Console.info (Person.constructor);//function () Console.info (Person.prototype.constructor);//person (name, age) Console.info (p.constructor);//person (name, age) Console.info (p.__proto__.constructor);//person (name, age)

3 Extend

JavaScript is inherited through the prototype, the role of the prototype is to share, so through the prototype can be very good to achieve the inheritance mechanism. There are two essential points to be aware of when using prototype inheritance: The prototype of a subclass must point to an instance of the parent class, and the constructor property of the subclass prototype must point to the subclass itself. The prototype points to the parent class instance, so that all child class instances share the parent class's properties and methods to achieve the inheritance effect. The constructor attribute of the subclass prototype points to the subclass itself, reaching the required constructors in the object-oriented direction.

Summary:

1) The prototype of the subclass points to an instance of the parent class, Subclass.prototype = new superclass ();

2) The prototype constructor of the subclass points to the subclass itself, SubClass.prototype.constructor = subclass;

3) Since JS uses prototype inheritance, which causes the constructor to be inherited, however, this is wrong for the object, so the second step is to re-point to the constructor.

4) Personal understanding of the difference between person and Person.prototype is that the former refers to the constructor or class itself, which is actually an instance object shared by all instances.

5) If you simply invoke a function then you can use the call function for processing without inheriting. Class.method.call (self, param);

Function extends ( subclass , superclass) {/* First step  :  building bridge bridges, his role is to completely replace the parent class itself, Including construction method */var bridge = function ( ) { } ; Bridge.prototype = new superclass ( );  // bridge.prototype.constructor =  SuperClass ; This step the prototype chain is completed by default  /* the second step  :  uses the subclass's prototype chain to inherit the bridge parent class */subclass.prototype = new  bridge ( );   subclass.prototype.constructor = subclass;  /* the third step  :   Extended subclass Properties, referring to the parent class as a shared property of the subclass, called in the subclass of  */SubClass.prototype.superClass = SuperClass.prototype;        //   here must be prototype, not the function itself *//Fourth step  :  to ensure the normal operation of the program mechanism, Make a little judgment */if ( SuperClass.prototype.constructor == Object.prototype.constructor  ) { Superclass.prototype.constructor = superclass;}  }6) JavaScript is single-inheritance, but if you want to have more than one class in a class, then use aggregations (the addition of classes, and the methods of other classes). as follows: Function mixin (receivingclass,givingclass) {     for (var method in givingclass.prototype ) {         if (receivingclass.prototype[method] == undefined) {  /*  Here is a special note that using prototype instead of the reason is the difference between   static properties   and   prototype properties  */             ReceivingClass.prototype[method]= GivingClass.prototype[method];         }    }}

JavaScript Object-oriented learning--2