JS 设计模式三（继承）

shusen 发布于2019-08-21 13:49 / 1185人阅读

摘要：什么是继承继承是一种减少重复性代码的一种设计模式，尽量弱化对象间耦合，开闭原则的一种很好的实现。三掺元类这种继承方式是为了扩充类的一些重复函数而不重写代码，这个也是一种多继承的效果。所以在使用的继承前，最好可以很好的理解下原型链这个概念。

什么是继承

继承是一种减少重复性代码的一种设计模式，尽量弱化对象间耦合，开闭原则的一种很好的实现。

javascript继承

由于javascript的语言特性，它的继承也被分为了3中实现方式

一、类继承

function extend(subClass, superClass) {
  var F = function () {
  };
  F.prototype = superClass.prototype;
  subClass.prototype = new F();
  subClass.prototype.constructor = subClass;

  subClass.superclass = superClass.prototype;
  if (superClass.prototype.constructor == Object.prototype.constructor) {
    superClass.prototype.constructor = superClass;
  }
}

function Person(name) {
  this.name = name;
}
Person.prototype.getName = function () {
  return this.name;
}
function Author(name, books) {
  Author.superclass.constructor.call(this, name);
  this.books = books;
}
extend(Author, Person);
Author.prototype.getBooks = function () {
  return this.books;
};
Author.prototype.getName = function () {
  var name = Author.superclass.getName.call(this);
  return name + ", Author of " + this.getBooks().join(", ");
};

var hugo = new Author("hugo", ["Notre-Dame de Paris"]);
hugo.getName();
hugo.getBooks();

这种继承方式比较适合不熟悉javascript语言原型的程序员使用。

二、原型继承

function clone(object) {
  function F() {
  }

  F.prototype = object;
  return new F;
}

var Person = {
  name: "默认值",
  getName: function () {
    return this.name;
  }
}

var Author = clone(Person);
Author.books = []; // Default value.
Author.getBooks = function() {
  return this.books;
}
hugo = clone(Author);
hugo.name = "hugo";
hugo.books =["Notre-Dame de Paris"];
hugo.getName();
hugo.getBooks();

这种继承比较节约内存。但是理解更加复杂。起属性默认值指向父类属性。

三、掺元类

function augment(receivingClass, givingClass) {
  if(arguments[2]) { // Only give certain methods.
    for(var i = 2, len = arguments.length; i < len; i++) {
      receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
    }
  }
  else { // Give all methods.
    for(methodName in givingClass.prototype) {
      if(!receivingClass.prototype[methodName]) {
        receivingClass.prototype[methodName] = givingClass.prototype[methodName];
      }
    }
  }
}

var Mixin = function() {};
Mixin.prototype = {
  serialize: function() {
    var output = [];
    for(key in this) {
      output.push(key + ": " + this[key]);
    }
    return output.join(", ");
  }
};

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

augment(Person, Mixin,"serialize");
var hugo = new Person("hugo");
hugo.serialize();

这种继承方式是为了扩充类的一些重复函数而不重写代码，这个也是一种多继承的效果。

总结

javascript的继承大体上使用原型的方式会比较节省内存空间，不过也有一定的使用难度。不过在理解了原型以后就可以这是一种非常简化的继承方式，对于扩展也很方便。所以在使用javascript的继承前，最好可以很好的理解下原型链这个概念。

云服务器 GPU云服务器 js继承模式云服务三种模式 js 继承 js继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87760.html

Javascript 设计模式读书笔记(三)——继承

摘要：的继承方式属于原型式继承，非常灵活。当使用关键字执行类的构造函数时，系统首先创建一个新对象，这个对象会继承自构造函数的原型对象新对象的原型就是构造函数的属性。也就是说，构造函数用来对生成的新对象进行一些处理，使这个新对象具有某些特定的属性。继承这个东西在Javascript中尤其复杂，我掌握得也不好，找工作面试的时候在这个问题上栽过跟头。Javascript的继承方式属于原型式继承，...

cangck_X 2019-08-21 12:16 评论0 收藏0
js面向对象浅谈（三）

摘要：还有一个问题，就是不能在创建子类性时，像父类型的构造函数传递参数。组合继承将原型链和借用构造函数组合到一起，发挥两者之长的一张继承模式，下面来看个例子。组合继承最大的问题是无论在什么情况下，都会调用两次父类型构造函数。继承继承是面向对象语言中特别重要的概念，js的继承主要是靠原型链实现的。原型链！！！看到我给标题打了三个叹号吗，这里真的很重要！这里真的很重要！这里真的很重要！j...

awkj 2019-08-20 17:20 评论0 收藏0
React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类

摘要：最后抽离出来了一个类，可以帮助我们更好的做组件化。一个组件有自己的显示形态上面的结构和内容行为，组件的显示形态和行为可以由数据状态和配置参数共同决定。接下来我们开始正式进入主题，开始正式介绍。下一节链接直达小书基本环境安装 React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类本文作者：胡子大哈本文原文：http://huziketang.com/books...

jsbintask 2019-08-21 17:32 评论0 收藏0
JS面向对象的程序设计之继承的实现 - 原型链

摘要：简单回顾一下构造函数原型和实例对象之间的关系每个构造函数都有一个原型对象。找到生成构造函数的原型对象的构造函数，搜索其原型对象，找到了。 JS面向对象的程序设计之继承的实现 - 原型链前言：最近在细读Javascript高级程序设计，对于我而言，中文版，书中很多地方翻译的差强人意，所以用自己所理解的，尝试解读下。如有纰漏或错误，会非常感谢您的指出。文中绝大部分内容引用自《JavaS...

zhaochunqi 2019-08-23 12:22 评论0 收藏0
18年求职面经及总结

摘要：年求职面经及总结我的求职之路差不多走到尽头了感觉真是精疲力尽了把这大半年的经历和面试总结写下来希望能给和我一样在求职路上煎熬的人一点帮助先说背景微电子科学与工程专业学过两门和相关的课程语言和单片机这个专业的唯一好处就是大部分人并不知道这个专 18年求职面经及总结我的求职之路差不多走到尽头了,感觉真是精疲力尽了.把这大半年的经历和面试总结写下来,希望能给和我一样在求职路上煎熬的人一点帮...

zhangwang 2019-08-22 11:07 评论0 收藏0