JavaScript面向对象程序设计之继承(一)

发布时间:2021-03-05 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了JavaScript面向对象程序设计之继承(一)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

JavaScript面向对象程序设计之继承(一)

1. 原型链式继承

1.1 原型模式

原型模式是JavaScript中创建对象的一种最常见的方式。JavaScript是一种弱类型的语言,没有类的概念,也不是一种面向对象的语言。但是,在JavaScript中,借助函数的原型(也就是prototype)可以实现类的功能。

使用原型模式创建对象的基本做法如下:

function Person (name) {
    this.name = name // 私有属性
}
// 公共方法
Person.prototype.sayName = function () {
    console.log(this.name)
}

// 创建实例
var personA = new Person('A')
console.log(personA.name) // A
personA.sayName() // A

var personB = new Person('B')
console.log(personB.name) // B
personB.sayName() // B

在以上代码中,两个实例既拥有各自不同的属性 name,又共享了 公有的方法 sayName(),这样就实现了类似于强类型语言中类的概念。

这种功能的实现,就得益于构造函数的prototype属性。下图展示了构造函数、原型、实例三者之间的关系。

JavaScript面向对象程序设计之继承(一)

每个构造函数都有一个属性 prototype,prototype属性指向一个对象,该对象被构造函数的所有实例所共享,我们称这个对象为构造函数的原型

原型与构造函数之间通过prototype属性和constructor属性相互联系。

实例与原型之间通过一个 _proto_属性(是浏览器中存在的一个虚拟的属性,各个浏览器的实现不同,谷歌中为_proto_)产生联系。

一个构造函数创建的不同的实例都可以通过 _proto_属性 访问到它的原型,这就是为什么上面的示例中两个示例可以访问到共同的 sayName() 方法的原因。

1.2 原型链式继承

1.2.1 原型链与原型链式继承

构造函数的原型并不是固定不变的,我们可以人为的切断构造函数与其原型之间的联系,也可以给构造函数指定自定义的原型。

function Person (name) {
    this.name = name
}
Person.prototype = {
    constructor: Person,sayName: function () {
        console.log(this.name + '-hello')
    }
}
var personA = new Person('A')
personA.sayName() // A-hello

上面的代码我们自己给Person构造函数指定了一个原型,并添加了一个sayName()的公共方法。

原型链的实现就是基于原型可以重写这一基本前提。

我们结合下图来说明什么是原型链,它与JavaScript中实现类之间的继承的关系。

JavaScript面向对象程序设计之继承(一)

上图中,绿色线条所形成的链条即被我们称之为原型链。基于原型链,我们可以实现一种继承方式。

以下是一段基于原型链实现继承代码示例,为了区别于Java等语言中的class关键字,这里以Type表示类型,同时以 Super表示父,以Sub表示子,将SuperType称之为超类型,将SubType称之为子类型。

function SuperType () {
    this.superName = 'superName'
}
SuperType.prototype.sayName = function () {
    console.log(this.name)
} 
function SubType (subName) {
    this.name = subName || 'subName'
}
SubType.prototype = new SuperType()
var subA = new SubType('A')
subA.sayName() // A
console.log(subA.superName) // superName

以上代码中,我们并没有为SubType定义sayName() 方法,SubType中也没有superName属性,但SubType创建的示例subA却可以使用sayName()方法打印出 自己的name属性,同时可以访问到并非自身定义的 superName属性,这是因为我们将SuperType的一个实例指定为了SubType的原型,因此subA与new SuperType()与 SuperType.prototype之间就有了一条原型链,subA因此可以访问到链条能触及的所有属性和方法。

这就是原型链实现继承的一个基本方式。

1.2.2 原型链式继承的缺陷

尽管,在理解了原型链后,原型链式的继承方式变得很好理解,使用也很简单。但是,原型链式的继承方式却并非完美的实现继承的解决方案。原型链式的继承也存在其自身的问题。让我们看一段代码:

function SuperType () {
    this.element = ['A','B','C']
}
SuperType.prototype.printElement = function () {
    console.log(this.element)
}
function SubType () {
}
SubType.prototype = new SuperType()

var subA = new SubType()
subA.element.push('D')
subA.printElement() // ["A","B","C","D"]
var subB = new SubType()
subB.element.push('E')
subB.printElement() // ["A,","D","E"]

让我们感到奇怪的是,两个不同的实例分别向element属性中各自添加不同元素后,subB中打印的element属性中竟然包含了subA添加的元素。

这也很好理解,因为两个实例都继承自SuperType的同一个实例构成的原型,所以他们共享了超类型构造函数中的element属性,因此,理所应当的,前一个实例对element元素所作的更改会体现在后一个实例上。

但是,这并不是我们想要的结果。

我们知道,使用原型模式创建对象时,会把私有属性(方法)和共有属性(方法)分开定义,私有属性定义在构造函数中,公有属性定义在原型中。因此,显然,当我们使用原型链实现继承时,我们不仅继承了超类型实例的原型中的公有属性,也继承了其构造函数中定义的私有属性。并且本应该是私有的属性,却因为它成了子类型的原型,而变成了子类型的公有属性。

这是一个令人头疼的问题。

原型链式继承的另一个问题是,子类型的构造函数中,无法给超类型传递参数。这也局限了这种方式在实际开发中的应用。

2. 借用构造函数

2.1 借用构造函数实现继承

为了解决原型链式继承所带来的问题,开发人员使用了一种新的技术,这种技术被称为借用构造函数的技术。其具体实现方法如下:

function SuperType (name) {
    this.name = name || 'superName'
    this.element = ['A','C']
}
function SubType (name) {
    SuperType.apply(this,arguments) // SuperType.call(this,name)
}

var subA = new SubType('subA')
subA.element.push('D') 
console.log(subA.element) // ["A","D"] 
console.log(subA.name) // subA
var subB = new SubType('subB')
subB.element.push('E')
console.log(subB.element) // ["A","E"] 
console.log(subB.name) // subB

根据程序的执行现象,我们可以看到,SubType的两个实例,分别向element属性中添加了不同的元素,从打印结果发现,subA中添加的元素并没有反映到subB中,SubType的两个实例在继承了SuperType中的自有属性的同时,又各自保留了其属性的副本。

另外,在SubType构造函数中,调用SuperType构造函数时,子类型可以给超类型传递参数。

借用构造函数看似简单,却解决了原型链式继承中存在的两个让人头疼的问题。

实际上,借用构造函数的思想与我们平时编码时常用的技巧 函数的提取 类似,下面我们通过一段代码来简要的讲解一下这个过程(以下代码部分为伪代码,在此不探讨其合理性):

function SubType () {
    this.propertyA = 'propertyA'
    this.propertyB = 'propertyB'
    this.propertyC = 'propertyC'
    this.propertyD = 'propertyD'
    this.propertyE = 'propertyE'
}

以上是一个子类型的构造函数,其中有诸多属性,在许多其他的子类型中,这些属性也被需要。

这跟函数提取的场景很类似,在一个函数中,某些代码具备一定的复用性,此时,我们很容易的想到,把这些代码提取到一个单独的函数中,此后只要有需要的函数,都可以复用这些代码。这一步可以简单实现为如下:

function SubType () {
   SuperType()
}
function SuperType () {
    this.propertyA = 'propertyA'
    this.propertyB = 'propertyB'
    this.propertyC = 'propertyC'
    this.propertyD = 'propertyD'
    this.propertyE = 'propertyE'
}

SubType构造函数内部调用SuperType构造函数,将SuperType中的属性复用到SubType中。

但是,如只是简单的提取,则会产生一个问题,SuperType中的this在SuperType被定义时,即已确定。SuperType被定义在全局作用域下,因此this指向全局作用域(一般是window)。简单的提取调用后,则SubType中实际上会变成这样:

function SubType () {
    window.propertyA = 'propertyA'
    window.propertyB = 'propertyB'
    window.propertyC = 'propertyC'
    window.propertyD = 'propertyD'
    window.propertyE = 'propertyE'
}

当创建SubType的新实例时,通过调用相应的属性,会得到如下结果:

function SubType () {
   SuperType()
}
function SuperType () {
    this.propertyA = 'propertyA'
    this.propertyB = 'propertyB'
    this.propertyC = 'propertyC'
    this.propertyD = 'propertyD'
    this.propertyE = 'propertyE'
}

var subA = new SubType()
console.log(subA.propertyA) // undefined
console.log(window.propertyA) // propertyA

这与以上的描述一致。

为了让SuperType在调用时,其包含的属性能够正确的复用到SubType中,只需要将SuperType的执行环境绑定到SubType上即可。使用apply()方法和call()方法都可以很容易实现这一步。上述实现就变为:

function SubType () {
   SuperType.apply(this,arguments)
}
function SuperType () {
    this.propertyA = 'propertyA'
    this.propertyB = 'propertyB'
    this.propertyC = 'propertyC'
    this.propertyD = 'propertyD'
    this.propertyE = 'propertyE'
}

var subA = new SubType()
console.log(subA.propertyA) // propertyA
console.log(window.propertyA) // propertyA

以上的过程或许不够准确,但的确可以帮助理解借用构造函数的实现思路。

由以上的代码示例,我们可以看到,借用构造函数的的确确是解决了原型链链式继承方法的缺陷。

  • 每个实例都可以保持超类型中自有属性的私有性,每个子类实例中都可以保有超类型中自有属性的一个副本,子类实例之间对继承而来的自有属性的操作不会相互干扰;
  • 子类型的构造函数可以向超类型的构造函数中传递参数;

2.2 借用构造函数的缺陷

但是,借用构造函数中也存在着令人头疼的问题。

细心的读者会发现,在以上的关于借用构造函数讲解示例中,竟没有出现一次公共方法的调用。没错,这正是问题所在。

简单来说就是,我(借用构造函数)做不到啊。

也许你会进行一些尝试,我给超类型的原型定义公共方法行不行呢?我直接在超类型构造函数上定义一个方法行不行呢?一起来看下面这两段代码:

示例一:给超类型的原型定义公共方法

function SuperType (name) {
    this.name = name || 'superName'
    this.element = ['A','C']
}
SuperType.prototype.sayName = function () {
    console.log(this.name)
}
function SubType (name) {
    SuperType.apply(this,name)
}

var subA = new SubType('subA')
subA.sayName() // Uncaught TypeError: subA.sayName is not a function

毫不吃惊,程序执行出错, subA.sayName不是一个function;

借用构造函数的本质仅仅是将超类型中的属性复制一份到子类型中,并将其属性的执行环境绑定到子类型上,因此子类型在执行完超类型构造函数那一刻,子类型和超类型之间就切断了联系,子类型的实例又怎么可能访问到超类型的原型方法呢。

实例二:直接在超类型构造函数上定义方法

function SuperType (name) {
    this.name = name || 'superName'
    this.element = ['A','C']
    this.sayName = function () {
        console.log(this.name)
    }
}
function SubType (name) {
    SuperType.apply(this,name)
}
var subA = new SubType('subA')
subA.sayName() // 'subA'
var subB = new SubType('subB')
subB.sayName() // 'subB'

看似可行,实则???

console.log(subA.sayName === subB.sayName) // false

呃。。。。。

虽然都实现了相同的功能,但两个方法并不是同一个方法。还是上面说的,借用构造函数仅仅只是复制了一份超类型中的属性和方法,这并不是复用,借用构造函数无法实现公共方法的复用。

基于借用构造函数的以下两个缺陷:

  • 无法定义子类型可复用的公共方法;
  • 无法访问超类型的原型;

借用构造函数在实际应用中很少单独使用。

3. 组合继承

3.1 组合继承

虽然,原型链模式和借用构造函数模式都无法完美实现继承,但所幸二者的缺陷可以互补。自然而然的,一种相对完美的解决方案出现了,即组合继承。

将原型链式继承和借用构造函数继承组合起来,使用原型链模式实现对超类型的公共属性和公共方法的继承,使用借用构造函数模式实现对超类型中自有属性的继承。这样,既通过在原型上定义方法实现了函数的复用,又能够保证每个子类实例都能保有一份超类型中的自有属性。

组合继承的实现方法如下:

function SuperType (name) {
    this.name = name || 'superName'
    this.element = ['A','C']
}
SuperType.prototype.sayName = function () {
    console.log(this.name)
}
SuperType.prototype.printElement = function () {
    console.log(this.element)
}
function SubType (name) {
    SuperType.apply(this,arguments)
}
SubType.prototype = new SuperType ()
var subA = new SubType('subA')
subA.element.push('subA')
subA.sayName() // subA
subA.printElement() // ["A","subA"]
var subB = new SubType('subB')
subB.element.push('subB')
subB.sayName() // subB
subB.printElement() // ["A","subB"]
console.log(subA.sayName === subB.sayName) // true

以上是一个组合继承的示例,根据打印结果可以看到,组合模式既可以复用超类型的公用方法,子类型实例中又可以保有各自的私有属性。

组合继承避免了原型链式继承和借用构造函数继承的缺陷,融合了它们的优点,是JavaScript中最常用的一种继承模式。

3.2 组合继承的缺陷

嗯。。。

组合继承也有缺陷

下次分享——JavaScript面向对象程序设计之继承(二)

组合式继承的缺陷

原型式继承

寄生式继承

寄生组合式继承

总结


以上是前端之家为你收集整理的JavaScript面向对象程序设计之继承(一)全部内容,希望文章能够帮你解决JavaScript面向对象程序设计之继承(一)所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。