一, 前端工作中 想要使用面向对象 （封装+继承） 两套方案

1. 难 通用 es5

构造函数+原型 旧一点点的方式

    <script>
        /*
        1. 构造对象 来创建对象
        2. 对象 两种信息
            属性
            方法
        */ 
        es5 原型链方式实现  面向对象
        function person (){
            this.name = '八戒';
            this.age = '老家伙';
        }
        原型链
        person.prototype.say = function (){
            console.log(this.name, this.age);
        }
        调用
        const ps = new person()
        ps.say()
    </script>

2. 简单 新方案 es6

（高级的js语法标准） class-类 简洁的语法来实现面向对象功能

    <script>
        /*
        1. 构造对象 来创建对象
        2. 对象 两种信息
            属性
            方法
        */ 
        
        es5 原型链方式实现  面向对象
        function person (){
            this.name = '八戒';
            this.age = '老家伙';
        }
        原型链
        person.prototype.say = function (){
            console.log(this.name, this.age);
        }
        调用
        const ps = new person()
        ps.say()
    </script>

3. es6 的class 简洁 好用

让我们来选择实现面向对象 优先选择 es6 class

4. es6 关键字

class

1. 新建一个类

constructor

1. 接收 new 一个类的时候传递的参数

extends

1. 子类要继承父类
2. 默认情况 实现了 子类继承父类的属性和方法

super

1. 当子类写了 extends同时 还写了 构造器 constructor

2. 作用 - 调用了父类的构造器 方便给子类的属性赋值

类的基本使用-构造器

    <script>

        class person {
            // 构造器
            constructor (name,color){
                this.name = name
                this.color = color
            }

            say (){
                console.log(this.name, this.color);
            }
            fiy (){
                console.log(this.name, '芜湖');
            }
        }

        const ps = new person('八戒', '瑟啊')
        console.log(ps);
        ps.say()
        ps.fiy()
    </script>

类的方式来实现继承

    <script>
        /* 
        父构造函数 Person 
        1 属性 name = "父亲"
        2 方法 say 说话
  
        儿子 去继承 父亲
        1 属性 
        2 方法
         */
  
        //  function Person() {
        //    this.name="父亲";
        //  }
        //  Person.prototype.say=function(){
        //    console.log(this.name,"父亲的say方法");
        //  }
  
        //  function YellowPerson() {
        //    Person.call(this);
        //  }
  
        //  YellowPerson.prototype.say=Person.prototype.say;
  
        // es6 类去实现继承
        class Person {
          name = '父亲';
          say() {
            console.log(this.name, '父亲的say方法');
          }
        }
  
        // 直接就实现了 继承父亲的属性和方法 ！！！！
        class YellowPerson extends Person {}
        // 儿子实例 拥有 父亲 name属性和父亲的 say方法
        const yp = new YellowPerson();
        console.log(yp);
      </script>

类的方式实现继承并添加

    <script>
        /*
        对于子类 
        1. 如果你写了  extends  而且还写了  constructor
            那么在我们的  constructor  必须调用 super 固定语法!!!!

        2. 为什么 之前只写了 extends  不用写 super  是因为我们没有写 constructor
        */ 
        class Person{
            constructor (name, color) {
                this.name = name
                this.color = color
            }
        }

        class newPerson extends Person {
            constructor(name, color, width, height){
                // 默认代码
                super(name, color)  // 调用父亲的构造器  給儿子  添加属性
                this.width = width
                this.height = height
            }
        }

        const np = new newPerson('和尚', 'yellow', 13, 14)
        console.log(np);
    </script>