Inheritance and other inheritance in JavaScript_javascript tips

Inheritance Introduction

Inheritance in JS is a very complex topic, much more complex than inheritance in any other object-oriented language. In most other object-oriented languages, inheriting from a class requires just one keyword. In order to achieve the purpose of inheriting public members in JS, a series of measures need to be taken. JS belongs to prototypal inheritance. Thanks to this flexibility, we can use either standard class-based inheritance or more subtle prototypal inheritance. It should be clear in JS that all inheritance is carried out through prototype, and JS inherits based on objects.

Inherited:

function Animal(name){ 
this.name = name; 
this.showName = function(){ 
alert(this.name); 
} 
} 
function Cat(name){ 
Animal.call(this, name); 
} 
var cat = new Cat("Black Cat"); 
cat.showName();

Animal.call(this) means Use the Animal object instead of this object, then Cat will have all the properties and methods of Animal. The Cat object can directly call the methods and properties of Animal.

Multiple inheritance:

function Class10() 
{ 
this.showSub = function(a,b) 
{ 
alert(a-b); 
} 
} 
function Class11() 
{ 
this.showAdd = function(a,b) 
{ 
alert(a+b); 
} 
} 
function Class2() 
{ 
Class10.call(this); 
Class11.call(this); 
}

It’s very simple, using two calls to achieve multiple inheritance

Of course, js inheritance There are other methods, such as using the prototype chain. This is not within the scope of this article. I just explain the usage of call here. Speaking of call, and of course apply, these two methods basically mean the same thing. The difference is that the second parameter of call can be of any type, while the second parameter of apply must be an array or arguments.

Let me introduce you to how to implement simple inheritance in JavaScript?

The following example will create an employee class Employee, which inherits all the properties in the prototype prototype from Person.

function Employee(name, sex, employeeID) {
this.name = name;
this.sex = sex;
this.employeeID = employeeID;
}
// 将Employee的原型指向Person的一个实例
// 因为Person的实例可以调用Person原型中的方法, 所以Employee的实例也可以调用Person原型中的所有属性。
Employee.prototype = new Person();
Employee.prototype.getEmployeeID = function() {
return this.employeeID;
};
var zhang = new Employee("ZhangSan", "man", "");
console.log(zhang.getName()); // "ZhangSan

The above implementation of inheritance is very rough and there are many problems:

When creating the Employee constructor and prototype (hereinafter referred to as class), Person is instantiated, which is inappropriate.

The constructor of Employee cannot call the constructor of the parent class Person, resulting in repeated assignment of the name and sex attributes in the Employee constructor.

The function in Employee will overwrite the function of the same name in Person, and there is no overloading mechanism (this is the same type of problem as the previous one).

The syntax for creating JavaScript classes is too fragmented and not as elegant as the syntax in C#/Java.

There is a pointing error in the constructor attribute in the implementation.

The above is the content of inheritance in JavaScript and other inheritance_javascript techniques. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!