When using object-oriented programming, the inheritance between objects is naturally unavoidable! And the prototype is a very important way to achieve JavaScript inheritance!
Let's start by looking at the following code:
Copy Code code as follows:
function person (name, age) {
THIS.name = name;
This.age = age;
}
Person.prototype.getInfo = function () {
Alert ("My name is" +this.name+ ", and I have" +this.age+ "years old");
}
var zhangchen = new Person ("Zhangchen", 23);
Zhangchen.getinfo (); Output My name is Zhangchen, and I have years old;
From the results of the operation, we can see that the Zhangchen object created by the keyword new inherits the GetInfo () method defined by the stereotype in person. Let's look at the new Zhangchen how this object inherits the properties and methods of the person object.
Prototyping: In object-oriented programming using JavaScript, a prototype object is a core concept. In JavaScript, the object is created as a copy of an existing example (that is, a prototype) object, and that name comes from this concept. Any properties and methods of this prototype object are displayed as properties and methods of the objects created from the stereotype's constructor. It can be said that these objects inherit properties and methods from their prototypes. When you create a Zhangchen object:
Copy Code code as follows:
var zhangchen = new Company ("Zhangchen", 23);
The object referenced by Zhangchen inherits the properties and methods from its prototype, and the object Zhangchen's prototype comes from the property of the constructor (here is the function person).
In JavaScript, each function is known as a prototype attribute, used to refer to a prototype object. This prototype object is also known as the constructor property, which in turn refers to the function itself. This is a circular reference, and the following diagram illustrates this circular relationship better.
Fig. 1 Circular relation
Now, by using the new operator to create an object with a function (person in the example above), the acquired object inherits the Person.prototype property. In the diagram above, you can see that the Person.prototype object has a constructor property that returns the person function. Thus, each person object (inherited from Person.prototype) has a constructor property that returns the person function.
We can use the following code to verify that the loop is correct:
Copy Code code as follows:
function person (name, age) {
THIS.name = name;
This.age = age;
}
Person.prototype.getInfo = function () {
Alert ("My name is" +this.name+ ", and I have" +this.age+ "years old");
}
var zhangchen = new Person ("Zhangchen", 23);
Alert (Zhangchen.constructor = = Person.prototype.constructor); Output true
Alert (Zhangchen.constructor = = person);/output True
Alert (Person.prototype.isPrototypeOf (Zhangchen)); Output true
Where does the call to the "isprototypeof ()" Method come from in the above code? Is it from the Person.prototype object? No, in fact, other methods, such as toString, toLocaleString, and valueof, can also be invoked in Person.prototype and person instances, but none of them come from Person.prototype. It comes from the object.prototype in JavaScript, which is the ultimate prototype of all prototypes. (Object.prototype's prototype is null.) ）
In the above example, Zhangchen.prototype is an object. It is created by calling the Object constructor (although it is not visible) equivalent to executing the child following code:
Copy Code code as follows:
Zhangchen.prototype = new Object ();
Therefore, just as the person instance inherits Person.prototype, Zhangchen.prototype inherits Object.prototype. This allows all Zhangchen instances to inherit the Object.prototype's methods and properties.
prototype chain: Each JavaScript object inherits a prototype chain, and all prototypes are terminated by Object.prototype. Note that this inheritance is an inheritance between active objects. It differs from the common concept of inheritance, which refers to the inheritance that occurs between classes when declaring a class. As a result, JavaScript inheritance is more dynamic. It does this using a simple algorithm, as follows: When you try to access the properties/methods of an object, JavaScript checks to see if the property/method is defined in that object. If not, the object's prototype is checked. If not, then check the prototype of the object's prototype, so continue, checking to Object.prototype. The following figure illustrates this parsing process:
Figure 2 The parsing process of the toString () method
From the above parsing process, if a property/method X is defined in the object, the object's prototype hides the property/method with the same name. For example, you can override the Object.prototype tostring method by defining the ToString method in Person.prototype.
Then look at the following code:
Copy Code code as follows:
function person (name, age) {
THIS.name = name;
This.age = age;
}
Person.prototype.getInfo = function () {
Alert ("My name is" +this.name+ ", and I have" +this.age+ "years old");
}
var zhangchen = new Person ("Zhangchen", 23);
var Luomi = new Person ("Luomi", 23);
Zhangchen.getinfo (); Output My name is Zhangchen, and I have years old;
Luomi.getinfo (); Output My name is Luomi, and I have years old;
Luomi.getinfo = function () {
Alert ("Here can rewrite the function of getinfo!");
}
Luomi.getinfo (); Here can rewrite the function of getinfo!
Zhangchen.getinfo (); Output My name is Zhangchen, and I have years old;
As you can see from the results of the run, although each instance of person inherits the methods in Person.prototype, we can redefine the method in the prototype object in the instantiated object and it will not affect other instances!
The above is your own understanding of the prototype and prototype chain inheritance, reference (JavaScript: Using object-oriented technology to create advanced WEB applications), I hope we discuss together!
