JavaScript中的类、原型、原型链、继承 - 网站源码_资源分享

序言

JavaScript在ES6以后严苛象征意义上是没像JAVA,C#此种词汇Cubzac的基本概念的。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第一类

dog第一类

然后看一下Animal类

Animal类

在这里 dog.__proto__ 与 Animal.prototype就是所谓的蓝本，在那个蓝本第一类里他们可以看到有constructor字段，它指向dog那个示例的缺省，也就是Animal, dog.__proto__.constructor === Animal 返回的是true.所以蓝本、类和示例直接的关系可以这种表示:

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做

蓝本关系图

蓝本是JavaScript的特色之一，虽然类、示例这些面向第一类的基本概念和Java这些词汇很像，但本质上却并不一样。在JavaScript中，由缺省示例化出的每个第一类，本身通常只包含自己的属性，但是当他们调用那个第一类上没的方式或属性时，示例化的第一类就会沿着自己的蓝本向上找。如果蓝本上还没找到，且那个蓝本第一类还有自己的蓝本，那就会顺着那个蓝本链一直回溯到最顶级的蓝本Object.prototype。这也是他们通常在缺省的蓝本上装载公用方式的原因 Animal.prototype.xxx = function () {},这种可以让示例化出的每两个第一类沿着自己的蓝本链找到这个方式，所有的示例化的第一类共用同两个方式。

蓝本链

JavaScript中所有的第一类都有蓝本，其中最顶级的蓝本就是Object.prototype,任何两个第一类的蓝本链的顶端必然是Object.prototype,下面来看一下下面示例中的蓝本链。

蓝本链

上图中的蓝本链: 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 = agereturn 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会创建两个新的第一类，那个第一类的蓝本就是那个方式传入的参数，在这里他们实现了蓝本链的修改，此时的蓝本链如下表所示

constdog = 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

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