鍍金池/ 問(wèn)答/HTML/ js 的mixin實(shí)踐問(wèn)題

js 的mixin實(shí)踐問(wèn)題

在看《你不知道的JavaScript》中，有一段關(guān)于繼承的mixin實(shí)現(xiàn)，代碼如下：

function mixin( sourceObj, targetObj ) {//sourceObj中不在targetObj中的key,添加到targetObj中。
    for (var key in sourceObj) {
// 只會(huì)在不存在的情況下復(fù)制
        if (!(key in targetObj)) {
            targetObj[key] = sourceObj[key];
        }
    }
    return targetObj;
}
var Vehicle = {
    engines: 1,
    ignition: function() {
        console.log( "Turning on my engine." );
    },
    drive: function() {
        this.ignition();
        console.log( "Steering and moving forward!" );
    }
};
var Car = mixin( Vehicle, {
    wheels: 4,
    drive: function() {
        Vehicle.drive.call( this );
        console.log(
            "Rolling on all " + this.wheels + " wheels!"
        );
    }
} );


Car.drive();

輸出如下：

Turning on my engine.
Steering and moving forward!
Rolling on all 4 wheels!

只是調(diào)用了drive（）方法，為什么ignition（）中的內(nèi)容也被打印了那？是哪里使用的不對(duì)嗎？

回答
編輯回答
久不遇

你在drive里面調(diào)用了ignition

2018年8月16日 16:48
編輯回答
怣人
function mixin( sourceObj, targetObj ) {//sourceObj中不在targetObj中的key,添加到targetObj中。
    for (var key in sourceObj) {
// 只會(huì)在不存在的情況下復(fù)制
        if (!(key in targetObj)) {
            targetObj[key] = sourceObj[key];
        }
    }
    return targetObj;
}
var Vehicle = {
    engines: 1,
    ignition: function() {
        console.log( "Turning on my engine." );
    },
    drive: function() {
        this.ignition();//在Car中調(diào)用時(shí)，調(diào)用了Car拷貝的ignition
        console.log( "Steering and moving forward!" );
    }
};
var Car = mixin( Vehicle, {//這是Car
    wheels: 4,
    drive: function() {
        Vehicle.drive.call( this );//調(diào)用了Vehicle.drive并替換了this
        console.log(
            "Rolling on all " + this.wheels + " wheels!"
        );
    }
} );


Car.drive();
2017年7月16日 22:47