js 面向对象 ES5 AND ES6

2018-08-06 09:10:58来源：博客园阅读 ()

1. ES5实现

父类：

// 职员类
function Employees(id,name,salary) {  // 属性
    this.id = id;
    this.name = name;
    this.salary = salary;
}
Employees.prototype.work = function (dish) { // 方法
    return dish
};

子类继承父类：

function Waiter(id, name, salary) {
    Employees.call(this, id, name, salary) //  使用call, 继承父类
}
Waiter.prototype = Object.create(Employees.prototype);// 继承父类原型
Waiter.prototype.constructor= Waiter; // 设置constructor指向自己
Waiter.prototype.work = function (arg) { // 重写原型上的方法
    if (arg instanceof Array){
        return arg
    } else { //上菜行为
        console.log('not a array')
    }
};

2. ES6实现

父类：

// 职员类
class Employees {
    constructor(id, name, salary){ // 属性
        this.id = id;
        this.name = name;
        this.salary = salary;
    }
    work(dish){  // 方法
        return dish
    }
}

子类继承：

// Waiter
class Waiter extends Employees { // 使用关键字extends，继承父类
    constructor(...arg){ // 继承父类
        super(...arg)
    }
    work(arg){  // 重写父类中work方法
        if (arg instanceof Array){ //数组的话，记录点菜
            return arg
        } else { //上菜行为
            console.log('上菜')
        }
    }
}