面向对象-类成员/ES6-面向对象-constructor构造器/继承extends/重写override-`super`/构造方法重写/面向对象的案例-TAB栏切换/创建元素继承

01-面向对象-类成员

    <script>
        // 类成员：member，能够直接写在类的{}里面的内容（写的内容的上级一定是{}）

        // 定义类
        class Student {
            // 类成员：属性（变量）和方法（函数）
            /*
                属性：变量，不需要let
                方法：函数，不需要function
            */

            // 属性
            name = '张三'
            age             // 值：undefined

            // 方法
            study() {
                // 有this：本质是有function关键字（不是箭头函数）
                console.log(this.name + '今年' + this.age)
            }
        }

        const s = new Student()
        console.log(s)

        // 正常对象访问即可：没有特殊性
        console.log(s.name, s.age)
        s.study()

        // CRUD
        s.gender = 'male'
        s.age = 18
        delete s.name

        // 小结
        // 类成员：属性和方法
        // 属性作用：保存数据
        // 方法作用：数据加工

        // 属性保存在new出来的对象里面，方法自动放到原型对象中
    </script>

注意：
// 类成员：属性和方法
// 属性作用：保存数据
// 方法作用：数据加工
// 属性保存在new出来的对象里面，方法自动放到原型对象中
// 类成员：属性（变量）和方法（函数）
属性：变量，不需要let
方法：函数，不需要function

02-ES6-面向对象-constructor构造器

    <script>
        // 构造器：constructor()特点是，只要new类，new出来的对象会第一时间自动调用constructor方法

        class Student {
            // 构造器
            // 作用：给属性赋值，一般都有形参
            constructor(name, age) {
                console.log('我执行了')
                console.log(name, age)

                // 给属性赋值：任何时候任何地方访问属性，必须要对象参与
                this.name = name
                this.age = age
            }
        }

        new Student()

        // new 类名 和 new 类名()：之前没有区别，是因为没有constructor
        // new 类名()  括号就是对应constructor的() 传参数给constructor的

        const s1 = new Student('张三', 18)
        console.log(s1)


        const s2 = new Student('李四', 18)
        console.log(s2)

        // 小结
        // 1. 如果想要让类产生的对象不一样：数据不相同，增加一个constructor方法，用来给属性做初始化

        // 2. constructor()产生对象后，对象自己调用：new的时候
        // s2.constructor()     // 报错：不允许调用
    </script>

注意：
1.构造器：constructor()特点是，只要new类，new出来的对象会第一时间自动调用constructor方法
2.作用：给属性赋值，一般都有形参
3. new 类名 和 new 类名()：之前没有区别，是因为没有constructor
new 类名() 括号就是对应constructor的() 传参数给constructor的
// 1. 如果想要让类产生的对象不一样：数据不相同，增加一个constructor方法，用来给属性做初始化
// 2. constructor()产生对象后，对象自己调用：new的时候
// s2.constructor() // 报错：不允许调用

03-ES6-面向对象-继承extends-(语法： class 子类 extends 父类{})

    <script>
        // 面向对象三大特点：封装、继承和多态

        // 继承：体现代码的复用

        // 老师跟学生都有姓名和性别，都需要初始化
        // 可以将公共代码形成一个独立的类：Person 
        class Person {
            specialName = 'Person'
            constructor(name, age) {
                console.log('我执行了')
                this.name = name
                this.age = age
            }
        }

        // 凡是人类都需要用到姓名和年龄：老师和学生不例外
        // 为了节省初始化name和age属性的代码：可以让学生类和老师类都继承Person类
        // 语法： class 子类 extends 父类{}

        class Teacher extends Person { }
        class Student extends Person { }

        // 实例化的时候：实例化子类，不要实例化父类
        const t = new Teacher('张三', 30)
        console.log(t)

        // 继承的效果：子类拥有父类的成员（属性或者方法），可以直接使用：实现了代码的复用（正是因为继承的继承：才让面向对象能够非常强大，实现代码高级复用：框架存在的本质）


        const s = new Student('李四', 28)
        console.log(s)
    </script>

注意：
1.面向对象三大特点：封装、继承和多态
2.继承：体现代码的复用
3.语法： class 子类 extends 父类{}
4.实例化的时候：实例化子类，不要实例化父类
5.继承的效果：子类拥有父类的成员（属性或者方法），可以直接使用：实现了代码的复用（正是因为继承的继承：才让面向对象能够非常强大，实现代码高级复用：框架存在的本质）

04–ES6-面向对象-继承的效果

   <script>
        // 体验继承和实际开发的应用
        class Person {
            specialName = 'Person'
            constructor(name, age) {
                console.log('我执行了')
                this.name = name
                this.age = age
            }

            eat() {
                console.log('吃东西')
            }
            drink() {
                console.log('喝东西')
            }
        }

        // 凡是人类都需要用到姓名和年龄：老师和学生不例外
        // 为了节省初始化name和age属性的代码：可以让学生类和老师类都继承Person类
        // 语法： class 子类 extends 父类{}

        // 继承：解决的公共代码的复用问题
        class Student extends Person { }

        // 任何时候开发绝对不是为了单纯的继承：继承了公共代码之外还要有自己的功能
        class Teacher extends Person {
            study() {
                console.log(this.name + "沉迷代码")
            }
        }
        // 实例化对象
        const t = new Teacher('前端', 30)
        console.log(t)

        t.eat()


        // 实战思想
        // 1. 公共代码放父类中
        // 2. 子类继承父类（公共代码的使用权），一定会有自己的内容要处理（额外的方法之类）

    </script>

05-ES6-面向对象-重写override（覆盖）

    <script>
        // 重写：父类与子类拥有同名的属性和方法

        class Person {
            name = 'person'

            makeMoney() {
                console.log('我靠种田为生')
            }
        }

        class NewPerson extends Person {
            // 自己也有name属性，也有makeMoney()方法
            name = 'newPerson'

            makeMoney() {
                console.log('我靠代码为生')
            }
        }

        const np = new NewPerson()
        console.log(np)

        // 证明属性的覆盖性
        console.log(np.name)    // 证明成功：newPerson

        // 证明方法的存在性
        np.makeMoney()          // 访问的是子类的：就近原则

        // 如何访问到父类的？通过原型的上级去找
        np.__proto__.makeMoney()    // 还是自己的原型中

        np.__proto__.__proto__.makeMoney()  // 可以访问：没有被覆盖（一般覆盖）

        // 重写：override，目的之一就是为了访问的时候访问自己的（逻辑发生了修改）：针对特殊性
    </script>

注意：
1. 重写具有覆盖性
2.访问的是子类的：就近原则

06-ES6-面向对象-重写override-super(在原基础上增加)

    <script>
        // 重写：父类与子类拥有同名的属性和方法

        class Person {
            name = 'person'

            makeMoney() {
                console.log('我靠键盘为生')
            }
        }

        // 需求：子类要重写父类的makeMoney方法，要求在原来的基础之上修改

        // super关键字：在子类重写父类的方法中（makeMoney），调用父类的被重写的方法：super代表父类对象（上级对象）
        class Student extends Person {

            // 重写的目的：在原来的基础上做提升（扩展||优化）
            makeMoney() {
                // 调用父类被重写的方法
                // super.被重写方法()
                super.makeMoney()

                console.log('我在原来的基础上学会了敲代码')
            }
        }

        const s = new Student()
        s.makeMoney()

    </script>

注意：
1.super关键字：在子类重写父类的方法中（makeMoney），调用父类的被重写的方法：super代表父类对象（上级对象）
2.重写的目的：在原来的基础上做提升（扩展||优化）
3.// 调用父类被重写的方法
// super.被重写方法()

07-ES6-面向对象-重写-构造方法重写

    <script>
        // 构造方法的重写
        class Person {
            constructor(name, age) {
                this.name = name
                this.age = age
            }
            // 还有其他公共代码
        }

        // 学生有姓名和年龄，学生还有学号
        class Student extends Person {
            // 有学号需要初始化：原来的构造方法不够用：扩展
            // 重写构造方法
            constructor(name, age, stuno) {
                // 构造方法被重写：必须先调用父类的构造方法
                // super.constructor()  // 依然报错：super.方法名()是因为不知道被重写的方法名字叫什么：但是constructor构造方法名字是确定，所有系统简化了这种调用方式：super()

                // super()调用必须要在使用this之前 
                super(name, age)

                // 构造方法的重写是实际开发中应用最多的

                // 补充：学号
                this.stuno = stuno

                // super(name, age) // 报错：必须在使用this之前
                // 习惯：一旦重写了构造方法：第一行代码写调用父类的构造方法
            }
        }

        const s = new Student('安琪拉', 18, '000001')
        console.log(s)

        // 小结
        // 重写需要考虑构造方法的特殊性：如果构造方法被重写
        // 1. 一定需要在子类的构造方法，调用父类的构造方法
        // 2. 调用方式：super(传入必要的参数)
    </script>

注意：
1.super()调用必须要在使用this之前
2. // 重写需要考虑构造方法的特殊性：如果构造方法被重写
// 一定需要在子类的构造方法，调用父类的构造方法
// 调用方式：super(传入必要的参数)

08-面向对象案例-tab栏切换

<!DOCTYPE html>
<html lang="zh-CN">

<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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .hd {
            height: 45px;
        }

        .hd span {
            display: inline-block;
            /*将行内元素转换成行内块元素，宽高才起作用*/
            width: 90px;
            background-color: pink;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }

        .hd span.current {
            /*交集选择器，标签指定式选择器*/
            background-color: purple;
            /*紫色*/
        }

        .bd li {
            height: 255px;
            background-color: purple;
            display: none;
            /*设置隐藏*/
        }

        .bd li.current {
            display: block;
            /*显示*/
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="hd">
            <span class="current">体育</span>
            <span>娱乐</span>
            <span>新闻</span>
            <span>综合</span>
        </div>
        <div class="bd">
            <ul>
                <li class="current">我是体育模块</li>
                <li>我的娱乐模块</li>
                <li>我是新闻模块</li>
                <li>我是综合模块</li>
            </ul>
        </div>
    </div>

    <script>
        // 需求：鼠标移入到对应的tab栏（菜单）上下都有切换内容

        // 1. 采用面向对象：一个类
        class TabExchange {
            // 2. 有没有数据需要初始化：获取span，获取所有li：constructor()
            constructor(selector) {
                // 数据需要跨函数访问：类中所有的方法最终都是由new出来的对象调用：里面的this都是同一个，因此可以将数据保存到对象this里面
                // 2.1 获取box
                this.ele = document.querySelector(selector)
                // console.log(this.ele)
                // 2.2 获取所有的span
                this.spans = this.ele.querySelectorAll('span')
                // 2.3 获取所有的li
                this.lis = this.ele.querySelectorAll('li')
            }

            // 3. 给所有的span做鼠标移入事件：新开一个方法来实现这个功能
            mouseover() {
                console.log(this)
                // let that = this

                // 3.1 遍历所有的span：给span添加鼠标移入事件
                this.spans.forEach((span, index) => {
                    span.onmouseover = () => {
                        // console.log(this)
                        // 3.2 事件处理：排他所有的span，当前有类current，其他没有
                        this.spans.forEach((item) => {
                            item.classList.remove('current')
                        })

                        span.classList.add('current')

                        // 3.3 事件处理：排他所有的li，当前span对应的li有current，其他没有
                        this.lis.forEach((item) => {
                            item.classList.remove('current')
                        })

                        this.lis[index].classList.add('current')
                    }
                })
            }
        }

        // 4. 调用类：实例化，调用对应的方法（建议大家先做）
        let te = new TabExchange('.box')
        te.mouseover()
    </script>
</body>

</html>

09-面向对象案例-创建元素-继承

• 案例：①

<!DOCTYPE html>
<html lang="zh-CN">

<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>Document</title>

    <style>
        .current {
            /* 浮动 */
            float: left;

            /* 宽高 */
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 20px solid skyblue;

            /* 内容居中 */
            text-align: center;
            line-height: 200px;

            /* 字体 */
            font-size: 24px;
        }
    </style>
</head>

<body>
    <script>
        // 使用面向对象方法，实现动态的创建元素，创建好的元素可以放到指定的元素后面做孩子（父元素.appendChild(子元素)

        // 1. 上来先定义一个类：CreateElement
        class CreateElement {
            // 2. 有没有数据要初始化：有，创建元素：constructor()，创建元素、添加指定的类、添加指定的文本：元素要给其他方法用，用this保存
            constructor(tag, className, text) {
                // 2.1 创建元素，根据tag来创建，存入到this中
                this.ele = document.createElement(tag)
                // console.log(this)
                // 2.2 给元素添加类
                this.ele.classList.add(className)
                // 2.3 给元素添加文本
                this.ele.innerText = text
            }

            // 3. 增加一个方法：appendTo()可以让用户指定父元素，将子元素放到父元素的里面当做最后一个孩子
            appendTo(selector) {
                // 3.1 获取父元素
                // 3.2 将this中的ele元素添加到父元素去
                document.querySelector(selector).appendChild(this.ele)
            }
        }

        // 4. 实例化调用
        let div = new CreateElement('div', 'current', '做人，死了也挺好')
        div.appendTo('body')

        new CreateElement('span', 'current', '做人，活着也挺好').appendTo('body')

    </script>
</body>

</html>```

<br>

* 案例②：

```javascript
<!DOCTYPE html>
<html lang="zh-CN">

<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>Document</title>

    <style>
        .current {
            /* 浮动 */
            float: left;

            /* 宽高 */
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 20px solid skyblue;

            /* 内容居中 */
            text-align: center;
            line-height: 200px;

            /* 字体 */
            font-size: 24px;
        }
    </style>
</head>

<body>
    <script>
        // 使用面向对象方法，实现动态的创建元素，创建好的元素可以放到指定的元素后面做孩子（父元素.appendChild(子元素)

        // 1. 上来先定义一个类：CreateElement
        class CreateElement {
            // 2. 有没有数据要初始化：有，创建元素：constructor()，创建元素、添加指定的类、添加指定的文本：元素要给其他方法用，用this保存
            constructor(tag, className, text) {
                // 2.1 创建元素，根据tag来创建，存入到this中
                this.ele = document.createElement(tag)
                // console.log(this)
                // 2.2 给元素添加类
                this.ele.classList.add(className)
                // 2.3 给元素添加文本
                this.ele.innerText = text
            }

            // 3. 增加一个方法：appendTo()可以让用户指定父元素，将子元素放到父元素的里面当做最后一个孩子
            appendTo(selector) {
                // 3.1 获取父元素
                // 3.2 将this中的ele元素添加到父元素去
                document.querySelector(selector).appendChild(this.ele)
            }
        }

        // 4. 实例化调用
        // let img = new CreateElement('img', 'current', '')   // 图片的核心是src：原来没有
        // img.appendTo('body')

        // 原来的CreateElement这个类的绝大部分功能都已经实现好了：现在就缺图片的src
        // 另外：CreateElement是创建所有元素，包含图片

        // 发现：新需求只要用到原来的代码，又需要修改一点点：继承extends，重写（扩展src属性）

        // 1. 创建一个新类：CreateImg 继承 CreateElement
        class CreateImg extends CreateElement {
            // 2. 初始化有问题：重写父类的构造函数（方法）：constructor
            constructor(src, className) {
                // 2.1 先执行父类的构造方法：super('img',className,'')
                super('img', className, '')
                // console.log(this.ele)
                // 2.2 扩展src功能
                this.ele.src = src
            }
        }

        // 测试
        let img = new CreateImg('images/b1.jpg', 'current')

        img.appendTo('body')

        // 创建div：跟img没有关系
        let div = new CreateElement('div', 'current', '做人还是活着吧')
        div.appendTo('body')

    </script>
</body>

</html>