js 实现new操作符以及继承

js 实现new操作符

new 干了啥?

来自MDN:
new 关键字会进行如下的操作:

  1. 创建一个空的简单JavaScript对象(即{});
  2. 链接该对象(设置该对象的constructor)到另一个对象 ;
  3. 将步骤1新创建的对象作为this的上下文 ;
  4. 如果该函数没有返回对象,则返回this。
function CustomNew(fn) {
    const obj = {}; //1
    obj.__proto__ = fn.prototype;//2
    const result = fn.call(obj, ...arguments);//3
    if (typeof result === "object") {//4
        return result;
    } else {
        return obj;
    }
}

其中,prototype是函数独有的属性。
函数.prototype.constructor = 函数
实例对象的原型就是函数的原型对象:obj.proto = fn.prototype

继承

既然已经实现了new,那对于es6的特性class的继承,也应该实现以下。

function Animal (weight) {
	this.weight = weight;
	...//
}
Animal.prototype.sleep = function(){}

function Dog(weight,food){
	Animal.call(this,weight);//传入子类实例的this,获取到对应的属性
	this.food = food;
}
Dog.prototype.eat = function(){
	console.log(`吃${this.food}`);
}
Object.setPrototypeOf(Dog.prototype,Animal.prototype)//等价于Dog.prototype.__proto__ = Animal.prototype
const dog = new Dog(20,'骨头')

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值