zoukankan      html  css  js  c++  java
  • 多继承

      JavaScript中继承是依赖于原型prototype链实现的,只有一条原型链,所以理论上是不能继承多个父类的,但JavaScript是灵活的,可以一些技巧方法实现多个对象的属性多继承。

    一、单继承extend实现 

    看一下用来继承单对象属性的extend方法:

     1 // 对象属性extends方法:浅复制
     2 // 单继承 属性复制
     3 var extend = function(target, source) {
     4     // 遍历源对象中的属性
     5     for (var property in source) {
     6         // 将源对象中的属性复制到目标对象中
     7         target[property] = source[property];
     8     }
     9     // 返回目标对象
    10     return target;
    11 }
    12 
    13 var book = {
    14     name: 'JavaScript设计模式',
    15     alike: ['css', 'html', 'JavaScript']
    16 }
    17 var anotherBook = {
    18     color: 'blue'
    19 }
    20 extend(anotherBook, book); 
    21 console.log(anotherBook.name); // JavaScript设计模式
    22 console.log(anotherBook.alike); // ["css","html","JavaScript"] 
    23 
    24 anotherBook.alike.push('ajax');
    25 anotherBook.name = '设计模式';
    26 console.log(anotherBook.name); // 设计模式
    27 console.log(anotherBook.alike); // ["css","html","JavaScript","ajax"]
    28 console.log(book.name); // JavaScript设计模式
    29 console.log(book.alike); // ["css","html","JavaScript","ajax"]

    注:extend是一个浅复制的过程,所以对于引用类型的属性它是无能为力的。

     

    二、多继承mix实现

      既然上面的方法可以实现对一个对象属性的复制继承,那么多个对象属性继承也是同样的道理。

     1 // 多继承 属性复制
     2 var mix = function() {
     3     var i = 1, // 从第二个参数起为被继承的对象
     4         len = arguments.length, // 获取参数长度
     5         target = arguments[0], // 第一个对象为目标对象
     6         arg; // 缓存参数对象
     7     // 遍历被继承的对象
     8     for(; i < len ; i++) {
     9         // 缓存当前对象
    10         arg = arguments[i];
    11         // 遍历被继承对象中的属性
    12         for (var property in arg) {
    13             target[property] = arg[property];
    14         }
    15     }
    16     // 返回目标对象
    17     return target;
    18 }

      mix方法的作用就是将传入的多个对象的属性复制到源对象中,这样即可实现对多个对象属性的继承。当然也可以将它绑定到原生对象Object上,这样所有的对象就可以拥有这个方法了。

     1 // 将mix方法绑定到原生对象Object,这样所有的对象就可以拥有这个方法了
     2 Object.prototype.mix = function() {
     3     var i = 0, // 从第二个参数起为被继承的对象
     4         len = arguments.length, // 获取参数长度
     5         arg; // 缓存参数对象
     6     for(; i < len ; i++) {
     7         // 缓存当前对象
     8         arg = arguments[i];
     9         // 遍历被继承对象中的属性
    10         for (var property in arg) {  // 不仅遍历对象自身的属性,还遍历继承的属性。所以mix方法也会赋值到
    11             this[property] = arg[property];
    12         }
    13     }
    14 }
    15 
    16 var threeBook = {
    17         size: 10
    18     }, 
    19     otherBook = {};
    20 otherBook.mix(anotherBook, threeBook);
    21 console.log(otherBook); /* {
    22                                 alike: (4) ["css", "html", "JavaScript", "ajax"]
    23                                 color: "blue"
    24                                 mix: ƒ () 
    25                                 name: "设计模式"
    26                                 size: 10 
    27                         */

     

    参考书籍:《JavaScript设计模式》

  • 相关阅读:
    sass中使用穿透属性(deep)修改第三方组件样似
    Codeforces Round #647 (Div. 2) D. Johnny and Contribution(BFS)
    Codeforces Round #647 (Div. 2) C. Johnny and Another Rating Drop(数学)
    Codeforces Round #647 (Div. 2) B. Johnny and His Hobbies(枚举)
    Codeforces Round #647 (Div. 2) A. Johnny and Ancient Computer
    AtCoder Beginner Contest 169
    Codeforces Round #646 (Div. 2) E. Tree Shuffling(树上dp)
    Codeforces Round #646 (Div. 2) C. Game On Leaves(树上博弈)
    Codeforces Round #646 (Div. 2) B. Subsequence Hate(前缀和)
    Codeforces Round #646 (Div. 2) A. Odd Selection(数学)
  • 原文地址:https://www.cnblogs.com/daheiylx/p/13820298.html
Copyright © 2011-2022 走看看