对象和函数的原型

认识对象的原型

◼ JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]，这个特殊的对象可以指向另外一个对象。
◼ 那么这个对象有什么用呢？

  • 当我们通过引用对象的属性key来获取一个value时，它会触发 [[Get]]的操作；
  • 这个操作会首先检查该对象是否有对应的属性，如果有的话就使用它；
  • 如果对象中没有改属性，那么会访问对象[[prototype]]内置属性指向的对象上的属性；

◼ 那么如果通过字面量直接创建一个对象，这个对象也会有这样的属性吗？如果有，应该如何获取这个属性呢？

  • 答案是有的，只要是对象都会有这样的一个内置属性；

◼ 获取的方式有两种：

  • 方式一：通过对象的 proto 属性可以获取到（但是这个是早期浏览器自己添加的，存在一定的兼容性问题）；
  • 方式二：通过 Object.getPrototypeOf 方法可以获取到；

函数的原型 prototype

◼ 那么我们知道上面的东西对于我们的构造函数创建对象来说有什么用呢？

  • 它的意义是非常重大的，接下来我们继续来探讨；

◼ 这里我们又要引入一个新的概念：所有的函数都有一个prototype的属性（注意：不是proto）
image.png
◼ 你可能会问题，老师是不是因为函数是一个对象，所以它有prototype的属性呢？

  • 不是的，因为它是一个函数，才有了这个特殊的属性；
  • 而不是它是一个对象，所以有这个特殊的属性；

image.png

new、constructot

再看new操作符

◼ 我们前面讲过new关键字的步骤如下：

  • 1.在内存中创建一个新的对象（空对象）；
  • 2.这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性；

◼ 那么也就意味着我们通过Person构造函数创建出来的所有对象的[[prototype]]属性都指向Person.prototype：
image.png
image.png

创建对象的内存表现

image.png

prototype添加属性

image.png

上课画图（添加属性）

image.png

constructor 属性

◼ 事实上原型对象上面是有一个属性的：constructor

  • 默认情况下原型上都会添加一个属性叫做constructor，这个constructor指向当前的函数对象；

image.png

重写原型对象

◼ 如果我们需要在原型上添加过多的属性，通常我们会重写整个原型对象：
image.png
◼ 前面我们说过, 每创建一个函数, 就会同时创建它的prototype对象, 这个对象也会自动获取constructor属性；

  • 而我们这里相当于给prototype重新赋值了一个对象, 那么这个新对象的constructor属性, 会指向Object构造函数, 而不是 Person构造函数了

原型对象的constructor

◼ 如果希望constructor指向Person，那么可以手动添加：
◼ 上面的方式虽然可以, 但是也会造成constructor的[[Enumerable]]特性被设置了true.

  • 默认情况下, 原生的constructor属性是不可枚举的.
  • 如果希望解决这个问题, 就可以使用我们前面介绍Object.defineProperty()函数了

image.png
image.png

原型链的查找顺序

创建对象 – 构造函数和原型组合

◼ 我们在上一个构造函数的方式创建对象时，有一个弊端：会创建出重复的函数，比如running、eating这些函数

  • 那么有没有办法让所有的对象去共享这些函数呢?
  • 可以，将这些函数放到Person.prototype的对象上即可；

image.png

面向对象的特性 – 继承

◼ 面向对象有三大特性：封装、继承、多态

  • 继承可以帮助我们将重复的代码和逻辑抽取到父类中，子类只需要直接继承过来使用即可；
  • 在很多编程语言中，继承也是多态的前提
  • 封装：我们前面将属性和方法封装到一个类中，可以称之为封装的过程；
  • 继承：继承是面向对象中非常重要的，不仅仅可以减少重复代码的数量，也是多态前提（纯面向对象中）；
  • 多态：不同的对象在执行时表现出不同的形态；

◼ 那么这里我们核心讲继承。
◼ 那么继承是做什么呢？ ；

◼ 那么JavaScript当中如何实现继承呢？

  • 不着急，我们先来看一下JavaScript原型链的机制；
  • 再利用原型链的机制实现一下继承；

JavaScript原型链

◼ 在真正实现继承之前，我们先来理解一个非常重要的概念：原型链。

  • 我们知道，从一个对象上获取属性，如果在当前对象中没有获取到就会去它的原型上面获取：

image.png
image.png

Object的原型

◼ 那么什么地方是原型链的尽头呢？比如第三个对象是否也是有原型proto属性呢？
image.png
◼ 我们会发现它打印的是 [Object: null prototype] {}

  • 事实上这个原型就是我们最顶层的原型了
  • 从Object直接创建出来的对象的原型都是 [Object: null prototype] {}。

◼ 那么我们可能会问题： [Object: null prototype] {} 原型有什么特殊吗？

  • 特殊一：该对象有原型属性，但是它的原型属性已经指向的是null，也就是已经是顶层原型了；
  • 特殊二：该对象上有很多默认的属性和方法；

创建Object对象的内存图

image.png

原型链关系的内存图

image.png

Object是所有类的父类

◼ 从我们上面的Object原型我们可以得出一个结论：原型链最顶层的原型对象就是Object的原型对象
image.png
image.png

原型链实现的继承

通过原型链实现继承

◼ 如果我们现在需要实现继承，那么就可以利用原型链来实现了：

  • 目前stu的原型是p对象，而p对象的原型是Person默认的原型，里面包含running等函数；
  • 注意：步骤4和步骤5不可以调整顺序，否则会有问题

image.png
image.png

继承创建对象的内存图

image.png

原型链继承的弊端

◼ 但是目前有一个很大的弊端：某些属性其实是保存在p对象上的；

  • 第一，我们通过直接打印对象是看不到这个属性的；
  • 第二，这个属性会被多个对象共享，如果这个对象是一个引用类型，那么就会造成问题；
  • 第三，不能给Person传递参数（让每个stu有自己的属性），因为这个对象是一次性创建的（没办法定制化）；

借用构造函数继承

借用构造函数继承

◼ 为了解决原型链继承中存在的问题，开发人员提供了一种新的技术: constructor stealing(有很多名称: 借用构造函数或者称之
为经典继承或者称之为伪造对象)：

  • steal是偷窃、剽窃的意思，但是这里可以翻译成借用；

◼ 借用继承的做法非常简单：在子类型构造函数的内部调用父类型构造函数.

  • 因为函数可以在任意的时刻被调用；
  • 因此通过apply()和call()方法也可以在新创建的对象上执行构造函数；

image.png

组合借用继承的问题

◼ 组合继承是JavaScript最常用的继承模式之一：

  • 如果你理解到这里, 点到为止, 那么组合来实现继承只能说问题不大；
  • 但是它依然不是很完美，但是基本已经没有问题了；

◼ 组合继承存在什么问题呢?

  • 组合继承最大的问题就是无论在什么情况下，都会调用两次父类构造函数。
    • 一次在创建子类原型的时候；
    • 另一次在子类构造函数内部(也就是每次创建子类实例的时候)；
  • 另外，如果你仔细按照我的流程走了上面的每一个步骤，你会发现：所有的子类实例事实上会拥有两份父类的属性
    • 一份在当前的实例自己里面(也就是person本身的)，另一份在子类对应的原型对象中(也就是person.proto里面)；
    • 当然，这两份属性我们无需担心访问出现问题，因为默认一定是访问实例本身这一部分的；

原型式继承函数

◼ 原型式继承的渊源

  • 这种模式要从道格拉斯·克罗克福德（Douglas Crockford，著名的前端大师，JSON的创立者）在2006年写的一篇文章说起: Prototypal Inheritance in JavaScript(在JavaScript中使用原型式继承)
  • 在这篇文章中，它介绍了一种继承方法，而且这种继承方法不是通过构造函数来实现的.
  • 为了理解这种方式，我们先再次回顾一下JavaScript想实现继承的目的：重复利用另外一个对象的属性和方法.

◼ 最终的目的：student对象的原型指向了person对象；
image.png

寄生组合实现继承

寄生式继承函数

◼ 寄生式(Parasitic)继承

  • 寄生式(Parasitic)继承是与原型式继承紧密相关的一种思想, 并且同样由道格拉斯·克罗克福德(Douglas Crockford)提出和推 广的；
  • 寄生式继承的思路是结合原型类继承和工厂模式的一种方式；
  • 即创建一个封装继承过程的函数, 该函数在内部以某种方式来增强对象，最后再将这个对象返回；

image.png
image.png

寄生组合式继承

◼ 现在我们来回顾一下之前提出的比较理想的组合继承

  • 组合继承是比较理想的继承方式, 但是存在两个问题:
  • 问题一: 构造函数会被调用两次: 一次在创建子类型原型对象的时候, 一次在创建子类型实例的时候.
  • 问题二: 父类型中的属性会有两份: 一份在原型对象中, 一份在子类型实例中.

◼ 事实上, 我们现在可以利用寄生式继承将这两个问题给解决掉.

  • 你需要先明确一点: 当我们在子类型的构造函数中调用父类型.call(this, 参数)这个函数的时候, 就会将父类型中的属性和方法复
  • 制一份到了子类型中. 所以父类型本身里面的内容, 我们不再需要.
  • 这个时候, 我们还需要获取到一份父类型的原型对象中的属性和方法.
  • 能不能直接让子类型的原型对象 = 父类型的原型对象呢?
  • 不要这么做, 因为这么做意味着以后修改了子类型原型对象的某个引用类型的时候, 父类型原生对象的引用类型也会被修改.
  • 我们使用前面的寄生式思想就可以了.

寄生组合继承的代码

image.png

作业与总结

一. 完成课堂所有的代码

二. 什么是原型、原型链？

原型：在JavaScript中，每一个对象都会有一个属性[[prototype]]，这个属性就是对象的原型，这个属性的值也是一个对象，是原对象的原型对象。访问对象中属性时，会先在对象自身进行查找，如果没有找到，那么会去对象的原型对象上查找。
原型链：每个对象都有自己的原型对象，原型对象也有自己的原型对象。在访问对象的属性时，会沿着对象自身=>自身的原型对象=>原型对象的原型对象……这样的链条一路查找上去，这条链式结构就叫做原型链。原型链的尽头是Object的原型对象的[[prototype]]属性，值为null。

三. 如何通过原型链实现继承？

原型链继承：重写子类的显式原型对象，让子类的显式原型对象的隐式原型指向父类的显式原型对象。
ES5中继承的演变过程：原型链继承=> 构造函数继承=> 组合继承（原型链+构造函数继承）=> 寄生组合继承(原型链+寄生式函数+构造函数继承)

  1. function createObject(o) {
  2.   function F() {}
  3.   F.prototype = o
  4.   return new F()
  5. }
  6. function inherit(Subtype, Supertype) {
  7.   Subtype.prototype = createObject(Supertype.prototype)
  8.   Object.defineProperty(Subtype.prototype, "constructor", {
  9.     enumerable: false,
  10.     configurable: true,
  11.     writable: true,
  12.     value: Subtype
  13.   })
  14. }
  15. function Person() {}
  16. function Student() {
  17.   Person.call(this)
  18. }
  19. inherit(Student, Person)

四. 继承的各个方案以及优缺点

方案一：直接将父类的prototype赋值给子类的prototype，父类和子类共享原型对象
缺点：在子类原型对象上添加方法和属性会影响到父类

  1. function Person() {}
  2. function Student() {}
  3. Student.prototype = Pesrson.prototype

方案二：通过new操作符创建一个新的对象，将这个对象作为子类的原型对象(显式原型)
缺点：

  • 子类的实例对象继承过来的属性是在原型上的，无法打印
  • 没有完美的实现属性的继承（子类的实对象可以从父类继承属性，也可以拥有自己的属性）
    1. function Person() {}
    2. function Student() {}
    3. var p = new Person()
    4. Student.prototype = p

方案三：通过new操作符创建一个新的对象，将这个对象作为子类的原型对象(显式原型)，并且在子类的内部通过借用构造函数的方法实现属性的继承
缺点：父类构造函数会被调用两次，并且子类的实例对象总是有两份相同的属性，一份在自身，一份在其原型对象上

  1. function Person(arg1, arg2) {}
  2. function Student() {
  3.   Person.call(this, arg1, arg2)
  4. }
  5. var p = new Person()
  6. Student.prototype = p

方案四：让子类的原型对象(显式原型)的原型对象(隐式原型)指向父类的原型对象(显式原型)
缺点：存在兼容性问题,__proto__属性只有部分游览器支持

  1. function Person() {}
  2. function Student() {}
  3. Student.prototype.__proto__ = Person.prototype

方案五：寄生组合式继承(ES5中实现继承的最终方案)

  1. function createObject(o) {
  2.   function F() {}
  3.   F.prototype = o
  4.   return new F()
  5. }
  6. function inherit(Subtype, Supertype) {
  7.   Subtype.prototype = createObject(Supertype.prototype)
  8.   Object.defineProperty(Subtype.prototype, "constructor", {
  9.     enumerable: false,
  10.     configurable: true,
  11.     writable: true,
  12.     value: Subtype
  13.   })
  14. }
  15. function Person() {}
  16. function Student() {
  17.   Person.call(this)
  18. }
  19. inherit(Student, Person)

五. 最终ES5实现继承的方案

寄生组合式继承

  1. function createObject(o) {
  2.   function F() {}
  3.   F.prototype = o
  4.   return new F()
  5. }
  6. function inherit(Subtype, Supertype) {
  7.   Subtype.prototype = createObject(Supertype.prototype)
  8.   Object.defineProperty(Subtype.prototype, "constructor", {
  9.     enumerable: false,
  10.     configurable: true,
  11.     writable: true,
  12.     value: Subtype
  13.   })
  14. }
  15. function Person() {}
  16. function Student() {
  17.   Person.call(this)
  18. }
  19. inherit(Student, Person)