Understanding JavaScript Inheritance

For JavaScript inheritance and prototype chain, although I read the book before listening to the session, but still feel foggy, can not help but sigh JavaScript is really a magical language. After sponsor one-on-one counseling and their own back after thinking, finally feel the subtle understanding of the twos.

1. JavaScript Creation Object

In an object-oriented language, you typically create multiple objects with the same properties and methods by defining the class and then instantiating it. But there is no concept of a class in JavaScript, but constructors in ECMAScript can be used to create objects of a particular type. Therefore, you can create a custom constructor in JavaScript and create an object with the new operator.

There is no "specified" constructor type in JavaScript, and the constructor is essentially a function, which differs only in the way the invocation differs from the general function. It can be used as a constructor to create an object instance only when invoked through the new operator, and the scope of the constructor is assigned to the new object (this points to this new object). If you do not use new to invoke the constructor, that is the normal function call, this time this point is to the Window object, which causes all the properties and methods to be added to the global, so be sure to pay attention to naming the constructor with the first letter capitalized and always use new to invoke it.

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");

This code defines a constructor person and adds the name and gender attributes as well as the say method to it. Two instances of person Person1 and Person2 are created by calling the new operator. You can verify by code:

Person1 instanceof person; True
Person2 instanceof person; True

and Person1 and Person2 each have the Name,gender attribute, and are attached the values that are passed in when the object is constructed. They also have say methods.

However, by comparison it can be seen that while both Person1 and Person2 have say methods, they are not actually instances of the same function, which means that when you use new to create an instance of a constructor, each method is recreated on the instance:

Person1.say = = Person2.say; False

Such repetitive creation function is not necessary, even when the instance becomes more of a waste. To do this, we can use the prototype property of the constructor to solve the problem. The prototype prototype object is used to search for inherited features, and the properties and methods added to the prototype object are inherited by the instance created by the constructor, when the method in the instance refers to a reference to a function in the prototype object:

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

2. Prototype, constructor, and __proto__

constructors, prototype objects, and instance relationships are: in JavaScript, each function has a prototype attribute, which is a pointer to the prototype object of the function. And this prototype object has a constructor attribute that points to the constructor. Each object created through this constructor contains an internal pointer __proto__ that points to the prototype object.

To represent their relationships in code:

Person.prototype.constructor = = person;
person1.__proto__ = = Person.prototype;
person2.__proto__ = = Person.prototype;



3. Implementation of inheritance

Use the prototype chain as the primary way to implement inheritance in JavaScript. Because an object instance has a pointer to a prototype object, and when the prototype object equals another instance of the type, it also has this pointer to another prototype object. Therefore, by pointing to the prototype object of the pointer __proto__ can be layered to find the prototype object, this is the prototype chain. To complete inheritance through a prototype chain:

function Teacher (title) {
This.title = title;
}
Teacher.prototype = new Person ();

var teacher = new Teacher ("Professor");

At this point, we complete teacher inheritance of person by pointing the Teacher prototype prototype object to an instance of person. You can see that the teacher instance teacher has a person's properties and methods.

But if you just point a constructor's prototype prototype object to another object instance, what happens can be summed up in the following:

Teacher.prototype instanceof Person//true
Teacher.prototype.constructor = = Person//true
teacher.prototype.__proto__ = = Person.prototype//true

The problem arises: at this point the teacher constructor becomes a person. While we are using the properties and methods of the created instance, the type of constructor does not have a significant impact, but it is still a very unreasonable place. Therefore, when using a prototype chain to implement inheritance, the constructor of the current constructor needs to be changed back after the prototype is pointed to an instance of another constructor:

Teacher.prototype = new Person ();
Teacher.prototype.constructor = Teacher;

This is the true implementation of the prototype chain inheritance and does not change the relationship between the current constructor and the prototype object:

Here, we can encapsulate this inheritance process into a extend approach to complete the inherited work:

var extend = function (Child, Parent) {
Child.prototype = new Parent ();
Child.prototype.constructor = child;
Return to new Child ();
};

Now this method takes two parameters: child and parent, and instantiates a child object and returns after the inheritance is complete. We can, of course, continue to enrich the function as needed, including the parameters that need to be passed in to instantiate.