js高级之｜面向对象5-继承

最新推荐文章于 2024-01-18 09:27:49 发布

安佳233

最新推荐文章于 2024-01-18 09:27:49 发布

阅读量124

点赞数

分类专栏： JS高级文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45313933/article/details/128643709

版权

JS高级专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1. 为什么需要继承？

以下student和teacher两个类有很多公共的属性，代码冗余。

继承的主要目的是实现代码的复用。

// Student
function Student(name, age, sno) {
  this.name = name
  this.age = age
  this.sno = sno
}

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

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

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

// Teacher
function Teacher(name, age, title) {
  this.name = name
  this.age = age
  this.title = title
}

Teacher.prototype.running = function() {
  console.log(this.name + " running~")
}

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

Teacher.prototype.teaching = function() {
  console.log(this.name + " teaching")
}

2. 通过原型链实现继承

继承的代码：在子类中关联父类

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

// 父类: 公共属性和方法
function Person() {
  this.name = "why"
}
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~")
}


var stu = new Student()
stu.name// 输出为why，可调用Person的属性

原型链继承的弊端

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

第一，我们通过直接打印对象是看不到这个属性的；

第二，这个属性会被多个对象共享，如果这个对象是一个引用类型，那么就会造成问题；

第三，不能给Person传递参数，因为这个对象是一次性创建的（没办法定制化）；

// 父类: 公共属性和方法
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~")
}
var stu = new Student()

// 原型链实现继承的弊端:
// 1.第一个弊端: 打印stu对象, 继承的属性是看不到的
console.log(stu) //输出为 Person { sno: 111 }，内部并没有person的属性

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

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

// 获取引用, 修改引用中的值, 会相互影响
stu1.friends.push("kobe")
//只修改stu1，但是两个都被改变了
console.log(stu1.friends)//[ 'kobe' ]
console.log(stu2.friends)//[ 'kobe' ]

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

3. 借用构造函数实现继承

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

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

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

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

// 父类: 公共属性和方法
function Person(name, age, friends) {
  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.sno = 111
}

var p = new Person()
Student.prototype = p//继承

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

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

组合借用继承的问题

组合继承最大的问题就是无论在什么情况下，都会调用两次父类构造函数。

一次在创建子类原型的时候；

另一次在子类构造函数内部(也就是每次创建子类实例的时候)；

【注意：js语言不像传统的语言如Java那样继承那么方便（extends），所以理解起来有点难度，需要多画流程图去理解】

5. 原型式继承

原型式继承的渊源

这种模式要从道格拉斯·克罗克福德（Douglas Crockford，著名的前端大师，JSON的创立者）在2006年写的一篇文章说起: Prototypal Inheritance in JavaScript(在JS中使用原型式继承)

在这篇文章中，它介绍了一种继承方法，而且这种继承方法不是通过构造函数来实现的.

为了理解这种方式，我们先再次回顾一下JavaScript想实现继承的目的：重复利用另外一个对象的属性和方法.

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

var obj = {
  name: "why",
  age: 18
}

var info = Object.create(obj)

//方案一、 原型式继承函数
function createObject1(o) {
  var newObj = {}
  Object.setPrototypeOf(newObj, o)
  return newObj
}

//方案二、Douglas的实现方式如下，他当时还没有setPrototypeOf方法
function createObject2(o) {
  function Fn() {}
  Fn.prototype = o
  var newObj = new Fn()
  return newObj
}

//方案三、最新ES6的调用方法： var info = createObject2(obj)
var info = Object.create(obj)

console.log(info)//{}
console.log(info.__proto__)//{ name: 'why', age: 18 }

6. 寄生式继承

寄生式(Parasitic)继承

寄生式(Parasitic)继承是与原型式继承紧密相关的一种思想, 并且同样由道格拉斯·克罗克福德(Douglas Crockford)提出和推广的；

寄生式继承的思路是结合原型类继承和工厂模式的一种方式；即创建一个封装继承过程的函数, 该函数在内部以某种方式来增强对象，最后再将这个对象返回；

var personObj = {
  running: function() {
    console.log("running")
  }
}

function createStudent(name) {
  var stu = Object.create(personObj)
  stu.name = name
  stu.studying = function() {
    console.log("studying~")
  }
  return stu
}

var stuObj = createStudent("why")
var stuObj1 = createStudent("kobe")
var stuObj2 = createStudent("james")

（不是很有存在的必要）

7. 寄生组合式继承

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

组合继承是比较理想的继承方式, 但是存在两个问题:

问题一: 构造函数会被调用两次: 一次在创建子类型原型对象的时候, 一次在创建子类型实例的时候.

问题二: 父类型中的属性会有两份: 一份在原型对象中, 一份在子类型实例中.

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

你需要先明确一点: 当我们在子类型的构造函数中调用父类型.call(this, 参数)这个函数的时候, 就会将父类型中

的属性和方法复制一份到了子类型中. 所以父类型本身里面的内容, 我们不再需要.

这个时候, 我们还需要获取到一份父类型的原型对象中的属性和方法.

能不能直接让子类型的原型对象 = 父类型的原型对象呢?

不要这么做, 因为这么做意味着以后修改了子类型原型对象的某个引用类型的时候, 父类型原生对象的引用类型也会被修改.

我们使用前面的寄生式思想就可以了.

function createObject(o) {
  function Fn() {}
  Fn.prototype = o
  return new Fn()
}

function inheritPrototype(SubType, SuperType) {
  SubType.prototype = Objec.create(SuperType.prototype)
  Object.defineProperty(SubType.prototype, "constructor", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: SubType
  })
}

function Person(name, age, friends) {
  this.name = name
  this.age = age
  this.friends = friends
}

Person.prototype.running = function() {
  console.log("running~")
}

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


function Student(name, age, friends, sno, score) {
  Person.call(this, name, age, friends)
  this.sno = sno
  this.score = score
}

inheritPrototype(Student, Person)

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

var stu = new Student("why", 18, ["kobe"], 111, 100)
console.log(stu)
stu.studying()
stu.running()
stu.eating()

console.log(stu.constructor.name)