ES6 类class 一.面向对象编程二.class的基本使用三.成员属性和成员方法四.静态属性和静态方法五. 面向对象的应用场景

最新推荐文章于 2022-10-24 00:15:13 发布

倾城857

最新推荐文章于 2022-10-24 00:15:13 发布

阅读量343

点赞数 1

本文链接：https://blog.csdn.net/qq_64389035/article/details/121731096

版权

一.面向对象编程

概念

面向对象是一种以对象为中心的编程思想。面向对象是相对于面向过程来讲的，面向对象把相关的数据和方法组织为一个整体来看待，从更高的层次来进行系统建模。

面向过程

面向过程思想强调的是步骤，当碰见问题时，思考的是“我该怎么做”，分析出解决问题所需要的步骤，一步步的去实现。例如：想吃蛋炒饭(面向过程来实现)，首先想到的是我要如何做，包括哪些步骤。比如：起锅烧油，加入鸡蛋，加入米饭，加入调料，翻炒，装盘等。

面向对象

面向对象思想强调的是对象，当碰见问题时，思考的是“我该让谁来做”。这个“谁”其实就是对象。找合适的对象做合适的事情。而对象如何去做(采用什么样的步骤)我们就不关心了，最终把问题解决掉就可以了。

例如：还是想吃蛋炒饭(面向对象来实现)，首先想到的是让谁来帮我做蛋炒饭，比如找厨师来帮我做蛋炒饭。具体厨师如何去做这个蛋炒饭，做饭的步骤是怎么样的我们并不关心。只要最终把蛋炒饭做好就可以了。

不同的编程语言在实现面向对象编程时采用的方式不一样，比如：java、php、python等后端编程语言则使用“类”的方式来实现，而javascript则采用"原型"方式来实现。

类与对象

什么是类？

类是具有相同属性和方法的一类事务的集合，比如：人类、汽车、电脑等

什么是对象？

对象是类中某个具体的个体，比如：张三这个人、你的汽车、我的电脑等

二.class的基本使用

定义类的语法：

class 类名{

//属性

//方法

}

代码示例：

script>
        //定义类：  人类
        class People {
            //属性
            //注意：定义属性时前面不用带let/var
            xingming; //姓名
            sex; //性别
            age; //年龄

            //方法
            //注意：定义方法时前面不用带function
            eat() {
                console.log(`${this.xingming} ${this.sex} ${this.age}正在吃饭`);
            }

            work() {
                console.log(`${this.xingming} ${this.age}正在工作`);
            }
        }

        //实例化类：对象
        let lisi = new People();
        lisi.xingming = '李四';
        lisi.sex = '男';
        lisi.age = 20;
        lisi.eat();
        lisi.work();

        let zhangsan = new People();
        zhangsan.xingming = '张三';
        zhangsan.sex = '男';
        zhangsan.age = 18;
        zhangsan.eat();
    </script>

构造函数方式定义属性

 <script>
        //定义类:人类
        class People {

            //属性
            // xingming;
            // sex;
            // age;

            //方法

            //构造方法:在类实例化时会自动被调用
            constructor(names, sexs, ages) {
                this.xingming = names;
                this.sex = sexs;
                this.age = ages;
                // console.log(names, 'Hello');
            }

            eat() {
                console.log(`${this.xingming} ${this.sex} ${this.age}正在吃饭`);
            }

            work() {
                console.log(`${this.xingming} ${this.age} 正在工作`);
            }
        }

        //实例化类：
        let lisi = new People('李四', '男', 20);
        lisi.eat();
        lisi.work();

        let zhangsan = new People('张三', '女', 19);
        zhangsan.eat();
    </script>

三.成员属性和成员方法

在类实例化时会把类中的基本属性和方法拷贝一份放到对象上，每个对象都具有类中的基本属性和方法，这些基本属性和方法称为成员属性和成员方法，成员属性和成员方法归对象所有。

<script>
    //定义类:人类
    class People {

        //属性
        // xingming;
        // sex;
        // age;

        //方法

        //构造方法:在类实例化时会自动被调用
        constructor(names, sexs, ages) {
            this.xingming = names;
            this.sex = sexs;
            this.age = ages;
            // console.log(names, 'Hello');
        }

        eat() {
            console.log(`${this.xingming} ${this.sex} ${this.age}正在吃饭`);
        }

        work() {
            console.log(`${this.xingming} ${this.age} 正在工作`);
        }
    }

    //实例化类：
    let lisi = new People('李四', '男', 20);
    lisi.eat();
    lisi.work();

    let zhangsan = new People('张三', '女', 19);
    zhangsan.eat();
</script>

四.静态属性和静态方法【重点】

静态属性的用途：当类中某个属性的属性值是固定不变时可以考虑定义成静态属性。

静态属性和静态方法归类所有，全局只有一份，在类的内部不能通过成员方法访问静态属性，在类的外部只能通过类名来直接访问静态属性或静态方法。

代码示例：

<script>
        class News {
            //属性：
            static ntype = ['社会', '体育', '军事', '娱乐', '经济']; //新闻类别

            //方法
            static createOption() {
                let arr = this.ntype;
                let str = '';
                for (let i = 0; i < arr.length; i++) {
                    str += `<option value='${arr[i]}'>${arr[i]}</option>`;
                }

                document.write(`<select>${str}</select>`);
            }
        }

        News.createOption();
    </script>

类的继承

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

类继承的语法：

class 类名 extends 父类名称{

//属性

//方法

}

类的继承时要注意的事项：【重点】

1)、子类没有定义构造方法时默认使用父类的构造方法，如果子类中定义了构造方法则使用子类的构造方法，同时要在子类的构造方法中先调用super()方法；

2)、super()方法可以把父类中的this继承下来的同时给父类中的属性设置属性值；

3)、方法重构/重写:

(1)、什么是方法重构/重写？

当父类中的方法在子类中满足不了需求时需要对父类中的方法进行重构/重写。

(2)、怎样进行方法重构/重写?

在子类中定义一个和父类同名的方法即可。

4)、super既可以当作方法使用可以当作对象使用，super当作对象使用时只能调用父类的方法而不能调用父类的属性；

基本用法

代码案例：

 <script>
        //定义类：人类
        class People {
            constructor(xm, ages, sexs) {
                // console.log('hello...');
                this.names = xm;
                this.age = ages;
                this.sex = sexs;
            }

            eat() {
                console.log(`${this.names} ${this.age} ${this.sex}正在地吃饭`);
            }

            work() {
                console.log(`${this.names} ${this.age}正在工作`);
            }
        }

        //定义类：工人类
        class worker extends People {

        }
        let laoliang = new worker();
        laoliang.eat();

        //定义类：学生类
        class Student extends People {
   
        }

        let xiaoli = new Student('X001', '小李', 20, '男');
        xiaoli.eat();
    </script>

super的用法

代码案例：

 <script>
        //定义类：人类
        class People {
            constructor(xm, ages, sexs) {
                // console.log('hello...');
                this.names = xm;
                this.age = ages;
                this.sex = sexs;
            }

            eat() {
                console.log(`${this.names} ${this.age} ${this.sex}正在地吃饭`);
            }

            work() {
                console.log(`${this.names} ${this.age}正在工作`);
            }
        }

        //定义类：工人类
        class worker extends People {

        }
        let laoliang = new worker();
        laoliang.eat();

        //定义类：学生类
        class Student extends People {
            constructor(xh, xm, nl, xb) {
                // console.log(xh, xm, nl, xb, 111);
                //super()方法可以把父类中的this继承下来的同时给父类中的属性设置属性值；
                super(xm, nl, xb);
                this.xuehao = xh; //学号

            }

            eat() {  //方法重构
                console.log(`姓名：${this.names} 年龄：${this.age} 性别：${this.sex} 正在大口大口中地吃饭`);
            }

            homework() {
                console.log(super.names, this.names, 888);
                super.work(); //super当作对象使用时只能调用父类的方法而不能调用父类的属性；
                this.work();
                console.log(`${this.xuehao} ${this.names} ${this.age} 正在写作业`);
            }
        }

        let xiaoli = new Student('X001', '小李', 20, '男');
        xiaoli.eat();
        xiaoli.homework();
    </script>

五. 面向对象的应用场景

封装工具原理

代码案例：

<script>
        let obj = new JS();
        let math = obj.Math();
        math.ceil();
        math.random();
        obj.Jsq(8, 99, '+');

        //使用面向对象编程实现js的工具方法：
        class JS {
            constructor() {
                this.version = '2.0.0';
            }

            Math() {
                return {
                    ceil() {

                    },
                    random() {

                    }
                };
            }

            Date() {
                return {
                    getTime() {

                    }
                }
            }

            Jsq(m, n, flg) {
                switch (flg) {
                    case '+':
                        return m + n;
                        break;
                }
            }
        }
    </script>

Jquery使用原理

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        $("div").parent().children();
    </script>

倾城857

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 类class 一.面向对象编程二.class的基本使用三.成员属性和成员方法四.静态属性和静态方法五. 面向对象的应用场景

ES6 类class 一.面向对象编程二.class的基本使用三.成员属性和成员方法四.静态属性和静态方法五. 面向对象的应用场景
复制链接

扫一扫