面试中的必问痛点-原型和原型链以及继承

1. 背景

前端面试经常会问到这个问题，这是一个比较让人回答起来比较头疼的问题，为什么头疼呢，因为javaScript在被创造出来的时候就具备了和现有的强语言有了很大的区别，因为出发点就是一个脚本语言，而并非想java等语言，所以js的原型就相对比较复杂。想要搞明白原型和原型链首先我们需要搞明白两个问题：

1. 搞清楚prototype与__proto__是什么
2. 搞清楚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.创建子类实例时，不能向父类构造函数中传参数
无法实现多继承

2.借用构造函数继承

3.组合继承（组合原型链继承和借用构造函数继承）（常用）

4.实例继承（原型式继承）

5.寄生式继承

6.寄生组合式继承（常用）

7.es6继承

5. ES5继承和ES6继承的区别