【前端精进之路】JS篇：第12期 对象继承的6种方式_以某种方式来增强这个对象 前端(1)

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新大数据全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注大数据）

正文

优缺点

优点：

• 继承了父类的模板，又继承了父类的原型对象

缺点：

• 如果要给子类的原型上新增属性和方法，就必须放在Child.prototype = new Parent()这样的语句后面
• 无法实现多继承(因为已经指定了原型对象了)
• 来自原型对象的所有属性都被共享了，这样如果不小心修改了原型对象中的引用类型属性，那么所有子类创建的实例对象都会受到影响，比如下面的例子：

function Parent () {
    this.names = ['kevin', 'daisy'];
}

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

child1.names.push('xiaofeixia');

console.log(child1.names); // ["kevin", "daisy", "xiaofeixia"]

var child2 = new Child();

console.log(child2.names); // ["kevin", "daisy", "xiaofeixia"]

• 创建子类时，无法向父类构造函数传参数(比如上面的如果想用父类的age，但我们无法传参)
• 某些属性其实是保存在父类型的实例对象上的；我们通过直接打印对象是看不到这个属性的

构造继承（借用构造函数继承）

function Parent (age) {
    this.names = ['a', 'f'];
    this.age = age;
}

function Child (age) {
    Parent.call(this,age);
}

var child1 = new Child(18);

child1.names.push('s');

console.log(child1.age);//18
console.log(child1.names); // ["a", "f", "s"]

var child2 = new Child();

console.log(child2.names); // ["a", "f"]

关键

在子类构造函数内部使用call或apply来调用父类构造函数

优缺点

优点：

• 解决了原型链继承中子类实例共享父类引用对象的问题，实现多继承，创建子类实例时，可以向父类传递参数

缺点：

• 相比原型链继承方式，父类的引用属性不会被共享，优化了第一种继承方式的弊端，但是只能继承父类的实例属性和方法，不能继承原型属性或者方法
• 方法都在构造函数中定义，每次创建实例都会创建一遍方法(即无法实现函数复用)

组合继承

既然原型链继承和构造继承都有这么多的缺点，那我们为何不阴阳结合，把它们组合在一起呢？

function Parent (name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
    console.log(this.name)
}

function Child (name, age) {

    Parent.call(this, name);
    
    this.age = age;

}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

// 测验代码

var child1 = new Child('kevin', '18');

child1.colors.push('black');

console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]

var child2 = new Child('daisy', '20');

console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]

关键：

• 使用原型链继承来保证子类能继承到父类原型中的属性和方法
• 使用构造继承来保证子类能继承到父类的实例属性和方法

伪代码

// 原型链继承
Child.prototype = new Parent()
// 构造继承
function Child () {
  Parent.call(this, ...arguments)
}

优缺点

优点：

• 可以继承父类实例属性和方法，也能够继承父类原型属性和方法
• 弥补了原型链继承中引用属性共享的问题
• 可传参，可复用

缺点：

• 使用组合继承时，父类构造函数会被调用两次
• 并且生成了两个实例，子类实例中的属性和方法会覆盖子类原型(父类实例)上的属性和方法，所以增加了不必要的内存。

解释上面的使用组合继承时，父类构造函数会被调用两次：

• 第一次是原型链继承的时候，new Parent()
• 第二次是构造继承的时候，Parent.call()调用的

另外，我们想要继承父类构造函数里的属性和方法采用的是构造继承，也就是复制一份到子类实例对象中，而此时由于调用了new Parent()，所以Child.prototype中也会有一份一模一样的属性，可是我子类实例对象自己已经有了一份了呀，所以我怎么也用不上Child.prototype上面的了，那你这凭空多出来的属性不就占了内存浪费了吗？

当然，这两份属性我们无需担心访问出现问题，因为根据原型链的访问规则，自身有，默认一定是访问实例本身这一部分的。

寄生组合继承

组合继承的缺点是父类构造函数会被调用两次：一次使用Parent.call()来获取父类身上的属性和方法，还有一次是用new Parent()来继承父类原型上的属性和方法，但是在继承的时候我们又在子类原型Child.prototype上拿到了父类实例上的属性和方法，但是我们并不需要这些，我们真正需要的是父类原型上的属性和方法。

那么我们就需要有一种方式，使得子类的原型直接继承父类的原型，不要额外继承一些不需要的父类实例身上的属性和方法。

也就是说，我们需要一个干净的实例对象，来作为子类的原型。并且这个干净的实例对象还得能继承父类原型对象里的属性。

Object.create()

function Parent (name) {
  this.name = name
}
Parent.prototype.getName = function () {
  console.log(this.name)
}
function Child (name) {
  this.sex = 'boy'
  Parent.call(this, name)
}
// 与组合继承的区别
Child.prototype = Object.create(Parent.prototype)

var child1 = new Child('child1')

console.log(child1)
child1.getName()

原型式继承

该方法的原理是创建一个构造函数，构造函数的原型指向对象，然后调用 new 操作符创建实例，并返回这个实例，本质是一个浅拷贝。

function objcet (obj) {
    function F () {};
    F.prototype = obj;
    F.prototype.constructor = F;
    return new F();
}

在ES5之后可以直接使用Object.create()方法来实现.

两个例子：

function create (obj) {
  function F () {};
  F.prototype = obj;
  F.prototype.constructor = F;
  return new F();
}
var cat = {
  heart: '❤️',
  colors: ['white', 'black']
}

var guaiguai = create(cat) 
var huaihuai = create(cat)

console.log(guaiguai)//F {}
console.log(huaihuai)//F {}

console.log(guaiguai.heart)//❤️
console.log(huaihuai.colors)//[ 'white', 'black' ]



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注大数据）**
![img](https://img-blog.csdnimg.cn/img_convert/e31bf0cd6bf0fc1f7e2c957588b75583.png)

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

ole.log(huaihuai.colors)//[ 'white', 'black' ]



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注大数据）**
[外链图片转存中...(img-Bd6djf2T-1713356405849)]

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**