今天我们讨论一下常用的几种继承方法:

首先我们创建一个动物函数Animal:
  function Animal () {
    this.species = '动物'
  }
再写准备名叫猫咪的函数Cat:
   function Cat (name, color) {
    this.name = name
    this.color = color
  }
最终目的是让Cat继承Animal的属性{spacies : "动物"}; 方法如下:
 
一、 构造函数绑定

首先解释下apply方法:
官方定义: apply方法能劫持另外一个对象的方法,继承另外一个对象的属性.其中第一个参数是用来代替原函数的this,第二个参数是一个数组集合;
说人话就是在CatA里调用Animal方法,同时改变Animal方法的this指向:
Animal.apply(this, arguments)
  function Animal () {
    this.species = '动物'
  }   function CatA (name, color) {
    Animal.apply(this, arguments)
    this.name = name
    this.color = color
  }   // 打印结果如下:
  console.log(new CatA('mimiA', 'red')) // CatA {species: "动物", name: "mimiA", color: "red"}
apply方法是最简单也是最最基础的一种'继承'方式;
 
二、prototype模式-new Animal()赋值给Cat
父函数实例一下赋值给子函数:
CatB.prototype = new Animal();
这样写有一个小坑, 就是子函数的构造函数会被父函数覆盖, 指向了父函数; 解决方法有两个, 一个是重新修正指向, 另一个是拷贝赋值;
 function Animal () {
this.species = '动物'
} function CatB (name, color) {
this.name = name
this.color = color
} CatB.prototype = new Animal()
// 修正子函数的构造函数指向; 即: constructor: ƒ Animal -> constructor: ƒ CatB
CatB.prototype.constructor = CatB
// 打印结果如下:
console.log(new CatB('mimiB', 'red')) // CatB {name: "mimiB", color: "red"} && {CatB.prototype.species: "动物"}
说到原型继承, 为什么我们要这么做呢, 举个简单的栗子:
我们写两个猫咪的函数, 如果不继承'species'属性, 我们就需要写两遍, 这样会出现冗余
function CatAA (name, color) {
  this.name = name
this.color = color
  this.species = '动物' // 公共属性
}
function CatBB (name, color) {
  this.name = name
this.color = color
  this.species = '动物' // 公共属性
}
这个就像是标签里的class和style一样, 如果同一个样式多次出现, 我们就该考虑把他们提取出来, 放在class里; 
关于构造函数和拷贝赋值, 我会在接下来两期单做说明 ( Link ), 在此不具;

三、 prototype模式-Animal原型赋值给Cat原型 原型链之间赋值:
CatC.prototype = Animal.prototype
这样改变原型属性,CatC原型的构造函数同样也会被Animal覆盖掉!
需要修正Cat构造函数指向:
CatC.prototype.constructor = CatC

function Animal () {}
Animal.prototype.species = "动物" function CatC (name, color) {
  this.name = name
  this.color = color
}
CatC.prototype = Animal.prototype
CatC.prototype.constructor = CatC // 修正子函数的构造函数指向! // 注意此时出现一个隐患: 由于CatC和Animal的原型引用地址相同, 此时Animal原型的构造函数也被CatC污染了
console.log(new CatC('mimiC', 'red')) // CatC {name: 'miniC', color: 'red'} && {CatC.prototype.species: "动物"}
console.log(new Animal()) // Animal.prototype.constructor: CatC

   

这里我们对上面的方法进行优化: 利用空对象作为中介,避免改变父级构造函数

他其实是方法二和方法三的组合:
首先写一个用来过渡的空函数F
function F () {}
先把Animal原型赋值给F, 因为F是一个无用的且几乎不占内存的空函数
所以无须担心构造指向改变等问题
F.prototype = Animal.prototype
然后让Cat继承new F()
CatD.prototype = new F()

function Animal () {}
Animal.prototype.species = "动物" function CatD (name, color) {
this.name = name
this.color = color
} function F () {} // 写一个用来过渡的空函数F
F.prototype = Animal.prototype CatD.prototype = new F() // 此时的F角色是: 具有Animal原型的空函数
CatD.prototype.constructor = CatD // 修正子函数构造函数指向 console.log(new CatD('mimiD', 'red')) //CatD.prototype.prototype.species: "动物"


四、 拷贝继承

我们可以开一个for in循环对原型上的属性进行拷贝赋值
其中原型上的constructor是私有属性, 不会被遍历到的

function Animal () {}
Animal.prototype.species = "动物" function CatE (name, color) {
this.name = name
this.color = color
} // 写一个函数原型属性拷贝的方法:
function extend (src, fn) {
var s = src.prototype, f = fn.prototype
for (var i in f) {
s[i] = f[i] // 其中原型上的constructor是私有属性, 不会被遍历到的
}
}
extend(CatE, Animal) console.log(new CatE('mimiE', 'red')) // CatE {name: 'miniE', color: 'red'} && CatE.prototype.species: '动物'


五、 原型继承之ES6写法
;(function(){ // 为区分以上方法, 我把ES6写在了闭包里; 啰嗦一句,自调函数前面最好写一个分号,这样会降低多人协助报错率

    class Animal { // 定义了一个Animal的类,里面的构造函数必须写
constructor () {
this.species = '动物'
}
} class Cat extends Animal { // 定义了一个Cat类, 并且基层了上面的类Animal
constructor (name, color) {
super() // 继承类时, 需要super调用Animal
this.name = name
this.color = color
}
} console.log(new Cat('mimi','red')) // Cat {name: 'mini', color: 'red', species: '动物'} && Cat原型的构造函数是: class Cat; })()




面向对象之继承-5种JavaScript继承的方法的更多相关文章

  1. js(javascript) 继承的5种实现方式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt240 js继承有5种实现方式:1.继承第一种方式:对象冒充  functio ...

  2. JavaScript强化教程——Cocos2d-JS中JavaScript继承

    javaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...

  3. [原创]JavaScript继承详解

    原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...

  4. Cocos2d-JS中JavaScript继承

    JavaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...

  5. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  6. 转载Javascript继承两种形式详解

    一直想对Javascript再次做一些总结,正好最近自己写了一个小型Js UI库,总结了一下Js的继承机制,在网上也看了一些前辈们博客里的总结,感觉分析不是特别全面.这里仅仅是把自己的学习体会拿出来分 ...

  7. 转载 Javascript继承两种形式详解

    一直想对Javascript再次做一些总结,正好最近自己写了一个小型Js UI库,总结了一下Js的继承机制,在网上也看了一些前辈们博客里的总结,感觉分析不是特别全面.这里仅仅是把自己的学习体会拿出来分 ...

  8. javascript 学习笔记之面向对象编程(二):继承&多态

    ~~接上篇~~上一篇实现了类的实现以及类成员变量和方法的定义,下面我们来了解下面向对象中两个最重要的特性:继承和多态. 继承 js中同样可以实现类的继承这一面向对象特性,继承父类中的所有成员(变量和属 ...

  9. JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)

    JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...

随机推荐

  1. MyBatis 的基本要素—SQL 映射文件

    MyBatis 真正的强大在于映射语句,相对于它强大的功能,SQL 映射文件的配置却是相当简单.对比 SQL 映射配置和 JDBC 代码,发现使用 SQL 映射文件配置可减少 50% 以上的代码,并且 ...

  2. 每日命令:(10)cat

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 1.命令格式: cat [选项] [文件] ...

  3. 阿里云创建CentOS系统设置

    1 首先设置你购买的云盘配置,例如cpu,内存,磁盘类型.容量,网络类型等 2.阿里云可以使用浏览器进行远程shell连接 首先需要输入远程密码,第一次连接的时候会提示 一定要牢记 输入密码后进入sh ...

  4. scrapy 按顺序抓取text内容

    需求:获得如下li.clearfix 下的所有text,并且按顺序输出 1. x.css('div.reply-doc h4 a::text').extract(); 2.  x.css('div.r ...

  5. 【03】json使用

    [03]json使用   把 JSON 文本转换为 JavaScript 对象 JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 J ...

  6. 转载 - C - 枚举类型详解

    出处:http://www.cnblogs.com/JCSU/articles/1299051.html 注:以下全部代码的执行环境为VC++ 6.0 在程序中,可能需要为某些整数定义一个别名,我们可 ...

  7. Xdebug的安装、配置和使用

    对于我这么一个渣渣php码农,平时总觉得echo.var_dump.print_r就能满足我的调试需求了,最近公司开始一个新项目,要大量阅读调试旧的源码,echo和var_dump开始不够用了,于是装 ...

  8. Nginx 重写规则指南1

    作者:运维生存时间 - 默北 链接:www.ttlsa.com/nginx/nginx-rewriting-rules-guide/ 当运维遇到要重写情况时,往往是要程序员把重写规则写好后,发给你,你 ...

  9. java String长度与varchar长度匹配理解(字符和字节长度理解)

    java String长度与varchar长度匹配理解(字符和字节长度理解) string中的length()长度,返回的是char的数量,每个char可以存储世界上任何类型的文字和字符,一个char ...

  10. 交换机是干嘛的!!交换机如何学习MAC地址过程?

    1.它收到一个帧的时候,先检查源MAC地址,看看自己维护的一个地址表中有没有这个地址.如果有,则2:如果没有,则将这个MAC地址.进入的端口.进入的时间放入这个表中: 2.检查目的MAC地址,然后到该 ...