Understanding JavaScript inheritance

For the inheritance and prototype chain of JavaScript, although I have read books and listened to sessions, I still feel that JavaScript is a magic language. After one-on-one tutoring by the pressure sor and repeated thinking after I came back, I finally felt that I had learned a little about it. 1. JavaScript creates objects in object-oriented languages. Generally, multiple objects with the same attributes and methods are created by defining classes and instantiating them. But there is no class concept in JavaScript, but the constructor in ECMAScript can be used to create objects of specific types. Therefore, you can create custom constructors in JavaScript and create objects using the new operator. In JavaScript, there is no "specified" type of constructor. constructor is actually a function. The difference between it and a general function is that the calling method is different. Only when called using the new operator can it create an object instance as a constructor and assign the constructor scope to this new object (point this to this new object ). If new is not used to call the constructor, it is a normal function call. this points to the window object. this will cause all attributes and methods to be added to the global environment, therefore, be sure to name the constructor in uppercase and always use new to call it. Copy the code function Person (name, gender) {this. name = name; this. gender = gender; this. say = function () {console. log ("Hello") ;}}var person1 = new Person ("Mike", "male"); var person2 = new Person ("Kate", "female "); copy the Code. This Code defines a constructor Person and adds the name and gender attributes and the say method to it. Call the new operator to create two Person instances, person1 and person2. you can use code to verify: person1 instanceof Person; // true; person2 instanceof Person; // true; in addition, both person1 and person2 have the name and gender attributes respectively, and are attached with the values passed in when constructing the object. They also have the say method. However, we can see from the comparison that although both person1 and person2 have the say method at this time, they are not actually instances of the same Function, that is, when new is used to create the constructor instance, every method is re-created on the instance: Repeated Function creation such as person1.say = person2.say; // false is unnecessary, it is even a waste when the number of instances increases. To solve this problem, we can use the prototype attribute of the constructor. Prototype objects are used to search for inherited features. attributes and Methods Added to prototype objects are inherited by instances created by constructors, in this case, all the methods in the instance point to the reference of the Function in the prototype object: copy the code function Person (name, gender) {this. name = name; this. gender = gender;} Person. prototype. say = function () {console. log ("Hello");} var person1 = new Person ("Mike", "male"); var person2 = new Person ("Kate", "female "); person1.say = person2.say // true copy Code 2. prototype, constructor, and _ proto _ constructor, prototype object, In JavaScript, each function has a prototype attribute. This is a pointer pointing to the prototype object of the function. The prototype object has a constructor attribute pointing to the constructor. Each object created through this constructor contains an internal pointer _ proto _ pointing to the prototype object __. Use code to indicate their relationship: Person. prototype. constructor = Person; person1. _ proto _ = Person. prototype; person2. _ proto _ = Person. prototype; 3. the implementation of inheritance JavaScript uses prototype chain as the main method to implement inheritance. Because the object instance has a pointer to the prototype object, and when the prototype object is equal to another type instance, it also has a pointer to another type of prototype object. Therefore, by pointing to the prototype Object Pointer _ proto _, you can find the prototype object step by step. This is the prototype chain. Inheritance is completed through the prototype chain: function Teacher (title) {this. title = title;} Teacher. prototype = new Person (); var teacher = new Teacher ("extends sor"); then, by pointing the prototype object of Teacher to the Person instance, we can inherit the Person from Teacher. You can see that the Teacher instance teacher has the attributes and methods of Person. However, if you only direct the prototype object of the constructor to another object instance, the occurrence can be summarized as: Teacher. prototype instanceof Person // trueTeacher. prototype. constructor = Person // trueTeacher. prototype. _ proto _ = Person. prototype // true: the Teacher constructor changes to Person. Although the constructor type does not significantly affect the attributes and methods of the created instance, it is still unreasonable. Therefore, when prototype is used to implement inheritance, the constructor of the current constructor needs to be changed back after prototype is directed to the instance of another constructor: Teacher. prototype = new Person (); Teacher. prototype. constructor = Teacher; in this way, the prototype chain inheritance is implemented without changing the relationship between the current constructor and the prototype object: Here, we can encapsulate this inheritance process into an extend method to specifically complete the inheritance work: var extend = function (Child, Parent) {Child. prototype = new Parent (); Child. prototype. constructor = Child; return new Child () ;}; now this method accepts two parameters: Child and Parent, and instantiate a Child object and return it after inheritance is completed. Of course, we can continue to enrich this function as needed, including the parameters that need to be passed in during instantiation.