JS中的继承(下)

在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要写的内容, 是建立在此基础上的.另外本文作为我个人的读书笔记,才疏学浅,如有错误,敬请指正.

接下来我们要介绍另外3种相对比较奇葩的继承

一. 原型式继承



function clone (proto) {
function F () {}
F.prototype = proto
return new F()
}

clone 内部首先是创建了一个空的构造函数F,然后把F的prototype指向参数proto,最后返回一个F的实例对象,完成继承. 原型式继承看起来跟原型继承很像,事实上,两者因为都是基于prototype继承的,所以也有一些相同的特性,比如引用属性共享问题, 那原型式继承跟原型继承有什么区别呢? 一个比较明显的区别就是clone函数接收的参数不一定要是构造函数,也可以是其他任何对象, 这样我们就相当于是浅复制了一个对象.

es5的Object.create()函数,就是基于原型式继承的

原型式继承是道格拉斯-克罗克福德 2006 年在 Prototypal Inheritance in JavaScript一文中提出的

二. 寄生式继承

寄生式继承其实就是在原型式继承的基础上,做了一些增强.



function cloneAndStrengthen(proto){
function F () {}
F.prototype = proto
let f = new F()
f.say = function() {
console.log('I am a person')
}
return f
}

我们看到上面的代码,跟原型式继承比,差别就是:在实例对象f返回之前,给f添加了一个say函数. 但是这样在实例对象上添加的引用属性(比如函数),跟构造函数模式一样, 实例对象的引用类型属性无法共享,尽管这既是缺点也是优点.

三. 寄生组合式继承

上一篇我们提到的组合继承其实也有个缺点,就是父类构造函数里面的代码会执行2遍,第一遍是在原型继承的时候实例化父类, 第二遍是在子类的构造函数里面借用父类的构造函数,我们可以用寄生组合式继承来解决这个问题



function inherit(sub, super){
let prototype = clone(super.prototype)
prototype.constructor = sub
sub.prototype = prototype
}

这样我们就实现了一个寄生组合式继承的函数inherit,接下来我们来使用一下:



function Person(name){}

function Student(){
SuperType.call(this)
} inherit(Student, Student)

我们用 inherit 函数替换了 Student.prototype = new Person(),从而避免了执行 new Person().

书上说: 寄生组合式继承是引用类型最理想的继承范式.

JS中的继承(下)的更多相关文章

  1. JS中的继承(上)

    JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...

  2. 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

  3. js中实现继承的几种方式

    首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...

  4. js中的继承和重载

      js中有三种继承方式:一.通过原型(prototype)实现继承 二.借用构造函数式继承,可分为通过call()方法实现继承和通过apply()方法实现继承 仅仅通过原型继承我们可以发现在实例化子 ...

  5. 详细理解JS中的继承

    正式说继承之前,有两个相关小点: JS只支持实现继承,即继承实际的方法,不支持接口继承(即继承方法的签名,但JS中函数没签名) 所有对象都继承了Object.prototype上的属性和方法. 说继承 ...

  6. 浅谈JS中的继承

    前言 JS 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属 ...

  7. js中的继承

    js中继承的实现方式很多,此处给出两种常用方式. <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> ...

  8. JS中对象继承方式

    JS对象继承方式 摘自<JavaScript的对象继承方式,有几种写法>,作者:peakedness 链接:https://my.oschina.net/u/3970421/blog/28 ...

  9. JS中的继承实现方式

    第一种:通过prototype来实现 prototype.html <!DOCTYPE html><html lang="en"><head> ...

随机推荐

  1. MySQL 主从复制 (CentOS 7)

    1.主从复制原理 (1) 当master 服务器上的数据发生改变时,则将其改变写入二进制日志文件中: (2) slave服务器会在一定时间间隔内对 master 服务器上的二进制日志进行探测,探测其是 ...

  2. 安装两个版本的python安装包,后安装的python程序打开时闪退

    1.环境变量的问题 (Win7)右键打开“计算机”的属性设置→高级系统设置→环境变量.  在系统变量中的path中,编辑,在末尾加入Python的安装路径“F:\Python27”, 路径与路径之间使 ...

  3. redis的incr和incrby命令

    Redis Incr 命令将 key 中储存的数字值增一,如果 key 不存在,那么 key 的值会先被初始化为 0 ,然后再执行 INCR 操作. Redis Incrby 命令将 key 中储存的 ...

  4. springboot备忘

    1.springboot中有ApplicationRunner类,如果项目中的启动类名称也是ApplicationRunner,单元测试时需要注意:import不要import到springboot的 ...

  5. DownloadManager系统自带下载实现apk后台下载功能

    DownloadManager是android2.3以后,系统下载的方法,是处理长期运行的HTTP下载的系统服务.客户端可以请求的URI被下载到一个特定的目标文件.客户端将会在后台与http交互进行下 ...

  6. oracle 查看数据库和表命令

    1.su – oracle 不是必需,适合于没有DBA密码时使用,可以不用密码来进入sqlplus界面. 2.sqlplus /nolog 或sqlplus system/manager 或./sql ...

  7. vue-template-compiler作用

    vue-template-compiler的作用是什么: 看起来 template-compiler是给parse函数使用的, 那么parse函数是干什么的呢 先看一下parse的结果: 结论:使用v ...

  8. 转:extjs 添加loading状态的三种解决办法:

    extjs 添加loading状态的三种解决办法: 方法一: //materialGrid 指需要显示loading状态的控件id var o=Ext.getCmp('materialGrid'); ...

  9. 阶段3 3.SpringMVC·_06.异常处理及拦截器_5 SpringMVC拦截器之编写controller

    先新建包,com.itcast.controller,然后把异常拦截的项目的UserController复制过来. 复制过来稍作修改 创建pages文件件,然后新建success.jsp页面 部署当前 ...

  10. 在VS CODE中调试Angular代码

    Chrome Dev Tools 可以调试js程序,但是可能需要和源码之间来回切换. 如果是使用VS CODE来开发Angular,可以直接在VS CODE中调试. 按照如下的步骤即可: 第一步,  ...