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

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继承的区别

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,723评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,485评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,998评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,323评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,355评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,079评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,389评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,019评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,519评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,738评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,293评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2赞 345