ES5继承实现

ES6版本继承

class Car {
    constructor(color) {
        this.color = color;
    }

    static yideng = "京城一灯";
}

class Cruze extends Car {
    constructor(color) {
        super(color);
    }
}
const cruze = new Cruze("白色");

console.log(cruze); // Cruze { color: '白色' }
console.log(cruze instanceof Cruze); // true
console.log(cruze instanceof Car); // true

1. 实例cruze的是class Cruze，

ES5继承

function Car(color) {
    this.color = color;
}
Car.myname = "京城一灯";
Car.prototype.x = function () {
    console.log("父类方法");
};

function Cruze(color) {
    Car.call(this, color);
}

Cruze.prototype = Object.create(Car.prototype, {
    constructor: {
        value: Cruze,
        writable: false,
    },
});

Object.entries(Car).forEach(([key, value]) => {
    Cruze[key] = value;
});
const cruze = new Cruze("白色");
console.log(cruze);
console.log(cruze instanceof Cruze);
console.log(cruze instanceof Car);

ES6 Product 实现

class Product {
    
    static count = 0;
    
    constructor(name, unitPrice, number) {
        this.name = name;
        this.unitPrice = unitPrice;
        this.number = number;
        Product.count++;
    }
    
    get totalPrice() {
        return this.number + this.unitPrice
    }
    
    increase() {
        return this.number++;
    }
}

console.log(new Product("123123", 10, 2))

ES5实现

解决的问题

1. Class暂存性死区问题
2. 只能被new调用
3. this上的 totalPrice问题，且不可枚举
4. 类上方法不能被new

实现

var Product = (function () {
    function Product(name, unitPrice, number) {
        if(Object.getPrototypeOf(this) !== Product.prototype) {
            throw new TypeError("Class constructor Product cannot be invoked without 'new'")
        }
        
        this.name = name;
        this.unitPrice = unitPrice;
        this.number = number;
        Product.count++;

     
    }
    
    Product.count = 0;

    Object.defineProperty(Product.prototype, "totalPrice", {
        get() {
            return this.number * this.unitPrice
        },
        enumerable: false
    })
    
    Object.defineProperty(Product.prototype, "increase", {
        enumerable: false,
        value: function () {
            if(Object.getPrototypeOf(this)=== Product.prototype.increase.prototype) {
                throw new TypeError("increase is not a constructor")
            }
            this.number++;
        }
    })
     
    return Product;
})()

console.log(new Product("123123", 10, 2))