javascript --- > 混入

博客介绍了JavaScript的混入方式,包括显示混入、寄生继承和隐式混入,还给出了参考资料,即《你不知道的JavaScript》(上卷)P135 - P140。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

显示混入:

function mixin(sourceObj, targetObj){
    for(var key in sourceObj){   // 遍历source中的所有属性
        if(!(key in targetObj)) {  // 找到targetz中没有的属性
            targetObj[key] = sourceObj[key];
        }
    }
    
    return targetObj;
}

var Vehicle = {
    engines: 1,
     
    iginition: function() {
        console.log("Turning on my engine.");
    },
     
    drive: function(){
        this.ignition();
        console.log("Steering an moving forward!" );
    }
};

var Car = mixin( Vehicle, {
    wheels: 4,
     
    drive: function() {
        Vehicle.drive.call( this);
        console.log(" Rolling on all " + this.wheels + " wheels!");
    }
});

寄生继承:

// 既是显式的又是隐式的
function Vehicle() {
    this.engines = 1;
}
Vehicle.prototype.iginition = function() {
    console.log("Turning on my engine.");
}
Vehicle.prototype.drive = function() {
    this.ignition();
    console.log("Steering and moving forward!");
};

// "寄生类"Car
function Car(){
    var car = new Vehicle();
     
    car.wheels = 4;
     
    var vehDrive = car.drive;
   
    car.drive = function(){
         vehDrive.call(this);
         console.log("Rolling on all" + this.wheels + "wheels!);
     }
     return car; 
}
var myCar = new Car();

myCar.drive();

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

隐式混入:

var Something = {
    cool: function() {
         this.greeting = "Hello World";
         this.count = this.count ? this.count + 1: 1;     // 存在count,次数加1,否则初始值为1
     }
};
Something.coll(); 
Something.greeeting = "Hello World";
Something.count = 1;

var Another = {
    cool: function() {
        Something.cool.call(this);  // 执行Something.cool,作用域是Another的
    }
}; 
Another.cool();
Another.greeting = "Hello World";
Another.count = 1;  // 注.Another.count 和 Something.count不共享状态.

参考《你不直到的JavaScript》(上卷) P135~P140

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值