面试中的必问痛点-原型和原型链以及继承
1. 背景
前端面试经常会问到这个问题，这是一个比较让人回答起来比较头疼的问题，为什么头疼呢，因为javaScript在被创造出来的时候就具备了和现有的强语言有了很大的区别，因为出发点就是一个脚本语言，而并非想java等语言，所以js的原型就相对比较复杂。想要搞明白原型和原型链首先我们需要搞明白两个问题：
- 搞清楚
prototype与__proto__是什么- 搞清楚
prototype与__proto__的关系和指向问题
2. 原型的定义和作用
这个面试要考的
定义：原型就是指函数的
prototype属性所引用的对象，这个对象就是原型
作用：原型的作用就是为了实现对象之间的数据共享
es5获取对象原型的标准方法是Object.getPrototypeOf()
举例来说明一下原型的作用
用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。
function DOG(name) {
this.name = name;
this.species = '犬科';
}
var dogA = new DOG('大毛');
var dogB = new DOG('二毛');
dogA.species = '猫科';
console.log(dogA.species) //=>猫科
console.log(dogB.species) //=>猫科
console.log(dogA)
console.log(dogB)
image.png
结论：每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费。
优化代码使用prototype
function DOG(name) {
this.name = name;
}
DOG.prototype = { species : '犬科' };
var dogA = new DOG('大毛');
var dogB = new DOG('二毛');
dogA.species = '猫科';
console.log(dogA.species) //=>猫科
console.log(dogB.species) //=>猫科
console.log(dogA)
console.log(dogB)
image.png
1.实例对象需要共享的属性和方法，都放在这个对象里面；那些不需要共享的属性和方法，就放在构造函数里面
2.实例对象一旦创建，将自动引用prototype对象的属性和方法。也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。
3. prototype和__proto__的区别
先搞清楚一个概念
所有的构造函数都是需要用new来实例化
那么Object，Function，Array，String，String，Data，Boolean等等都是构造函数
测试一下
function fun1() {}
var obg = {}
console.dir(fun1)
console.log("=======================")
console.dir(obg)
console.log("=======================")
console.dir(Array)
image.png
什么意思呢？就是为了说明一个问题 （很重要）
函数拥有
prototype和__proto__属性
对象只拥有__proto__属性
为什么函数具有prototype属性，上面已经简单说明了说明，详情请看Javascript继承机制的设计思想
说明：__proto__不是一个规范属性, 但是这个属性已在ES6语言规范中标准化，不推荐使用，但是我们可以利用它来学习原型的原理，建议使用Object.getPrototypeOf/Reflect.getPrototypeOf和Object.setPrototypeOf/Reflect.setPrototypeOf,但是现代浏览器基本都支持包括 IE11
该属性没有写入 ES6 的正文，而是写入了附录，原因是proto前后的双下划线，说明它本质上是一个内部属性，而不是一个正式的对外的 API ，只是由于浏览器广泛支持，才被加入了 ES6
5. 原型链
定义：当原型对象找不到需要的属性时通过内部属性
prototype或__proto__向上查找，一次类推就构成了一个链，这个构成对象的链就叫做原型链
Object.prototype是对象的最终原型，绝大多数对象最终都会继承自Object.prototype，而Object.prototype的原型是null。
JavaScript的原型链逻辑遵从以下通用规则
通用规则
1.对象有
__proto__属性，函数有prototype属性
2.对象是由函数生成的
3.生成对象时， 对象的__proto__属性指向的就是函数的prototype属性
-
一般情况
// 创建空对象时，实际上是我们用Object函数来生成的对象
var obj = {}
console.log(obj.__proto__ === Object.prototype) //true
// 我们也可以显式的使用Object函数来创建对象：
var obj1 = Object()
console.log(obj1.__proto__ === Object.prototype) //true
var obj2 = new Object()
console.log(obj2.__proto__ === Object.prototype) //true
// 当我们使用函数来创建自定义的对象时，上面的规则同样适用：
function Fun() { }
var f1 = new Fun()
console.log(f1.__proto__ === Fun.prototype) //true
-
函数对象
//函数作为一种特殊的对象， 如果函数做为对象使用，上面的规则依然有效
//函数对象是由Function函数生成的
function Func(){}
console.log(Func.__proto__===Function.prototype) //true
//函数本身也是由Function本身
console.log(Function.__proto__===Function.prototype) //true
Object函数既然是函数，那生成它的函数自然是Function函数，上面的规则依然有效
console.log(Object.__proto__===Function.prototype) //true
-
特殊情况一
先来打印下Object.prototype看看
console.log(Object.prototype)
打印出一堆方法，其实这些方法都是javaScript的默认方法，但是奇怪的是Object.prototype 属性中没有__proto__属性
console.log(Object.prototype.__proto__) // null
这就是Object函数特殊情况了：Object.prototype.proto === null，我们知道，这就是JavaScript原型链的终点了。如果Object.prototype.proto === Object.prototype，想想原型链没有了终点，太可怕了，所以在原型链的最顶端，JavaScript规定了Object.prototype.proto === null。
-
特殊情况二
先来打印下Function.prototype看看
console.log（Function.prototype）
// ƒ () { [native code] }
函数内部是[native code]，也就是系统编译好的二进制代码函数，这就暂时没法深究了。现在让我们来看看我们最关心的proto属性：
console.log(Function.prototype.__proto__)
打印的结果竟然和Object.prototype结果一样，测试下
console.log(Function.prototype.__proto__ === Object.prototype ) //true
竟然真的一样。又回到了第一种特使情况 我的那个天啊
这就是原型链懂了吗
5. 原型继承
我们平时一般说的继承，是原型继承，不是改变构造函数的原型
写个简单的例子看看
function User(){}
User.prototype.name = function(){
console.log('我是User');
}
function Admin(){}
Admin.prototype = User.prototype
var admin = new Admin()
admin.name()
//我是User
看起来好像没有问题，我们拿到了User的name方法，但是我在如果重新一下Admin的name方法呢
function User(){}
User.prototype.name = function(){
console.log('我是User');
}
function Admin(){}
Admin.prototype = User.prototype
Admin.prototype.name = function(){
console.log('我是Admin');
}
var admin = new Admin()
var user = new User()
admin.name() //我是Admin
user.name() //我是Admin
问题来的竟然user.name()也打印出来了我是Admin，这是一件非常糟糕的事情，
那要怎么做呢
function User(){}
User.prototype.name = function(){
console.log('我是User');
}
function Admin(){}
// 记住一定原型继承，不是改变构造函数的原型
Admin.prototype.__proto__ = User.prototype
Admin.prototype.name = function(){
console.log('我是Admin');
}
var admin = new Admin()
var user = new User()
admin.name() //我是Admin
user.name() //我是User
6. 如何实现原型继承
学习继承那就先要有个父类，在js中实际上是没有类的概念，在es6中class虽然很像类，但实际上只是es5上语法糖而已
//这是一个基类或者说是父类
function Admin(name) {
this.name = name || 'admin'
this.add = function () {
console.log('我是：' + this.name + ",我有新增功能");
}
}
Admin.prototype.Edit = function (val) {
console.log('我是：' + this.name + ",我的功能是编辑" + val);
}
1.原型链继承
将父类的实例作为子类的原型
function User(){
this.name = '李四'
}
User.prototype = new Admin()
User.prototype.constructor = User
var user = new User()
user.add() // 我是：李四,我有新增功能
console.log(user instanceof Admin) //true
优点：简单易于实现，父类的新增的实例与属性子类都能访问
缺点：
1.可以在子类中增加实例属性，如果要新增加原型属性和方法需要在new 父类构造函数的后面;
2.无法实现多继承
3.创建子类实例时，不能向父类构造函数中传参数
无法实现多继承
