本文不讲原理，直接上实例代码

一、基于原型的类继承

1、父类

// 父类构造方法
function Animal(name) { // 属性 this.name = name
}

// 父类方法
Animal.prototype.echoName = function () { console.log(this.name);
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

2、子类

// 子类构造方法
function Dog(name, age) { // 调用父类构造函数 Animal.call(this, name) this.age = age
}

// 子类继承父类的原型
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 子类方法
Dog.prototype.sayHello = function () { console.log(this.name, this.age);
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
 

3、实例化

// 实例化父类
var animal = new Animal('Tom')
animal.echoName()

// 实例化子类
var dog = new Dog('Tom', 23)
dog.echoName()
dog.sayHello()

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

二、基于class的类继承

JavaScrip从ES6开始正式引入关键字class

1、父类

class Animal { // 构造方法 constructor(name) { // 属性 this.name = name } // 父类方法 echoName() { console.log(this.name); }
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

2、子类

class Dog extends Animal { // 构造方法 constructor(name, age) { // 调用父类构造函数 super(name) this.age = age } sayHello() { console.log(this.name, this.age); }

}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

3、实例化

// 实例化父类
var animal = new Animal('Tom')
animal.echoName()

// 实例化子类
var dog = new Dog('Tom', 23)
dog.echoName()
dog.sayHello()

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

参考

1. 对象的继承
2. 面向对象编程

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/105893405