javascript高级(1)

面向过程及面向思想

面向过程

面向过程就是分析出问题所需要的步骤，然后用函数把这些步骤一个个的实现，使用的时候一个个依次调用就可以了。

面向思想

面向过程就是把事务分成一个个对象，由对象之间分工与合作。

面向思维的特点

面向过思维特点

抽取对象中公共的属性与行为封装成一个类（模板）
对类进行实例化，获取类的对象

对象是一组无序的相关属性与方法的集合，所有的事物都可以是一个对象。例如字符串数字布尔值等等。

属性：对象的特征，在对象中用属性来表示（名词）
方法：对象的行为，在对象中用方法来表示（动词）

类

在ES6的过程中，引进类的概念。类抽取对象公共的部分，类泛指一大类。

创建类与对象

注意事项

实例化对象中必须要有new 只要有new关键字类的构造函数constructor才会执行。
constructor()是类的构造函数，用于传递参数，返回实例化对象。
通过class创建类类名首字母大写，后面不用加小括号
类里面的所有函数不需要加function,多个函数之间不需要加逗号。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>创建类与对象</title>
    </head>
    <body>

    </body>
    <script>
        // 创建类
        class People {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            say(sing) {
                console.log(sing)
            }
        }

        // 创建实例化对象
        let YaoZiMo = new People('尧子陌', "18");
        console.log(YaoZiMo.name);
        console.log(YaoZiMo.age);
        YaoZiMo.say('两只蝴蝶')
    </script>
</html>

类的继承

利用extends可让子类继承父类

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>类的继承</title>
    </head>
    <body>
    </body>
    <script>
        // 类的继承
        class Father {
            constructor() {

            }

            money() {
                console.log(100)
            }
        }

        // 继承父类中的方法与属性
        class Son extends Father {

        }

        // 创建子类的实例化对象
        var son = new Son();
        son.money()
    </script>
</html>

注意事项
1.继承中，如果实例化子类中输入一个方法，先看子类有没有这个方法，如果有就先执行子类的
2.继承中，如果子类里面没有这个方法，就去父类中查找（就近原则）
3.如果子类想使用父类中的方法，就要利用好super()调用父类的构造函数，super必须在this之前调用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>super关键字</title>
    </head>
    <body>
    </body>
    <script>
        // 父类
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;

            }
            sum() {
                console.log(this.x + this.y)
            }
        }
        // 子类
        class Son extends Father {
            constructor(x, y) {
                super(x, y) //调用父类中的构造函数
            }
        };
        // 创建子类的实例化对象
        let son = new Son(1, 2);
        son.sum()
    </script>
</html>

调用普通函数

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>super调用普通函数</title>
    </head>
    <body>

    </body>
    <script>
        // 父类
        class Father {
            say() {
                return 'hello word'
            }
        }

        // 子类
        class Son extends Father {
            say() {
                console.log(super.say())
            }
        }
        var son = new Son();
        son.say()
    </script>
</html>

子类继承父类的方法同时扩展自己的方法

注意：super（）必须在子类构造函数中的this之前调用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>子类继承父类的方法 同时扩展子类的方法 </title>
    </head>
    <body>

    </body>
    <script>
        // 父类 有加法方法
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y)
            }
        }

        // 子类

        class Son extends Father {
            constructor(x, y) {
                // super（）方法必须在子类的this之前进行调用
                super(x, y)
                this.x = x;
                this.y = y;
            }
            subduction() {
                console.log(this.x - this.y)
            }
        }

        // 对子类进行实例化 获取类的对象
        var son = new Son(5, 3);
        // 子类调用父类的方法
        son.sum()

        son.subduction()
    </script>
</html>

ES6中的类和对象的三个注意点。

1.在ES6中类没有变量提升，所以必须先定义类，才能通过实例化对象
2.类里面的公共属性与方法一定要加this
3.constructor里面的this指向实例化对象，方法里面的this指向这个方法的调用者

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>使用类的注意事项</title>
    </head>

    <body>
        <button type="button" class="bth">点击</button>
    </body>
    <script>
        var that;
        var _that;
        class People {
            constructor(name, age) {
                that = this;
                console.log(this)
                this.name = name;
                this.age = age;
                this.bth = document.querySelector('button');
                this.bth.onclick = this.sing;
            }

            sing() {
                console.log(this) //里面的this指向bth按钮
                console.log(that.name) //that指是constructor中的this
            }
            dance() {
                _that = this;
                console.log(this) //此时的this指向实例化对象 因为实例化对象调用了dance这个函数

            }
        }

        // 创建类
        var people = new People('尧子陌');
        console.log(that === people)
        people.dance()
        console.log(_that === people)
    </script>

</html>