Home > Web Front-end > JS Tutorial > javascript object-oriented new understanding of prototypal inheritance_js object-oriented

javascript object-oriented new understanding of prototypal inheritance_js object-oriented

WBOY
Release: 2016-05-16 18:40:35
Original
1123 people have browsed it

First create an instantiation object of the parent class, and then assign the object to the prototype property of the subclass.
In this way, all public instance members in the parent class will be inherited by the subclass. And when judged by the instanceof operator, the instantiated object of the subclass belongs to both the subclass and the parent class.

Then assign the subclass itself to the constructor property of its prototype. (Note: There is no () when assigning values ​​here!)
This step is to ensure that when viewing the constructor attribute of the instantiated object of the subclass, you see the definition of the subclass, not its parent class. definition.

Next, through the result of calling o.method1(), we will see that among the public instance methods inherited by the subclass, if the private instance field or private instance method is called, then the Private instance members belong to the parent class.

Similarly, through the result of calling o.method2(), we can see that if the instance method defined in the subclass calls a private instance field or a private instance method, the private instance members called are Belonging to subcategories.

Through the result of calling o.method(), we can see that the method defined on the prototype of the parent class will be inherited by the subclass.
Through the result of calling o.method3(), we can see that the instance method defined in the subclass cannot access the private instance members defined in the parent class.
Finally, through the result of calling subClass.staticMethod() we see that static members will not be inherited.

2.4 Calling inheritance method
The essence of calling inheritance is that in the constructor of the subclass, the constructor method of the parent class is executed in the execution context of the subclass, and all the constructor methods of the parent class are executed in the execution context of the subclass. The content operated through this method is actually the content on the instantiated object of the subclass of the operation. Therefore, this approach is only to reduce the writing of duplicate code.

Copy code The code is as follows:

function parentClass() {
// private field
var x = "I'm a parentClass field!";
// private method
function method1() {
alert(x);
alert("I'm a parentClass method!");
}
// public field
this.x = "I'm a parentClass object field!";
// public method
this.method1 = function( ) {
alert(x);
alert(this.x);
method1();
}
}
parentClass.prototype.method = function () {
alert("I'm a parentClass prototype method!");
}

parentClass.staticMethod = function () {
alert("I'm a parentClass static method!");
}

function subClass() {
// inherit
parentClass.call(this);

// private field
var x = "I' m a subClass field!";
// private method
function method2() {
alert(x);
alert("I'm a subClass method!");
}
// public field
this.x = "I'm a subClass object field!";
// public method
this.method2 = function() {
alert(x) ;
alert(this.x);
method2();
}
this.method3 = function() {
method1();
}
}

// test
var o = new subClass();

alert(o instanceof parentClass); // false
alert(o instanceof subClass); // true

alert(o.constructor); // function subClass() {...}

o.method1(); // I'm a parentClass field!
// I'm a subClass object field!
// I'm a parentClass field!
// I'm a parentClass method!
o.method2(); // I'm a subClass field!
// I'm a subClass object field!
// I'm a subClass field!
// I'm a subClass method!

o.method(); // Error! !!
o.method3(); // Error!!!
subClass.staticMethod(); // Error!!!

The above example is a good reflection of how to use the call inheritance method to implement inheritance.
The key to using call inheritance is only one step:
When the subclass is defined, pass in the this pointer of the subclass through the call method of the parent class. Make the parent class method execute in the child class context.
In this way, all public instance members in the parent class defined through this method inside the parent class will be inherited by the subclass.
When judged by the instanceof operator, the instantiated object of the subclass only belongs to the subclass, not the parent class.
When you look at the constructor property of an instantiated object of a subclass, you see the definition of the subclass, not the definition of its parent class.
Next, the result of calling o.method1() and o.method2() is the same as the result of calling prototypal inheritance, and the problem explained is also the same, which will not be repeated here.
Through the result of calling o.method(), we can see that methods defined on the prototype of the parent class will not be inherited by the subclass.
Through the result of calling o.method3(), we can see that the instance methods defined in the subclass cannot access the private instance members defined in the parent class.
Finally, through the result of calling subClass.staticMethod() we see that static members will also not be inherited.
Finally, there is another point that is not reflected in this example, that is, multiple inheritance can be achieved by calling the inheritance method. That is to say, a subclass can inherit from multiple parent classes all public instance members defined inside the parent class through this method.
As a weakly typed language, JavaScript provides rich polymorphism. The polymorphism of JavaScript is unmatched by other strongly typed object-oriented languages.
Polymorphism
Overloading and overwriting
Let’s first explain the difference between overloading and overwriting. The English word for overloading is overload, and the English word for coverage is override. I found that most people on the Internet regard override as overloading, which is wrong. There is a difference between overloading and overriding.
Overloading means that a function (note that functions are included here) or a method with the same name can have multiple implementations, and they are distinguished by the type of parameters and/or the number of parameters.
The meaning of overwriting is that the subclass can define methods with the same name as those in the parent class, and the same parameter types and numbers. After these methods are defined, they will be inherited in the parent class in the instantiation object of the subclass. These methods with the same name will be hidden.
Overloading
The parameters of functions in JavaScript are not typed, and the number of parameters is arbitrary. For example, although you can define one:
Copy Code The code is as follows:

function add(a, b) {
return a b;
}

This way function, but you can still call it with any number of parameters. Of course, the parameter types are also arbitrary. As for whether an error occurs, it is determined by the content executed in this function. JavaScript does not determine which function you are calling based on the number and type of parameters you specify.
Therefore, to define overloaded methods, you cannot do it like in strongly typed languages. But you can still implement overloading. That is through the arguments property of the function. For example:
Copy code The code is as follows:

function add() {
var sum = 0;
for (var i = 0; i < arguments.length; i ) {
sum = arguments[i];
}
return sum;
}

In this way, you can overload the addition function with any number of parameters.
Of course, you can also use instanceof or constructor to determine the type of each parameter in the function to decide what operations to perform later and implement more complex function or method overloading. In short, JavaScript overloading is implemented by the user himself in the function by manipulating the arguments attribute.
Override
It is also easy to implement override, for example:
Copy the code The code is as follows:

function parentClass() {
this.method = function() {
alert("parentClass method");
}
}
function subClass() {
this .method = function() {
alert("subClass method");
}
}
subClass.prototype = new parentClass();
subClass.prototype.constructor = subClass;

var o = new subClass();
o.method();

In this way, the method defined in the subclass overrides the method inherited from the parent class.
You may say that overwriting like this is good, but in Java, the overridden method (method of the parent class) can be called in the overridden method. How to implement it here? It is also very easy, and more flexible than in Java. There is a limitation in Java that you can only use super to call the overridden method in the method that overrides the overridden method. Not only can we achieve this, but we can also make all methods in the subclass call the overridden methods in the parent class. Look at the example below:
Copy code The code is as follows:

function parentClass() {
this.method = function() {
alert("parentClass method");
}
}
function subClass() {
var method = this.method;
this .method = function() {
method.call(this);
alert("subClass method");
}
}
subClass.prototype = new parentClass();
subClass.prototype.constructor = subClass;

var o = new subClass();
o.method();

You will find that it is so simple, as long as Before defining the overriding method, define a private variable, and then assign the method to be overridden defined in the parent class to it, and then we can continue to call it later, and this method is private, for subclasses The object is invisible. This is consistent with the coverage implemented in other high-level languages.

Finally, it should be noted that when we call this method in the overriding method, we need to use the call method to change the execution context to this (although it is not necessary in this example). If we call this method directly, the execution context will It becomes a global object.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template