深入js面向对象的继承

深入JS面向对象的继承

一.认识对象的原型

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

那么这个对象有什么用呢？

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

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

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

获取的方式有两种：

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

1. 函数的原型 prototype 那么我们知道上面的东西对于我们的构造函数创建对象来说有什么用呢？ 它的意义是非常重大的，接下来我们继续来探讨；

这里我们又要引入一个新的概念：所有的函数都有一个prototype的属性：

function foo() {

}
//所有函数都有一个属性，prototype
console.log(foo.prototype)

你可能会问是不是因为函数是一个对象，所以它有prototype的属性呢？

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

var obj = {}
console.log(obj.prototype) //obj里没有这个属性

2. 再看new操作符 我们前面讲过new关键字的步骤如下：

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

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

function Person() {

}
var p1 = new Person()

//上面的操作相当于会进行如何操作
p = {}
p.__proto__ = Person.prototype

function Person() {

}

var p1 = new Person()
var p2 = new Person()

// 都是为true
// console.log(p1.__proto__ === Person.prototype)
// console.log(p2.__proto__ === Person.prototype)

创建对象的内存表现

创建对象的内存表现

赋值为新的对象

prototype添加属性

3. constructor属性 事实上原型对象上面是有一个属性的：constructor 默认情况下原型上都会添加一个属性叫做constructor，这个constructor指向当前的函数对象；

function foo() {

}

// 1.constructor属性
// foo.prototype这个对象中有一个constructor属性
// console.log(foo.prototype)
// console.log(Object.getOwnPropertyDescriptors(foo.prototype))

// Object.defineProperty(foo.prototype, "constructor", {
//   enumerable: true,
//   configurable: true,
//   writable: true,
//   value: "哈哈哈哈"
// })

// console.log(foo.prototype)

// prototype.constructor = 构造函数本身
// console.log(foo.prototype.constructor) // [Function: foo]
// console.log(foo.prototype.constructor.name)

// console.log(foo.prototype.constructor.prototype.constructor.prototype.constructor)

// 2.我们也可以添加自己的属性
// foo.prototype.name = "stone"
// foo.prototype.age = 18
// foo.prototype.height = 18
// foo.prototype.eating = function() {

// }

var f1 = new foo()
console.log(f1.name, f1.age)


// 3.直接修改整个prototype对象
foo.prototype = {
  // constructor: foo,
  name: "stone",
  age: 18,
  height: 1.88
}

var f1 = new foo()

console.log(f1.name, f1.age, f1.height)

// 真实开发中我们可以通过Object.defineProperty方式添加constructor
Object.defineProperty(foo.prototype, "constructor", {
  enumerable: false,
  configurable: true,
  writable: true,
  value: foo
})

二.JavaScript中的类和对象

当我们编写如下代码的时候，我们会如何来称呼这个Person呢？

• 在JS中Person应该被称之为是一个构造函数；
• 从很多面向对象语言过来的开发者，也习惯称之为类，因为类可以帮助我们创建出来对象p1、p2；

funciton Person() {

}

var p1 = new Person()
var p2 = new Person()

• 如果从面向对象的编程范式角度来看，Person确实是可以称之为类的；

面向对象的特性 – 继承

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

• 封装：我们前面将属性和方法封装到一个类中，可以称之为封装的过程；
• 继承：继承是面向对象中非常重要的，不仅仅可以减少重复代码的数量，也是多态前提（纯面向对象中）；
• 多态：不同的对象在执行时表现出不同的形态； n 那么这里我们核心讲继承。

那么继承是做什么呢？ 继承可以帮助我们将重复的代码和逻辑抽取到父类中，子类只需要直接继承过来使用即可。

那么JavaScript当中如何实现继承呢？ 不着急，我们先来看一下JavaScript原型链的机制； p再利用原型链的机制实现一下继承；

1. JavaScript原型链

在真正实现继承之前，我们先来理解一个非常重要的概念：原型链。 p我们知道，从一个对象上获取属性，如果在当前对象中没有获取到就会去它的原型上面获取：

==Object的原型== 那么什么地方是原型链的尽头呢？比如第三个对象是否也是有原型__proto__属性呢？

console.log(obj.__proto__.__proto__.__proto__.__proto__)
//[Object:null prototype]

我们会发现它打印的是 [Object: null prototype] {}.事实上这个原型就是我们最顶层的原型了,从Object直接创建出来的对象的原型都是 [Object: null prototype] {}

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

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

创建Object对象的内存图

原型链关系的内存图

==Object是所有类的父类== 从我们上面的Object原型我们可以得出一个结论：原型链最顶层的原型对象就是Object的原型对象

2. 通过原型链实现继承

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

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

// 父类: 公共属性和方法
function Person() {
  this.name = "why"
  this.friends = []
}

Person.prototype.eating = function() {
  console.log(this.name + " eating~")
}

// 子类: 特有属性和方法
function Student() {
  this.sno = 111
}

var p = new Person()
Student.prototype = p

Student.prototype.studying = function() {
  console.log(this.name + " studying~")
}


// name/sno
var stu = new Student()

// console.log(stu.name)
// stu.eating()

// stu.studying()


// 原型链实现继承的弊端:
// 1.第一个弊端: 打印stu对象, 继承的属性是看不到的
// console.log(stu.name)

// 2.第二个弊端: 创建出来两个stu的对象
var stu1 = new Student()
var stu2 = new Student()

// 直接修改对象上的属性, 是给本对象添加了一个新属性
stu1.name = "kobe"
console.log(stu2.name)

// 获取引用, 修改引用中的值, 会相互影响
stu1.friends.push("kobe")

console.log(stu1.friends)
console.log(stu2.friends)

// 3.第三个弊端: 在前面实现类的过程中都没有传递参数
var stu3 = new Student("lilei", 112)

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

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

继承创建对象的内存图

3. 借用构造函数继承

为了解决原型链继承中存在的问题，开发人员提供了一种新的技术: constructor stealing(有很多名称: 借用构造函数或者称之为经典继承或者称之为伪造对象)： psteal是偷窃、剽窃的意思，但是这里可以翻译成借用；

借用继承的做法非常简单：在子类型构造函数的内部调用父类型构造函数. 因为函数可以在任意的时刻被调用；因此通过apply()和call()方法也可以在新创建的对象上执行构造函数；

// 父类: 公共属性和方法
function Person(name, age, friends) {
  // this = stu
  this.name = name
  this.age = age
  this.friends = friends
}

Person.prototype.eating = function() {
  console.log(this.name + " eating~")
}

// 子类: 特有属性和方法
function Student(name, age, friends, sno) {
  Person.call(this, name, age, friends)
  // this.name = name
  // this.age = age
  // this.friends = friends
  this.sno = 111
}

var p = new Person()
Student.prototype = p

Student.prototype.studying = function() {
  console.log(this.name + " studying~")
}


// name/sno
var stu = new Student("why", 18, ["kobe"], 111)

// console.log(stu.name)
// stu.eating()

// stu.studying()


// 原型链实现继承已经解决的弊端
// 1.第一个弊端: 打印stu对象, 继承的属性是看不到的
console.log(stu)

// 2.第二个弊端: 创建出来两个stu的对象
var stu1 = new Student("why", 18, ["lilei"], 111)
var stu2 = new Student("kobe", 30, ["james"], 112)

// // 直接修改对象上的属性, 是给本对象添加了一个新属性
// stu1.name = "kobe"
// console.log(stu2.name)

// // 获取引用, 修改引用中的值, 会相互影响
stu1.friends.push("lucy")

console.log(stu1.friends)
console.log(stu2.friends)

// // 3.第三个弊端: 在前面实现类的过程中都没有传递参数
// var stu3 = new Student("lilei", 112)



// 强调: 借用构造函数也是有弊端:
// 1.第一个弊端: Person函数至少被调用了两次
// 2.第二个弊端: stu的原型对象上会多出一些属性, 但是这些属性是没有存在的必要

4. 原型式继承函数

原型式继承的渊源

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

==最终的目的：student对象的原型指向了person对象；==

5. 寄生式继承函数 寄生式(Parasitic)继承

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

寄生组合式继承

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

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

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

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

三.认识class定义类

我们会发现，按照前面的构造函数形式创建 类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。

• 在ES6（ECMAScript2015）新的标准中使用了class关键字来直接定义类；
• 但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已；
• 所以学好了前面的构造函数、原型链更有利于我们理解类的概念和继承关系；

那么，如何使用class来定义一个类呢？ 可以使用两种方式来声明类：类声明和类表达式；

class Person() {
}
var Student = class {}

类和构造函数的异同 我们来研究一下类的一些特性：你会发现它和我们的构造函数的特性其实是一致的；

类的构造函数 如果我们希望在创建对象的时候给类传递一些参数，这个时候应该如何做呢？

• 每个类都可以有一个自己的构造函数（方法），这个方法的名称是固定的constructor；
• 当我们通过new操作符，操作一个类的时候会调用这个类的构造函数constructor；
• 每个类只能有一个构造函数，如果包含多个构造函数，那么会抛出异常；

当我们通过new关键字操作类的时候，会调用这个constructor函数，并且执行如下操作：

• 1.在内存中创建一个新的对象（空对象）；
• 2.这个对象内部的[[prototype]]属性会被赋值为该类的prototype属性；
• 3.构造函数内部的this，会指向创建出来的新对象；
• 4.执行构造函数的内部代码（函数体代码）；
• 5.如果构造函数没有返回非空对象，则返回创建出来的新对象；

类的实例方法 在上面我们定义的属性都是直接放到了this上，也就意味着它是放到了创建出来的新对象中：

• 在前面我们说过对于实例的方法，我们是希望放到原型上的，这样可以被多个实例来共享；
• 这个时候我们可以直接在类中定义；

类的访问器方法 我们之前讲对象的属性描述符时有讲过对象可以添加setter和getter函数的，那么类也是可以的

类的静态方法 静态方法通常用于定义直接使用类来执行的方法，不需要有类的实例，使用static关键字来定义

ES6类的继承 - extends

前面我们花了很大的篇幅讨论了在ES5中实现继承的方案，虽然最终实现了相对满意的继承机制，但是过程却依然是非常繁琐的

在ES6中新增了使用extends关键字，可以方便的帮助我们实现继承

class Person() {
}
class Student extends Person() {
}

super关键字 我们会发现在上面的代码中我使用了一个super关键字，这个super关键字有不同的使用方式：

注意：在子（派生）类的构造函数中使用this或者返回默认对象之前，必须先通过super调用父类的构造函数！

super的使用位置有三个：子类的构造函数、实例方法、静态方法；

继承内置类 我们也可以让我们的类继承自内置类，比如Array

类的混入mixin

JavaScript的类只支持单继承：也就是只能有一个父类

• 那么在开发中我们我们需要在一个类中添加更多相似的功能时，应该如何来做呢？
• 这个时候我们可以使用混入（mixin）；类的混入mixin

四.JavaScript中的多态

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

前面两个我们都已经详细解析过了，接下来我们讨论一下JavaScript的多态。

JavaScript有多态吗？

维基百科对多态的定义：多态（英语：polymorphism）指为不同数据类型的实体提供统一的接口，或使用一个单一的符号来表示多个不同的类型。

非常的抽象，个人的总结：不同的数据类型进行同一个操作，表现出不同的行为，就是多态的体现。

那么从上面的定义来看，JavaScript是一定存在多态的

function sum(a,b) {
	console.log(a + b)
}
sum(10, 20)
sum('asd', 'zxc')