果然,感觉有些东西不整理一下还是很容易忘记的,很多时候有需要不断地去复习,感觉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. Flutter-Boxdecoration邊框線, 圓角

    decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), border: Border( top: BorderSide( ...

  2. File类常用方法和枚举

    新建一个file对象: File f = new File("F:\\01.JAVA基础300集\\05_常用类\\122.File类的使用.mp4"); (文件路径也可以用&qu ...

  3. python 判断一个数是整数还是小数

    a=81**0.5 s=str(a).split('.') if float(s[1])==0: print('整数') else :print('小数')

  4. c++11 默认函数的控制

    1. 类与默认函数: C++中声明自定义的类,编译器会默认生成未定义的成员函数: 构造函数 拷贝构造函数 拷贝赋值函数(operator=) 移动构造函数 移动拷贝函数 析构函数 编译器还会提供全局默 ...

  5. HTTP通信安全和Web攻击技术

    一.HTTPS,确保Web安全 在HTTP协议中可能存在信息窃听或身份伪装等安全问题,HTTP的不足: 通信使用明文(不加密),内容可能会被窃听  不验证通信方的身份,因此有可能遭遇伪装 无法证明报文 ...

  6. NodeJS使用puppeteer进行截图

    const puppeteer = require('/home/ordinaryUser_2/automation/NodeJS/node/lib/node_global/lib/node_modu ...

  7. Xib中用自动布局设置UIScrollView的ContenSize

    1. 在UIScrollView上拖一个UIView 2.设置UIScrollView上下左右约束为0,设置UIView上下左右约束为0,并且设置水平中线约束.那么可以把水平中线约束拖到对应视图,利用 ...

  8. The Factor

    The Factor Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  9. java文件转码

    完整项目带lib 参考 http://toyota2006.iteye.com/blog/540316 判断编码 package change; import info.monitorenter.cp ...

  10. 【进阶技术】一篇文章搞掂:RibbitMQ

    一.简介 一开始,消息队列源自于一个激进的工程师的思想,他希望有一种通用软件“总线”能解决程序间繁重的信息通信工作 后来出现了很多消息队列产品,但是他们互不兼容,价格昂贵 后来出现了AMQP,高级消息 ...