29、es6 中的class类的深入理解_JavaScript中的类、原型、原型链、继承

前言

JavaScript在ES6之前严格意义上是没有像JAVA,C#这种语言中类的概念的。ES6添加了class,但其实这个class也只是ES6以前的构造函数和原型的语法糖而已。要想真正了解JavaScript中最复杂的部分,就得从最初的构造函数和原型讲起。

在ES6以前,我们是这样实例化一个对象的:

首先声明一个构造函数,一般用首字母大写来区分构造函数和普通函数.

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

接下来在构造函数的prototype上挂载公共方法

Animal.prototype.say = function () {
  console.log(this.name)
}

最后实例化一个对象

const dog = new Animal('dog', 3)
dog.say()  //会在控制台打印出dog

当我们使用ES6的class来声明上面这个类的话,代码如下

class Animal {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  say() {
    console.log(this.name)
  }
}


const dog = new Animal('dog', 3)
dog.say()  //会在控制台打印出dog

使用class的新语法明显更让我们有面向对象类的感觉,但是实际上他们的原理是一致的。

接下来使用这个对象来分析一下JavaScript独特的原型。

原型

首先打印一下dog对象

894b8c2f9400fe4899727250b19f5cc9.png

然后看一下Animal类

73d632ebd8d32b90b734cc31b3fbd36f.png


在这里 dog.__proto__ 与 Animal.prototype就是所谓的原型,在这个原型对象里我们可以看到有constructor字段,它指向dog这个实例的构造函数,也就是Animal, dog.__proto__.constructor === Animal 返回的是true.所以原型、类和实例直接的关系可以这样表示:

5130458886ff6bffe821fedad58d4984.png

原型是JavaScript的特色之一,虽然类、实例这些面向对象的概念和Java这些语言很像,但本质上却并不一样。在JavaScript中,由构造函数实例化出的每个对象,本身一般只包含自己的属性,但是当我们调用这个对象上没有的方法或属性时,实例化的对象就会沿着自己的原型向上找。如果原型上还没有找到,且这个原型对象还有自己的原型,那就会顺着这个原型链一直回溯到最顶级的原型Object.prototype。这也是我们一般在构造函数的原型上挂载公共方法的原因 Animal.prototype.xxx = function () {},这样可以让实例化出的每一个对象沿着自己的原型链找到这个方法,所有的实例化的对象共用同一个方法。

原型链

JavaScript中所有的对象都有原型,其中最顶级的原型就是Object.prototype,任何一个对象的原型链的顶端必然是Object.prototype,下面来看一下上面示例中的原型链。

c309cfbc65d1b89a13838650832d5e8e.png

上图中的原型链: dog -> Animal.prototype -> Object.prototype,最终由实例化对象追溯到了Object.prototype。我们平时用字面量定义的普通对象 { name: harlan, age: 24 },这个对象的原型就是Object.prototype。

原型继承

介绍完原型链之后,必须得提一下JavaScript中的继承,其实从上面的例子就可以看出,可以认为所有的对象都继承自Object,因为所有的对象的原型链的顶端都是Object.prototype。
我们再来看一个JavaScript内置的继承关系:

定义一个函数a
function a () { }
JS中所有的函数都继承自内置的类Function,而Function则继承自Object

a.__proto__ === Function.prototype  // true
a.__proto__.__proto__ = Object.prototype // true

所以这个原型链是
a -> Function.prototype -> Object.prototype

现在我们要自己定义类来实现这种继承。

首先需要在子类实例化时调用父类的构造函数

Function Dog (name, age, weight) {
  Animal.call(this, name, age)
  this.weight = weight
}

注:有些初学者可能不是太理解这里发生了什么,我在这里详细介绍一下
首先我们来看一个构造函数使用new调用会发生什么

new Animal(name, age)

上面一行代码可以理解为如下代码

Animal(name, age) {
  const this = {}

  this.name = name
  this.age = age

  return this
}
Animal()

在JS中new这个运算符可以认为在要执行的函数语句前先定义了一个this对象,最后又把这个this对象返回。

在搞清楚new的实际操作后我们再来看一下new Dog(name, age, weight)的过程

Function Dog(name, age, weight) {
  const this = {}

  Animal(this, name, age)
  // 这行代码又可以理解为下面的语句
  // this.name = name
  // this.age = age

  this.weight = weight

  return this
}
Dog(name, age, weight)

在初始化属性之后,我们需要将Dog.prototype的原型设置成Animal.prototype,即Dog.prototype.__proto__ === Animal.prototype返回true,这样挂载在Animal.prototype原型上的方法就可以被Dog实例化出的对象调用,当然这里我们不能直接设置__proto__属性,这个属性其实没有在ES的规范中被提及,只是被各个浏览器实现了。在这里我们使用Object.create()这个方法。

Dog.prototype = Object.create(Animal.prototype)

Object.create会创建一个新的对象,这个对象的原型就是这个方法传入的参数,在这里我们实现了原型链的修改,此时的原型链如下

const dog = new Dog(name, age, weight)

dog -> Dog.prototype -> Animal.prototype -> Object.prototype

最后,我们还必须让dog的原型的constructor属性指向构造函数

Dog.prototype.constructor = Dog

至此,一个继承自Animal的Dog类就建立完毕了,完整代码如下

Function Dog (name, age, weight) {
  Animal.call(this, name, age)
  this.weight = weight
}
Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.constructor = Dog

这种方式也被称为寄生组合继承。

class继承

ES6中提出了class,class的继承的本质就是上面我们提到的寄生组合继承,但是在代码量上和形式上都更加简单

class Dog extends Animal {
  constructor(name, age, weight) {
    super(name, age) // 这一句代码一定不能缺
    this.weight = weight
  }
}

小结

JavaScript的原型可以说是这门语言最核心的知识之一了,本人从接触JS一直到现在,真的是每个阶段对于这方面的内容都有不同的理解。希望通过这篇文章的分享可以让大家对于原型有更深入的理解。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值