JavaScript面向对象——多继承的实现与理解

JavaScript面向对象——实现并理解JavaScript多继承

多继承：

说明：在JavaScript中继承是依赖于原型prototype链实现的，只有一条原型链，理论上是不支持继承多个父类的。但是！我们都知道JavaScript是及其灵活的，所以可以通过一些技巧来继承多个对象的属性即实现多继承。

1：实现一个继承单一对象属性的函数：

    function inherit(target, source) {for (var property in source) {target[property] = source[property]}return target}

注：这是一个浅复制的过程，修改复制出来的对象的引用类型值会改变原对象属性值。

测试:

    var book = {name: 'JavaScript深入浅出',types: ['JavaScript', 'language']}var anotherBook = {version: '2018'}// 继承验证inherit(anotherBook, book)console.log(anotherBook.name)console.log(anotherBook.types)console.log(anotherBook.version)// 复制过程是浅复制验证anotherBook.types.push('C++程序设计')console.log(book.types)

运行结果：

2：对此函数进行改造，使其具备继承多个对象属性的功能

假设要实现一个inherits()函数，用于对象继承以下三个对象的属性，应该怎么写？

    var book1 = {name: 'JavaScript深入浅出',types: ['JavaScript', 'language']}var book2 = {price: '$3.7',belongs: '计算机科学与技术出版社'}var anotherBook = {version: '2018'}

解答：

    var inherits = function (arguments) {var length = arguments.length, // 传入对象的个数target = arguments[0],  // 将第一个对象作为返回目标i = 1,  // 第二个及之后的对象作为被继承对象tempObj // 中间对象,用于缓存for (i; i < length; i++) {tempObj = arguments[i]for (var property in tempObj) {target[property] = tempObj[property]}}// 返回目标对象return target }

验证：

    // 多继承实现验证inherits(anotherBook, book1, book2)console.log(anotherBook)

结果：

3：将此函数写在Object.prototype上，即可使用目标对象直接调用

思路：将目标对象改为调用此函数的对象，第一个传入的对象就视作被继承对象，不需返回target。

    Object.prototype.inherits = function () {var length = arguments.length, // 传入对象的个数i = 0,  // 第1个及之后的对象作为被继承对象tempObj // 中间对象,用于缓存for (i; i < length; i++) {tempObj = arguments[i]for (var property in tempObj) {this[property] = tempObj[property]}}}

验证：

    // 多继承实现验证anotherBook.inherits(book1, book2)console.log(anotherBook)

结果：

第100篇原创文章完结！！

虽然比较多水文，但每次写完都感觉到有一丝丝的提高，重视每一次经验总结。

（2018. 03. 18 - 星期天 - 广州·天河）

JavaScript面向对象——多继承的实现与理解相关推荐

JavaScript——面向对象之继承（原型对象）与多态（重载、重写）
继承与多态引入问题一.继承 1. 步骤 (1) 找到所有子对象共同的父对象 (2) 将所有子对象公共的方法定义添加到共同的父对象中 (3) 所有子对象因继承关系而直接使用父对象中公共的方法 2. ...
javascript 面向对象(实现继承的几种方式)
欢迎大家关注我的公众号[老周聊架构],Java后端主流技术栈的原理.源码分析.架构以及各种互联网高并发.高性能.高可用的解决方案. 1.原型链继承核心: 将父类的实例作为子类的原型缺点: 父类新增 ...
JavaScript面向对象——深入理解寄生组合继承
JavaScript面向对象--深入理解寄生组合继承之前谈到过组合继承,会有初始化两次实例方法/属性的缺点,接下来我们谈谈为了避免这种缺点的寄生组合继承寄生组合继承: 思路:组合继承中,构造函数继 ...
JavaScript面向对象——理解构造函数继承(类继承)
JavaScript面向对象--理解构造函数继承(类继承) 构造函数式继承(类继承) function SuperClass(id) {// 引用类型公有属性this.books = ['JavaSc ...
JavaScript 面向对象编程（二） —— 构造函数 / 原型 / 继承 / ES5 新增方法
本篇为 JavaScript 进阶 ES6 系列笔记第二篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 : Javascript 继承机制的 ...
JavaScript面向对象--继承（超简单易懂，小白专属）...
JavaScript面向对象--继承 (超简单易懂,小白专属) 一.继承的概念子类共享父类的数据和方法的行为,就叫继承. 二.E55如何实现继承?探索JavaScript继承的本质 2.1构造函数之 ...
javascript面向对象系列第三篇——实现继承的3种形式
前面的话学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.开宗明义,继承是指在原有对象的基础上,略作修改,得到一个新的对象.javascript主要包括类式继承.原型继承和拷贝继承这三种 ...
javascript 面向对象编程(封装、继承)
在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法. Javascript语言不支持"类",但是可 ...
全方位深入理解JavaScript面向对象
JavaScript面向对象程序设计本文会碰到的知识点: 原型.原型链.函数对象.普通对象.继承读完本文,可以学到面向对象的基本概念 JavaScript对象属性理解JavaScript中的函 ...