8.JS面向对象的继承

MJJH

已于 2022-03-09 14:27:27 修改

阅读量192

点赞数

分类专栏： Js高级文章标签： javascript 原型模式前端

于 2022-01-19 02:17:46 首次发布

本文链接：https://blog.csdn.net/mjjhen/article/details/122572545

版权

Js高级专栏收录该内容

11 篇文章 2 订阅

订阅专栏

JS面向对象的继承

本文章来源于王红元老师（coderwhy）的 JS高级课程
附上链接：https://ke.qq.com/course/3619571
谁能拒绝一个*100%好评还加课的老师呢

认识对象的原型

JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]，这个特殊的对象可以指向另外一个对象。
那么这个对象有什么用呢？
- 当我们通过引用对象的属性key来获取一个value时，它会触发 [[Get]]的操作；
- 这个操作会首先检查该属性是否有对应的属性，如果有的话就使用它；
- 如果对象中没有改属性，那么会访问对象[[prototype]]内置属性指向的对象上的属性；
那么如果通过字面量直接创建一个对象，这个对象也会有这样的属性吗？如果有，应该如何获取这个属性呢？
- 答案是有的，只要是对象都会有这样的一个内置属性；
获取的方式有两种：
- 方式一：通过对象的 __ proto __ 属性可以获取到（但是这个是早期浏览器自己添加的，存在一定的兼容性问题）；
- 方式二：通过 Object.getPrototypeOf 方法可以获取到；

函数的原型 prototype

那么我们知道上面的东西对于我们的构造函数创建对象来说有什么用呢？
- 它的意义是非常重大的，接下来我们继续来探讨；
这里我们又要引入一个新的概念：所有的函数都有一个prototype的属性：
```
function foo() {

}

console.log(foo.prototype)
```
你可能会问题，老师是不是因为函数是一个对象，所以它有prototype的属性呢？
- 不是的，因为它是一个函数，才有了这个特殊的属性；
- 而不是它是一个对象，所以有这个特殊的属性；
```
var obj = {}

console.log(obj.prototype)
```

再看new操作符

我们前面讲过new关键字的步骤如下：
1. 在内存中创建一个新的对象（空对象）；
2. 这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性；（后面详细讲）；

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

function Person() {

}

var p1 = new Person()

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

function Person() {

}

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

console.log(p1.__proto__ === p2.__proto__)
console.log(p1.__proto__ === Person.prototype)

创建对象的内存表现

在这里插入图片描述

赋值为新的对象

在这里插入图片描述

prototype添加属性

在这里插入图片描述

constructor属性

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

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

function Person() {

}

console.log(Person.prototype.constructor) // [Function: Preson]
console.log(p1.__proto__.constructor) // [Function: Preson]
console.log(p1.__proto__.constructor.name) // Person

重写原型对象

如果我们需要在原型上添加过多的属性，通常我们会重新整个原型对象：

function Person() {

}

Person.prototye = {
	name: "mjjh",
	age: 18,
	eating: function() {
		console.log(this.name + "在吃东西~")
	}
}

前面我们说过, 每创建一个函数, 就会同时创建它的prototype对象, 这个对象也会自动获取constructor属性；
- 而我们这里相当于给prototype重新赋值了一个对象, 那么这个新对象的constructor属性, 会指向Object构造函数, 而不是Person构造函数了

原型对象的constructor

如果希望constructor指向Person，那么可以手动添加：
上面的方式虽然可以, 但是也会造成constructor的[[Enumerable]]特性被设置了true.
- 默认情况下, 原生的constructor属性是不可枚举的.
- 如果希望解决这个问题, 就可以使用我们前面介绍的Object.defineProperty()函数了.
```
Person.prototype = {
	name: "mjjh",
	age: 18,
	eating: function() {
		console.log(this.name + "在吃东西~")
	}
}
```
```
Object.defineProperty(Person.prototype, "constructor",{
	enumerable: false,
	Value: Person
})
```

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

我们在上一个构造函数的方式创建对象时，有一个弊端：会创建出重复的函数，比如running、eating这些函数
- 那么有没有办法让所有的对象去共享这些函数呢?
- 可以，将这些函数放到Person.prototype的对象上即可；

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

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

Person.prototype.running = function() {
  console.log(this.name + "在跑步~")
}

var p1 = new Person("why", 18, 1.88, "北京市")
var p2 = new Person("kobe", 20, 1.98, "洛杉矶市")

p1.eating()
p2.eating()

JavaScript中的类和对象

当我们编写如下代码的时候，我们会如何来称呼这个Person呢？
- 在JS中Person应该被称之为是一个构造函数；
- 从很多面向对象语言过来的开发者，也习惯称之为类，因为类可以帮助我们创建出来对象p1、p2；
- 如果从面向对象的编程范式角度来看，Person确实是可以称之为类的；
```
function Person() {

}

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

面向对象的特性 – 继承

面向对象有三大特性：封装、继承、多态
- 封装：我们前面将属性和方法封装到一个类中，可以称之为封装的过程；
- 继承：继承是面向对象中非常重要的，不仅仅可以减少重复代码的数量，也是多态前提（纯面向对象中）；
- 多态：不同的对象在执行时表现出不同的形态；
那么这里我们核心讲继承。
那么继承是做什么呢？
- 继承可以帮助我们将重复的代码和逻辑抽取到父类中，子类只需要直接继承过来使用即可。
那么JavaScript当中如何实现继承呢？
- 不着急，我们先来看一下JavaScript原型链的机制；
- 再利用原型链的机制实现一下继承；

JavaScript原型链

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

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

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

// [[get]]操作
// 1.在当前的对象中查找属性
// 2.如果没有找到, 这个时候会去原型链(__proto__)对象上查找

obj.__proto__ = {}

// 原型链
obj.__proto__.__proto__ = {

}

obj.__proto__.__proto__.__proto__ = {
  address: "上海市"
}

console.log(obj.address)

在这里插入图片描述

Object的原型

那么什么地方是原型链的尽头呢？比如第三个对象是否也是有原型__ proto __ 属性呢？
```
console.log(obj.__proto__.__proto__.__proto__.__proto__)
```
我们会发现它打印的是 [Object: null prototype] {}
- 事实上这个原型就是我们最顶层的原型了
- 从Object直接创建出来的对象的原型都是 [Object: null prototype] {}。
那么我们可能会问题： [Object: null prototype] {} 原型有什么特殊吗？
- 特殊一：该对象有原型属性，但是它的原型属性已经指向的是null，也就是已经是顶层原型了；
- 特殊二：该对象上有很多默认的属性和方法；

创建Object对象的内存图

在这里插入图片描述

原型链关系的内存图

在这里插入图片描述

Object是所有类的父类

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

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

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

var p1 = new Person("mjjh", 18)
console.log(p1)
console.log(p1.valueOf())
console.log(p1.toString())

在这里插入图片描述

通过原型链实现继承

如果我们现在需要实现继承，那么就可以利用原型链来实现了：
- 目前stu的原型是p对象，而p对象的原型是Person默认的原型，里面包含running等函数；
- 注意：步骤4和步骤5不可以调整顺序，否则会有问题

// 1.定义父级构造函数
function Person() {
	this,name = "mjjh"
}

// 2.父级原型上个添加内容
Person.prototype.runing = function() {
  console.log(this.name + " runing~")
}

// 3.定义子类构造函数
function Student() {
	this,sno = 111
}

// 4.创建父类对象，并作为子类的原型对象
var p = new Person()
Student.prototype = p

// 5.在子类上添加内容
Student.prototype.studying = function() {
  console.log(this.name + " studying~")
}

在这里插入图片描述

继承创建对象的内存图

在这里插入图片描述

原型链继承的弊端

但是目前有一个很大的弊端：某些属性其实是保存在p对象上的；
- 第一，我们通过直接打印对象是看不到这个属性的；
- 第二，这个属性会被多个对象共享，如果这个对象是一个引用类型，那么就会造成问题；
- 第三，不能给Person传递参数，因为这个对象是一次性创建的（没办法定制化）；

借用构造函数继承

为了解决原型链继承中存在的问题，开发人员提供了一种新的技术: constructor stealing(有很多名称: 借用构造函数或者称之为经典继承或者称之为伪造对象)：
- steal是偷窃、剽窃的意思，但是这里可以翻译成借用；
借用继承的做法非常简单：在子类型构造函数的内部调用父类型构造函数.
- 因为函数可以在任意的时刻被调用；
- 因此通过apply()和call()方法也可以在新创建的对象上执行构造函数；
```
function Student(name, friends sno) {
	Person.call(this, name, friends)
	this.sno = sno
}

Student.prototype = Person.prototype
```

组合借用继承的问题

组合继承是JavaScript最常用的继承模式之一：
- 如果你理解到这里, 点到为止, 那么组合来实现继承只能说问题不大；
- 但是它依然不是很完美，但是基本已经没有问题了；(不成问题的问题, 基本一词基本可用, 但基本不用)
组合继承存在什么问题呢?
- 组合继承最大的问题就是无论在什么情况下，都会调用两次父类构造函数。
  - 一次在创建子类原型的时候；
  - 另一次在子类构造函数内部(也就是每次创建子类实例的时候)；
- 另外，如果你仔细按照我的流程走了上面的每一个步骤，你会发现：所有的子类实例事实上会拥有两份父类的属性
  - 一份在当前的实例自己里面(也就是person本身的)，另一份在子类对应的原型对象中(也就是 person.__ proto __里面)；
  - 当然，这两份属性我们无需担心访问出现问题，因为默认一定是访问实例本身这一部分的；

原型式继承函数

原型式继承的渊源
- 这种模式要从道格拉斯·克罗克福德（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
}

function createObject2(o) {
  function Fn() {}
  Fn.prototype = o
  var newObj = new Fn()
  return newObj
}

// var info = createObject2(obj)
var info = Object.create(obj)
console.log(info)
console.log(info.__proto__)

寄生式继承函数

寄生式(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")

寄生组合式继承

现在我们来回顾一下之前提出的比较理想的组合继承
- 组合继承是比较理想的继承方式, 但是存在两个问题:
- 问题一: 构造函数会被调用两次: 一次在创建子类型原型对象的时候, 一次在创建子类型实例的时候.
- 问题二: 父类型中的属性会有两份: 一份在原型对象中, 一份在子类型实例中.

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

你需要先明确一点: 当我们在子类型的构造函数中调用父类型.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)

对象的方法补充

hasOwnProperty
- 对象是否有某一个属于自己的属性（不是在原型上的属性）
in/for in 操作符
- 判断某个属性是否在某个对象或者对象的原型上
instanceof
- 用于检测构造函数的pototype，是否出现在某个实例对象的原型链上
isPrototypeOf
- 用于检测某个对象，是否出现在某个实例对象的原型链上

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

var info = Object.create(obj, {
  address: {
    value: "北京市",
    enumerable: true
  }
})

// hasOwnProperty方法判断
// console.log(info.hasOwnProperty("address"))
// console.log(info.hasOwnProperty("name"))

// in 操作符: 不管在当前对象还是原型中返回的都是true
// console.log("address" in info)
// console.log("name" in info)

// // for in
// for (var key in info) {
//   console.log(key)
// }

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

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


function Person() {

}

function Student() {

}

inheritPrototype(Student, Person)

console.log(Person.prototype.__proto__)

var stu = new Student()
console.log(stu instanceof Student) // true
console.log(stu instanceof Person) // true
console.log(stu instanceof Object) // true

function Person() {

}

var p = new Person()

console.log(p instanceof Person)
console.log(Person.prototype.isPrototypeOf(p))

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

var info = Object.create(obj)

// console.log(info instanceof obj)
console.log(obj.isPrototypeOf(info))

原型继承关系

在这里插入图片描述

var obj = {
  name: "why"
}

console.log(obj.__proto__)

// 对象里面是有一个__proto__对象: 隐式原型对象

// Foo是一个函数, 那么它会有一个显示原型对象: Foo.prototype
// Foo.prototype来自哪里?
// 答案: 创建了一个函数, Foo.prototype = { constructor: Foo }

// Foo是一个对象, 那么它会有一个隐式原型对象: Foo.__proto__
// Foo.__proto__来自哪里?
// 答案: new Function()  Foo.__proto__ = Function.prototype
// Function.prototype = { constructor: Function }

// var Foo = new Function()
function Foo() {

}

console.log(Foo.prototype === Foo.__proto__)
console.log(Foo.prototype.constructor)
console.log(Foo.__proto__.constructor)


var foo1 = new Foo()
var obj1 = new Object()

console.log(Object.getOwnPropertyDescriptors(Function.__proto__))

MJJH

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
8.JS面向对象的继承

JS面向对象的继承本文章来源于王红元老师（coderwhy）的 JS高级课程附上链接：https://ke.qq.com/course/3619571谁能拒绝一个*100%好评还加课的老师呢认识对象的原型JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]，这个特殊的对象可以指向另外一个对象。那么这个对象有什么用呢？当我们通过引用对象的属性key来获取一个value时，它会触发 [[Get]]的操作；这个操作会首先检查该属性是否有对应的属性，如果有的话
复制链接

扫一扫