JavaScript进阶：多继承原理

1、单继承-属性复制

单继承是通过对源对象的属性key的遍历，将源对象对应key和value值添加到目标对象中去。

// 单继承  拷贝对象
extend(target, source) {
    for(let property in source) {
        target[property] = source[property];
    }
    return target;
}

extend实现的一个浅复制，这样继承下来的只对值数据类型有效，对引用类型的没有效果
根据这种思路就可以去拓展实现继承多个对象的属性，利用arguments即可实现

2、多继承

第一个参数为目标对象，从参数列表的下标1开始进行遍历获取到的都是需要继承的对象属性，然后再将不同的属性和属性值加到目标对象中。

// 多继承
extends() {
    let i = 1, // 设为1，索引为0的不需要进行属性遍历
    len = arguments.length, // 函数的参数列表的长度
    target = arguments[0]; // 将第一个参数设为目标对象
    for (;i < len; i++) {
        for (const property in arguments[i] ) {
            // arguments[i]为索引为1开始需要继承的不同的对象
            target[property] = arguments[i][property];
        }
    }
    return target;
}

进行测试目标对象的属性拥有：

let Book = {
    bookName: 'javascript设计模式',
    bookList: ['1','2','3','4','5']
}
let Person = {
    userName: 'lisi',
    userAddr: 'jiangsu'
}
// 创建一个对象
let Stu = {
    weight: 180,
    height: 180
}
this.extends(Stu, Book, Person);
console.log(Stu);

图1.png

可以看到Stu对象是拥有自身属性的同时，也拥有了Book对象的属性和Person对象的属性。

• 优化：
  可以全局的放入到Object对象的原型上去，这样不同模块，不同的对象均可以使用

// 多继承
Object.prototype.extends = function() {
    let i = 1, // 设为1，索引为0的不需要进行属性遍历
    len = arguments.length, // 函数的参数列表的长度
    target = arguments[0]; // 将第一个参数设为目标对象
    for (;i < len; i++) {
        for (const property in arguments[i] ) {
            // arguments[i]为索引为1开始需要继承的不同的对象
            target[property] = arguments[i][property];
        }
    }
    return target;
}

图2.png

打印Object的原型，可以看到extends方法是已经加进去了。