javascript高级(1)

尧子陌

面向过程及面向思想

面向过程

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

面向思想

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

image.png

面向思维的特点

面向过思维特点

  • 抽取对象中公共的属性与行为封装成一个类(模板)
  • 对类进行实例化,获取类的对象

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

  • 属性:对象的特征,在对象中用属性来表示(名词)
  • 方法:对象的行为,在对象中用方法来表示(动词)

在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>

image.png

类的继承

利用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>

image.png

注意事项
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>

image.png

调用普通函数

<!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>

image.png

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

注意: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>

image.png

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>

image.png

阅读 292

保持呼吸 坚持学习

48 声望
3 粉丝
0 条评论

保持呼吸 坚持学习

48 声望
3 粉丝
宣传栏