JavaScript类继承

时间:2023-03-08 15:39:25
JavaScript类继承
  1. 和其他功能一样,ECMAScript 实现继承的方式不止一种。这是因为 JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者,你有权决定最适用的继承方式。
  2. 创建的子类将继承超类的所有属性和方法,包括构造函数及方法的实现。记住,所有属性和方法都是公用的,因此子类可直接访问这些方法。子类还可添加超类中没有的新属性和方法,也可以覆盖超类的属性和方法。
  3. 继承的方式:
  • 对象冒充方式方式一
       /*被继承类*/
function Animal_1(name) {
this.name = name;
this.printName = function () {
console.log(this.name);
}
}
function Person_1(name,age) {
this.method1 = Animal_1;
this.method1(name);
this.age = age;
this.printAge = function () {
console.log(this.age);
}
}
var o1 = new Person_1("ysw",18);
var o2 = new Animal_1("ysw");
console.log(o1);
console.log(o2);
console.log(o1 instanceof Animal_1);
console.log(o1 instanceof Person_1);
console.log(o2 instanceof Animal_1);
console.log(o2 instanceof Person_1);
  • 对象冒充方式方式二:利用call方法和apply方法
	function Animal_2(name) {
this.name = name;
this.printName = function () {
console.log(this.name);
}
}
function Person_2(name,age) {
Animal_2.call(this,name);
// Animal_2.apply(this,new Array(name));
this.age = age;
this.printAge = function () {
console.log(this.age);
}
}
o1 = new Person_2("ysw",18);
o2 = new Animal_2("ysw");
console.log(o1);
console.log(o2);
console.log(o1 instanceof Animal_2);
console.log(o1 instanceof Person_2);
console.log(o2 instanceof Animal_2);
console.log(o2 instanceof Person_2);
  • 原型链方式
        /*被继承类*/
function Animal_3() {
}
Animal_3.prototype.name = "ysw";
Animal_3.prototype.printName = function () {
console.log(this.name);
};
function Person_3() {
}
Person_3.prototype = new Animal_3();
Person_3.prototype.age = 18;
Person_3.prototype.printAge = function () {
console.log(this.age);
};
o1 = new Person_3();
o2 = new Animal_3();
console.log(o1);
console.log(o2);
console.log(o1 instanceof Animal_3);
console.log(o1 instanceof Person_3);
console.log(o2 instanceof Animal_3);
console.log(o2 instanceof Person_3);
  • 混合方式
        /*被继承类*/
function Animal_4(name) {
this.name = name;
}
Animal_4.prototype.printName = function () {
console.log(this.name);
};
function Person_4(name,age) {
Animal_4.call(this,name);
this.age = age;
}
Person_4.prototype = new Animal_4();
Person_4.prototype.printAge = function () {
console.log(this.age);
};
o1 = new Person_4("晏沈威",22);
o2 = new Animal_4("晏沈威");
console.log(o1);
console.log(o2);
console.log(o1 instanceof Animal_4);
console.log(o1 instanceof Person_4);
console.log(o2 instanceof Animal_4);
console.log(o2 instanceof Person_4);
  • ES6语法 class extends继承
        /*被继承类*/
class Animal_5 {
constructor(name){
this.name = name;
}
printName(){
console.log(this.name);
}
}
class Person_5 extends Animal_5{
constructor(name,age){
super(name);
this.age = age;
}
printAge() {
console.log(this.age);
};
}
o1 = new Person_5("晏沈威",22);
o2 = new Animal_5("晏沈威");
console.log(o1);
console.log(o2);
console.log(o1 instanceof Animal_5);
console.log(o1 instanceof Person_5);
console.log(o2 instanceof Animal_5);
console.log(o2 instanceof Person_5);