es6 class子类对父类重写

class子类对父类重写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class子类对父类重写</title>

</head>
<body>
<div id="ad">

</div>
<div></div>

<script>

    //ES5
    //手机类
    // function Phone(brand,price){
    //     this.brand = brand;
    //     this.price = price;
    // }
    // Phone.phoneName = '手机';
    // //添加方法
    // Phone.prototype.call = function (name) {
    //     return '打电话给' + name;
    // };
    //
    // //智能手机
    // function SmartPhone(brand,price,color){
    //     Phone.call(this,brand,price);
    //     this.color = color;
    // }
    //
    // //设置子构造方法原型
    // SmartPhone.prototype = new Phone();
    // SmartPhone.prototype.constructor = SmartPhone;
    //
    //
    // //声明子类方法
    // SmartPhone.prototype.photo = function(type){
    //     return '拍照' + type;
    // };
    //
    // let huaWei = new SmartPhone('华为',5999,'red');
    // console.log(huaWei);
    // console.log(huaWei.call('小明'));
    // console.log(Phone.phoneName);
    // console.log(huaWei.photo('自动'));

    //ES6
    class Phone{
        static phoneName = "手机";
        constructor(brand,price){
            this.brand = brand;
            this.price = price;
        }
        //方法
        static call(name){
            return '打电话给' + name;
        }
    }

    //智能手机

    class SmartPhone extends Phone{

        constructor(brand,price,color){
            super(brand,price);
            this.color = color;
        }
        //方法
        static photo(type){
            return '拍照' + type;
        }
    }

    let apple = new SmartPhone('苹果',8999,'red');
    console.log(apple);
    console.log(SmartPhone.call('小花'));
    console.log(SmartPhone.phoneName);
    console.log(SmartPhone.photo('自动拍照'));
    console.log(apple.color);

</script>
</body>
</html>
posted @ 2021-06-21 12:34  胡勇健  阅读(293)  评论(0)    收藏  举报