如何将类中的方法添加到另一个类的现有对象

Question

我有一个大班，我分成两部分，并在页面上单独加载它们以提高性能。核心部分首先同步加载，因为它包含关键功能，而扩展（非关键功能）稍后在页面中异步加载。

我只想要一个包含两个类功能的对象。但是当Extension加载时，已经有了Core的对象。如何将Extension中的功能添加到Core的对象中？

我正在使用基于Gulp的资产管道

Rollup =将来自不同文件的JS捆绑到一个文件中

Babel =将ES6转换为ES5

Uglify =最小化JS

这是我的目录结构：

js
|_ _classes
|   |_ ab.js
|   |_ cd.js
|_ core.js
|_ ext.js

我已将gulp构建任务设置为忽略“_classes”目录中的文件。 Rollup解析“import”语句以捆绑代码。

这就是我在core.js所拥有的

//core.js
import AB from './_classes/ab.js';

window.oab = new AB();

这是ext.js

//ext.js
import CD from './_classes/cd.js';

//let o_cd = new CD();

window.oab.prototype = CD;

这是Core类

// file ab.js
class AB {

    constructor() {
        this.car = 'McLaren';
        this.fruit = 'Mango';
    }

    getCar() {
        return this.car;
    }

    getFruit() {
        return this.fruit;
    }

}

这是Extension类

//file cd.js
class CD {

    constructor() {
        this.plane = 'Gulfstream';
    }

    getPlane() {
        return this.plane;
    }

}

我试图让这个工作：

console.log( window.oab.getCar() );  // prints McLaren
console.log( window.oab.getFruit() );  // prints Mango
console.log( window.oab.getPlane() );  // prints Gulfstream

现在我可以很好地导入AB类中的CD类，设置CD类来扩展AB，这将给我我想要的东西。但是，根据我目前的gulp管道设置，这意味着Rollup将捆绑AB类的副本和类CD，类AB已经加载了更早。

由于Rollup，Babel和Uglify，类名AB和CD等不会持续存在，因此我不能假设AB可用于CD，我可以在不先导入它的情况下进行扩展，导入它意味着它与CD捆绑在一起。

Answer 1

我在ext.js的window.oab上应用了一个猴子补丁，这给了我正在寻找的东西。

import CD from './_classes/cd.js';

( function() {

    let i;
    let ocd = new CD();
    let ocd_methods = Object.getOwnPropertyNames( ocd.__proto__ ).filter( p => {
        return ( 'function' === typeof ocd.__proto__[ p ] );
    });

    Object.assign( window.oab, ocd );   // this assigns only properties of ocd into window.oab and not the methods

    for ( i in ocd_methods ) {

        let method = ocd_methods[ i ];

        if ( '__proto__' === method || 'constructor' === method ) {
            continue;
        }

        window.oab.__proto__[ method ] = ocd[ method ];

    }

} () );

现在这个有效

console.log( window.oab.getCar() );  // prints McLaren
console.log( window.oab.getFruit() );  // prints Mango
console.log( window.oab.getPlane() );  // prints Gulfstream