卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
首页 › 技术 › 重学JavaScript之面向对象的程序设计(继承)

重学JavaScript之面向对象的程序设计(继承)

坚果大叔
2019-09-29 17:03:37技术阅读 2,929

ES 中只支持实现继承,而且其实现继承主要依靠原型链来实现的。

ES中 描述了 原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

回顾一下构造函数、原型和实例的关系

每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例。那么此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。

另外,假如另一个原型又是另一个类型的实例,如此层层递进,就构成了实例与原型的链条。这就是原型链的基本概念。

function SuperType(){
    this.property = true
}

SuperType.prototype.getSuperValue = function(){
    retrun this.property
}

function SubType(){
    this.subproperty = false
}

// 继承了 SuperType
SubType.prototype = new SuperType()
SubType.prototype.getSubValue = function(){
    retrun this.subproperty;
}

var instance = new SubType()
instance.getSuperValue()    // true
上面代码中定义了两个类型:

SuperType 和SubType。每个类型分别有一个属性和一个方法。它们的主要区别是:

SubType继承了SuperType,而继承是通过创建SuperType的实例,并将该实例赋给SubType.prototype实现的。实现的本质是重写原型对象,代之以一个新类型的实例。

也就是说,原来存在于SuperType的实例中的所有方法和属性,现在也存在于SubType.prototype中。在给SubType.prototype添加一个方法后,这样就在继承了SuperType的属性和方法的基础上又添加了一个新的方法。这样就实现了实例以及构造函数和原型之间的关系。

通过实现原型链,本质上扩展了原型搜索机制,当以读取模式访问一个实例属性时,首先会在实例中搜索该属性。如果没有找到该属性,则会继续搜索实例的原型。在通过原型链实现继承的情况下,搜索过程就得以沿着原型链继续向上。直到最后一步找到该方法。在找不到属性和方法的情况下,搜索过程总是要一环一环地前行到原型链末端才会停下来。

所有引用类型默认都继承了Object,而这个继承也是通过原型链实现的。所有函数的默认原型都是Object的实例 因此默认原型都会包含一个内部指针,指向 Object.prototype。这也是所有自定义类型都会继承 toString()、valueOf()默认方法的原因

可以通过两种方式来确定原型和实例之间的关系。第一种方式就是使用 instanceof操作符,只要用这个操作符来测试实例与原型链中出现过的构造函数,结果就会返回 true。如下:

instance instanceof Object  // true

第二种方法就是 isPrototypeOf() 方法,同样,只要原型链中出现过的原型,都可以说是该原型链所派生的实例原型,因此 isPrototypeOf() 方法也会返回 true

Object.prototype.isPrototypeOf(instance)    // true

子类型有时候需要重写超类型中的某个方法,或者需要添加超类型中不存在的某个方法,但是无论如何,给原型添加方法的代码一定要放在替换原型的语句之后

function  SuperType() {
    this.property = true
}

SuperType.prototype.getSuperValue = function(){
    retrun this.property
}

function SubType() {
    this.subproperty = false
}
----
// 继承了SuperType
SubType.prototype = new SuperType()

// 添加新方法
SubType.prototype.getSubValue = function(){
    retrun this.subproperty
}
//重写超类型中的方法
SubType.prototype.getSuperValue = function(){
    retrun false
}
-----
var instance = new SubType()
instance.getSuperValue()    // false

以上代码中分隔的部分是两个方法的定义。

第一个方法 getSubValue()被添加到了SubType中,第二个方法 getSuperValue()是原型链中已经存在的一个方法,但重写这个方法将会屏蔽原来那个方法.

换句话说,当 SubType 的实例调用 getSuperValue()时,调用的就是这个重新定义的方法,但通过 SuperType的实例调用 getSuperValue()时,还会继续调用原来的那个方法,所有必须要在用SuperType的实例替换原型之后,在定义这两个方法。

注意:即在通过原型链实现继承的时候,不能使用对象字面量创建原型方法,因为这样做会重写原型。

原型链虽然很强大,可以用它来实现继承,但也存在一定的问题。

1、来自包含引用类型值的原型。在之前说过包含引用类型值的原型属性会被所有实例共享。所以这也是为什么要在构造函数中,而不是在原型对象中定义属性的原因。在通过原型来实现继承时,原型实际上会变成另一个类型的实例。于是,原先的实例属性也就顺理成章地变成了现在的原型属性。

2、在创建子类型的实例时,不能向超类型的构造函数中传递参数。实际上可以说是没有办法再不影响所有对象实例的情况下,给超类型的构造函数传递参数a。

利用在子类型构造函数的内部调用超类型构造函数。即可以通过 apply() 和 call()方法在新创建的对象上执行构造函数。

7.1 传递参数

相对于原型链而言,借用构造函数有一个很大的优势,即可以在子类型构造函数中向超类型构造函数传递参数。

function s(name) {
    this.name = name
}

function b() {  
    // 继承 s,同时还传递参数
    s.call(this, 'nnn')
    // 实例属性
    this.age = 23
}

let i = new B()

i.name // nn
i.age  // 29

7.2 借用构造函数的问题

如果仅仅是借用构造函数,那么也就无法避免构造函数模式存在的问题,方法都在构造函数中定义,因此函数复用就无法实现。另外,在超类型的原型中定义的方法,对子类型而言也是不可见的。结果所有类型都只能使用构造 函数模式。所以借用构造函数模式很少单独使用。

也叫做伪 经典继承,指的是将原型链和借用构造函数的技术组合到一块。发挥二者的长处的一种继承模式。原理就是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。

借助已有的对象创建新对象,先创建一个临时的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的新实例。

创建一个仅用于封装继承过程的函数,该函数在内部以某种方式增强对象,然后再返回对象。同样也是不能做到函数复用而会降低效率

ES 支持面向对象编程,但不使用类或接口。对象可以在代码执行过程中创建和增强,因此具有动态性而非严格定义的实体。在没有类的情况下,可以采用 工厂模式、构造函数模式、原型模式创建对象。

11.1 工厂模式

使用简单的函数创建对象,为对象添加属性和方法,然后返回对象。这个模式被构造函数模式所取代

11.2 构造函数模式

创建自定义引用类型,可以像创建内置对象实例一样使用 new 操作符。不过,构造函数模式也有缺点,即它的每个成员无法得到复用,包括函数。由于函数可以不局限于任何对象。因此没有理由不再多个对象之间共享函数。

11.3 原型模式

使用构造函数的 prototype 属性来指定那些应该共享的属性和方法。组合使用构造函数模式和原型模式时,使用构造函数定义实例属性,而使用原型定义共享的属性和方法。

JS主要通过原型链实现继承。原型链的构建是将一个类型的实例赋值给另一个构造函数的原型实现。这样,子类型就能够访问超类型的所有属性和方法。这点和基于类的继承很相似。

原型链的问题就是对象实例共享所有继承的属性和方法,因此不适合单独使用。 如果想解决这个问题就需要借助于构造函数,即在子类型构造函数的内部调用超类型构造函数。这样就可以做到每个实例都具有自己的属性,同时还能保证只使用构造函数模式来定义类型。

11.4 原型式继承

可以在不预先定义构造函数的情况下实现继承,其本质是执行对给定对象的浅复制。而复制得到的副本还可以进一步改造

11.5 寄生式继承

与原型式继承非常相似,也是基于某个对象或某些信息创建一个对象,然后增强对象,最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致低效率问题,可以将这个模式和组合继承一起使用

11.6 寄生组合式继承

集寄生式继承和组合继承的优点于一身,是实现基于类型继承的最有效方式

JavaScript
赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
前端每日两三问(20190923)
上一篇
ES6入门之Promise
下一篇
在小程序中查看

这是个😊,挣点服务器费用😜

热门文章
初冬!暖日!东太湖慢行!
🐱喵喵
重学Javascript之基础数据
Clean-Code-Js
家里
在博客中加上memos记录展示。
专题标签
agent (1) CSS (15) dom (1) Es6入门系列 (14) Git (3) html (1) iview (1) JavaScript (9) js (4) Lif (1) Node (4) pyecharts (1) Python (10) ref (1) scriptable (1) Skill (1) vsCode (1) vue (4) wordpress (2) 三月 (1) 上海 (1) 假期 (1) 其他分享 (3) 前端两三问 (15) 古镇 (1) 外滩 (1) 对象 (1) 小程序 (5) 年度总结 (6) 年终总结 (1) 微信机器人 (4) 打字机 (1) 技术 (1) 日常问题 (8) 日常问题记录 (1) 春天 (2) 服务器 (2) 海族馆 (1) 生活 (8) 网上国网 (1) 记录 (3) 通勤 (1) 重学JavaScript (11) 面试题 (10) 🌸 (1)
什么是Agent?
2026-08-15 23:49:12
239 0 1
什么是 Skill?
2026-08-12 21:32:42
254 1 0
失业在家,我给小朋友做了一个练字小程序!
2026-08-07 16:21:52
461 8 1
上线8年,15万用户的小程序,一共赚了多少钱?
2026-05-30 18:01:24
4,589 4 0
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2026 卖坚果的怪叔叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
345
文章
170
评论
431
喜欢