# 原型与继承

# 原型

涉及面试题：如何理解原型？如何理解原型链？

当我们创建一个对象时 let obj = { age: 25 }，我们可以发现能使用很多种函数，但是我们明明没有定义过它们。

当我们在浏览器中打印 obj 时你会发现，在 obj 上居然还有一个 __proto__ 属性。

其实每个 JS 对象都有 __proto__ 属性，这个属性指向了原型。这个属性在现在来说已经不推荐直接去使用它了，这只是浏览器在早期为了让我们访问到内部属性 [[prototype]] 来实现的一个东西。

原型也是一个对象，并且这个对象中包含了很多函数，所以我们可以得出一个结论：对于 obj 来说，可以通过 __proto__ 找到一个原型对象，在该对象中定义了很多函数让我们来使用。

原型上有一个 constructor 属性，也就是构造函数。

这个构造函数还有一个 prototype 属性，并且这个属性对应的值和先前我们在 __proto__ 中看到的一模一样。

所以我们又可以得出一个结论：原型的 constructor 属性指向构造函数，构造函数又通过 prototype 属性指回原型，但是并不是所有函数都具有这个属性。

看完这张图，我再来解释下什么是原型链吧。其实原型链就是多个对象通过 __proto__ 的方式连接了起来。为什么 obj 可以访问到 valueOf 函数，就是因为 obj 通过原型链找到了 valueOf 函数。

总结

Object 是所有对象的爸爸，所有对象都可以通过 __proto__ 找到它 Function 是所有函数的爸爸，所有函数都可以通过 __proto__ 找到它 函数的 prototype 是一个对象 对象的 __proto__ 属性指向原型， __proto__ 将对象和原型连接起来组成了原型链

# 原型继承

涉及面试题：原型如何实现继承？Class 如何实现继承？Class 本质是什么？

首先先来讲下 class，其实在 JS 中并不存在类，class 只是语法糖，本质还是函数。

class Person {}
Person instanceof Function; // true

我们将会使用分别使用原型和 class 的方式来实现继承。

# 组合继承

组合继承是最常用的继承方式，

function Parent(value) {
	this.val = value;
}
Parent.prototype.getValue = function() {
	console.log(this.val);
};
function Child(value) {
	Parent.call(this, value);
}
Child.prototype = new Parent();

const child = new Child(1);

child.getValue(); // 1
child instanceof Parent; // true

以上继承的方式核心是在子类的构造函数中通过 Parent.call(this) 继承父类的属性，然后改变子类的原型为 new Parent() 来继承父类的函数。

这种继承方式优点在于构造函数可以传参，不会与父类引用属性共享，可以复用父类的函数，但是也存在一个缺点就是在继承父类函数的时候调用了父类构造函数，导致子类的原型上多了不需要的父类属性，存在内存上的浪费。

# 寄生组合继承

这种继承方式对组合继承进行了优化，组合继承缺点在于继承父类函数时调用了构造函数，我们只需要优化掉这点就行了。

function Parent(value) {
	this.val = value;
}
Parent.prototype.getValue = function() {
	console.log(this.val);
};

function Child(value) {
	Parent.call(this, value);
}
Child.prototype = Object.create(Parent.prototype, {
	constructor: {
		value: Child,
		enumerable: false,
		writable: true,
		configurable: true,
	},
});

const child = new Child(1);

child.getValue(); // 1
child instanceof Parent; // true

以上继承实现的核心就是将父类的原型赋值给了子类，并且将构造函数设置为子类，这样既解决了无用的父类属性问题，还能正确的找到子类的构造函数。

# Class 继承

以上两种继承方式都是通过原型去解决的，在 ES6 中，我们可以使用 class 去实现继承，并且实现起来很简单

class Parent {
	constructor(value) {
		this.val = value;
	}
	getValue() {
		console.log(this.val);
	}
}
class Child extends Parent {
	constructor(value) {
		super(value);
		this.val = value;
	}
}
let child = new Child(1);
child.getValue(); // 1
child instanceof Parent; // true

class 实现继承的核心在于使用 extends 表明继承自哪个父类，并且在子类构造函数中必须调用 super，因为这段代码可以看成 Parent.call(this, value)。

当然了，之前也说了在 JS 中并不存在类，class 的本质就是函数。