果然,感觉有些东西不整理一下还是很容易忘记的,很多时候有需要不断地去复习,感觉JavaScript这门语言总体上不能算是特别难,但是知识点特别杂(坑也特别多...),感觉最好还是能够梳理出一个整体架构出来

  好了,废话不多说,今天大致上总结一下ES5中的继承模式,大致上还是参照《JavaScript高级程序设计》上来的。

  1. 原型模式

     function Person (name, age) {
    this.name = name;
    this.age = age;
    }

    Person.prototype.sayName = function () {
    return this.name;
    }
    Person.prototype.sayAge = function () {
    return this.age;
    }

    function Student (name, age, school) {
    this.name = name;
    this.age = age;
    this.school = school;
    }

    Student.prototype = new Person();
    Student.prototype.saySchool = function () {
    return this.school;
    }

    let stu = new Student('zhang', 18, 'zust');
    console.log(stu.getName()); // 'zhang'

   以上的继承方式是比较好理解的,当访问Student实例的sayName()方法时,先遍历实例方法(无匹配),再搜索

   原型对象Person实例(无匹配), 最后搜索Person.prototype对象上,得到sayName()方法。

  1. 借用构造函数

     function Person(name, age){
    this.name = name;
    this.age = age;
    }

    Person.prototype.sayName = function () {
    return this.name;
    }

    Person.prototype.sayAge = function () {
    return this.age;
    }

    function Student(name, age, school){
    Person.call(this, name, age);
    this.school = school;
    }

    所谓的借用构造函数是借用父类的构造函数来设置自己的属性,进一步避免了代码的重复。

    以上是单纯使用了借用构造函数实现的继承,可以看到在子类中通过重用父类的构造方法为子类设置属性,但是仅仅使用借用构造函数,子类将无法继承父类构造函数原型中的方法。

  2. 组合式继承(原型模式与借用构造函数的组合)

     function Person(name, age){
    this.name = name;
    this.age = age;
    }
    Person.prototype.sayName = function () {
    return this.name;
    }
    Person.prototype.sayAge = function () {
    return this.age;
    }

    function Student(name, age, school) {
    Person.call(this, name, age);
    this.school = school;
    }

    Student.prototype = new Person();

    以上的继承方式是原型模式和借用构造函数模式的组合方式,通过原型链的方式继承父类构造函数原型对象上的方法,使用借用构造函数重用父类构造函数中的代码。相当于是对于原型链继承模式的优化,将父类构造函数中的代码加以重用。

  3. 原型式继承

     let sup = {name: 'zhang', age: 18};
    let extend = function (obj) {
    function F () {};
    F.prototype = obj;
    return new F();
    }

    let sub = extend(sup);
    console.log(sub.name);

    就以上的继承方式而言,个人感觉与以下实现方式并没有太大区别

     let sup = {name: 'zhang', age: 18};
    let sub = {};
    Object.setPrototypeOf(sub, sup);
    console.log(sub.name);

    在子类对象创建的过程中,所有的父类变量将会被子类共享,尤其是引用类型的变量

     const sup = {name: 'zhang', age: 18, arr: ['a', 'b', 'c']}

    const extend = function (obj) {
    function F(){};
    F.prototype = obj;
    return new F();
    }
    const a = extend(sup);
    const b = extend(sup);
    console.log(a.arr); // ['a', 'b', 'c']
    b.arr.push('d');
    console.log(a.arr); // ['a', 'b', 'c', 'd']

    在原型上定义了一个引用类型的属性arr,然后通过继承创建两个对象,通过对象b访问arr属性时,由于对象b上并没有arr属性,因此,会访问b的原型对象,也就是sup对象中的arr属性,这是所有子类对象共享父类对象中的属性的实质。

    ES5中通过Object.create()方法实现原型式继承的标准API

  4. 寄生式继承

     function createPerson (obj) {
    var clone = Object.create(obj);
    clone.getName = function () {
    return this.name;
    }
    return clone;
    }

    var person = {name: 'zhang', age: 18};
    var p = createPerson(person);
    console.log(person.name); // 'zhang'

    寄生式继承是将原型式继承以及增加实例方法这两个步骤封装成一个工厂函数,然后将生成的对象返回

    代码还是比较简单的,但是具体是干嘛用的,emmmmmm...所以,不再赘述

  5. 寄生组合式继承

     function Person (name, age) {
    this.name = name;
    this.age = age;
    }

    Person.prototype.getName = function () {
    return this.name;
    }

    Person.prototype.getAge = function () {
    return this.age;
    }

    function Student (name, age, school) {
    Person.call(name, age);
    this.school = school;
    }

    Student.prototype = Object.create(Person.prototype);
    Student.prototype.getSchool = function () {
    return this.school;
    }

    这种继承方式可以看做是组合式继承的优化,我们可以看到,其实这种方式与组合式继承其实并没有太大区别,区别仅仅在于设置Student.prototype的方式不同。组合式继承是通过new Person()的方式产生一个原型对象,而寄生组合式继承是通过Object.create()方法产生一个经过浅复制得到原型对象的一个副本。

ES5继承模式的更多相关文章

  1. ES6中的类继承和ES5中的继承模式详解

    1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...

  2. JS继承模式粗探

    之前提到了JS中比较简单的设计模式,在各种设计模式中被最常使用的工具之一就是原型链的继承.作为OOP的特质之一——继承,今天主要谈谈JS中比较简单的继承方法. 最基础的原型链继承在这里就不复述了,主要 ...

  3. JavaScript中的继承模式总结

    一.总结: //js中的几种继承 //原型链的问题,包含引用类型的原型属性会被实例共享,子类型无法给超类型传递参数 function SuperType() { this.colors = [&quo ...

  4. JavaScript中的继承模式总结(九)

    一.总结: //js中的几种继承 //原型链的问题,包含引用类型的原型属性会被实例共享,子类型无法给超类型传递参数 function SuperType() { this.colors = [&quo ...

  5. JavaScript的7种继承模式

    <JavaScript模式>一书中,对于JavaScript的几种继承模式讲解得很清楚,给我提供了很大帮助.总结一下,有如下7种模式. 继承模式1--设置原型(默认模式) 实现方式: // ...

  6. javascript 对象的创建与继承模式

    针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 6.1理解对象 创建对象的两个方法(暂时) //第一种,通过创建一个Object ...

  7. es5继承和es6类和继承

    es6新增关键字class,代表类,其实相当于代替了es5的构造函数 通过构造函数可以创建一个对象实例,那么通过class也可以创建一个对象实列 /* es5 创建一个person 构造函数 */ f ...

  8. js类式继承模式学习心得

    最近在学习<JavaScript模式>,感觉里面的5种继承模式写的很好,值得和大家分享. 类式继承模式#1--原型继承 方法 让子函数的原型来继承父函数实例出来的对象 <script ...

  9. JavaScript 对象的创建和对6种继承模式的理解和遐想

      JS中总共有六种继承模式,包括原型链.借用构造函数.组合继承.原型式继承寄生式继承和寄生组合式继承.为了便于理解记忆,我遐想了一个过程,对6中模式进行了简单的阐述. 很长的一个故事,姑且起个名字叫 ...

随机推荐

  1. VPS 安装MySQL

    目前Centos下默认支持的数据库是MariaDB,MariaDB是mysql的增强版本,由于mysql被Oracle收购之后,mysql之父担心之后mysql会变成闭源的软件,就又开发了这个版本,支 ...

  2. Ubuntu16.04 重新安装误删的某个*.so文件

    在使用Ubuntu系统时,如果不小心将某个*.so文件删除,该如何重新安装呢? 如果直接使用命令:sudo  apt-get  install  *.so 可能会报错或者找不到这个*.so文件. 正确 ...

  3. 去除重复嵌套的html标签函数

    去除重复嵌套的html标签 function strip_multi_tags($str, $tag = 'div'){ preg_match_all('/<'.$tag.'>|<\ ...

  4. 多线程AQS

    参考: AQS原理分析 https://blog.csdn.net/javazejian/article/details/75043422 重入读写锁原理分析 https://blog.csdn.ne ...

  5. sublime px转rem插件

    http://www.cnblogs.com/phoebewang00/p/5593699.html lime 插件- px 转rem   一个CSS的px值转rem值的Sublime Text 3自 ...

  6. [NOI2014] 魔法森林 (二分答案,并查集)

    本思路仅供参考,数据强一点应该该会被卡. 本蒟蒻没有打 \(link\) - \(cut\) - \(tree\) . 而是用暴力水了过去. 具体思路很简单,先二分最少的 \(a_i\) , 再在 \ ...

  7. Codeforces Round #608 (Div. 2) E - Common Number (二分 思维 树结构)

  8. 学习笔记11 EF查询相当于sql 中的 where in

    两种写法 1. int[] Ids={1,2,3} DBContainer db=new DBContainer(); var list=db.表明.where(a=>Ids.Contains( ...

  9. 170819-关于EL表达式的知识点

    1 .EL表达式 [1] 简介 > JSP表达式 <%= %> 用于向页面中输出一个对象. > 到JSP2.0时,在我们的页面中不允许出现 JSP表达式和 脚本片段. > ...

  10. Centos7开机自动启动服务和联网

    虚拟机设置选择NAT模式,默认情况下,Centos不是自动连接上网的,需要点击右上角,手动连接上网. 可以修改开机启动配置修改: 1. cd 到/etc/sysconfig/network-scrip ...