[JavaScript知识库] ES5构造函数实现继承和ES6中class的类继承

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> ES5构造函数实现继承和ES6中class的类继承 -> 正文阅读

[JavaScript知识库]ES5构造函数实现继承和ES6中class的类继承

1.ES5构造函数实现继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象继承</title>
</head>
<body>
    <script>
        //手机
        function Phone(brand,price){
            this.brand=brand;
            this.price=price;
        }

        Phone.prototype.call = function(){
            console.log("我可以打电话");
        }
        //继承
        function SmartPhone(brand,prise,color,size){
            Phone.call(this,brand,prise);
            this.color=color;
            this.size=size;
        }
        //设置子集构建函数原型
        SmartPhone.prototype = new Phone;
        SmartPhone.prototype.constructor=SmartPhone;

        //声明子类方法
        SmartPhone.prototype.photo=function(){
            console.log("我可以拍照");
        }

        SmartPhone.prototype.playGame=function(){
            console.log("我可以玩游戏");
        }

        const chuizi = new SmartPhone('锤子',1999,'黑色','5.5inch');
        console.log(chuizi);


    </script>
</body>
</html>

2.ES6中class的类继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类继承</title>
</head>
<body>
    <script>
        class Phone{
            //构造方法
            constructor(brand,price){
                this.brand=brand;
                this.price=price;
            }
            //父类的成员属性
            call(){
                console.log("我可以打电话");
            }
        }

        class SmartPhone extends Phone{
            //构造方法
            constructor(brand,price,color,size){
                super(brand,price);
                this.color=color;
                this.size=size;
            }
            //子类中独有的方法
            photo(){
                console.log("拍照");
            }
            playGame(){
                console.log("玩游戏");
            }
        }

        const xiaomi =new SmartPhone('小米',8888,'黑色','55inch');
        console.log(xiaomi);
    </script>
    
</body>
</html>