js继承与实现（总结）

秒速五厘米 2022-03-16 08:52 188阅读 0赞

> 之前说要将js继承写完全，好像时间和能力不太允许，所以，将笔记分享给大家，与大家一同学习，一起进步！

【转】  [幻天芒][Link 1] ：[https://www.cnblogs.com/humin/p/4556820.html][https_www.cnblogs.com_humin_p_4556820.html]的博客，感谢大佬的分享！

### JS继承的实现方式 ###

**既然要实现继承，那么首先我们得有一个父类，代码如下：**

// 定义一个动物类

function Animal (name) \{

// 属性

this.name = name || 'Animal';

// 实例方法

this.sleep = function()\{

console.log(this.name + '正在睡觉！');

**// 原型方法**

Animal.prototype.eat = function(food) \{

console.log(this.name + '正在吃：' + food);

\};

**1、原型链继承**

核心： 将父类的实例作为子类的原型

function Cat()\{

Cat.prototype = new Animal();

Cat.prototype.name = 'cat';

var cat = new Cat();

console.log(cat.name);

console.log(cat.eat('fish'));

console.log(cat.sleep());

console.log(cat instanceof Animal); //true

console.log(cat instanceof Cat); //true

特点：

非常纯粹的继承关系，实例是子类的实例，也是父类的实例

父类新增原型方法/原型属性，子类都能访问到

简单，易于实现

缺点：

要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中无法实现多继承

创建子类实例时，无法向父类构造函数传参

**2、构造继承**

核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Cat(name)\{

Animal.call(this);

this.name = name || 'Tom';

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // false

console.log(cat instanceof Cat); // true

特点：

创建子类实例时，可以向父类传递参数

可以实现多继承（call多个父类对象）

缺点：

实例并不是父类的实例，只是子类的实例

只能继承父类的实例属性和方法，不能继承原型属性/方法

无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

**3、实例继承**

function Cat(name)\{

var instance = new Animal();

instance.name = name || 'Tom';

return instance;

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // true

console.log(cat instanceof Cat); // false

特点：

不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果

缺点：

实例是父类的实例，不是子类的实例

不支持多继承

**4、组合继承**

function Cat(name)\{

Animal.call(this);

this.name = name || 'Tom;

Cat.prototype=new Animal();

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // true

console.log(cat instanceof Cat); // true

特点：

弥补了方式2 的缺陷

缺点：

生成了两个实例，消耗内存；

= name || 'Tom;

Cat.prototype=new Animal();

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // true

console.log(cat instanceof Cat); // true

特点：

弥补了方式2 的缺陷

缺点：

生成了两个实例，消耗内存；

[Link 1]: https://www.cnblogs.com/humin/
[https_www.cnblogs.com_humin_p_4556820.html]: https://www.cnblogs.com/humin/p/4556820.html

js继承与实现（总结）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 js中继承方法总结

相关 js的7种继承方法总结

相关 js怎么实现继承

相关 js的面试与笔试---JS实现继承的几种方式

相关总结JS中的继承

相关 JS中继承方式总结

相关 JS实现继承 JavaScript

相关 js继承与实现（总结）

相关 js继承:一网打尽js继承

相关 js实现继承的方式