【学习笔记58】JavaScript面向对象

一、认识面向对象

（一）面向过程编程

• 按照程序执行的过程一步一步的完成程序代码

（二）面向对象编程

• 面向对象编程是一种编程的方式/模式
• 官方：对一类具有相同属性和功能的程序代码抽象的描述，实现代码编程
• 对具有相同属性和功能的，抽象类的描述，实现代码编程

    所谓的抽象类就是具有相同属性和功能的事物的描述
        例如1：有一个面四条腿能坐着，有凳子 、床 、桌子  .....
        例如2：有皮有瓤 ，能吃能榨汁，有西瓜 、橘子 、梨...

（三）面向对象的优点

    1. 将所有程序执行需要的数据，以属性的形式存储在对象中
       将所有实现功能需要的代码，以函数的形式存储在对象中
       一个对象中，存储了程序执行需要的所有代码

    2. 优化程序代码 减少冗余内容

    3. 可以防止全局变量污染
        3.1 将之前的全局变量，存储到对象的属性中
        3.2 全局变量容易被其他程序误操作，发生全局变量污染
        3.3 存储在对象中的数据，不容被其他程序误操作

    4. 面向对象编程适用于大型项目，负载程序开发
        4.1 面向对象编程语法，有很多利于大型项目开发的语法形式
        4.2 封装 继承 多态 ...

二、批量生产对象

1. 字面量方式（不能批量生产）

        const obj = {};
        obj.a = 1;
        obj.b = 2;
        console.log(obj);

        const obj1 = {};
        obj1.a = 1;
        obj1.b = 2;
        console.log(obj1);

2. 内置构造函数（不能批量生产）

        const obj = new Object();
        obj.a = 1;
        obj.b = 2;
        console.log(obj);

        const obj1 = new Object();
        obj1.a = 1;
        obj1.b = 2;
        console.log(obj1);

3. 工厂函数方式创建对象

• 工厂函数, 其实就是一个函数
• 手动创建一个对象
• 手动给对象添加属性
• 手动返回一个对象
• 这个方法能够创建对象, 并且批量生产也可以

        function createObj (name, age) {
            // 手动创建一个对象
            const obj = {};

            // 手动向对象内部添加属性
            obj.name = name;
            obj.age = age;

            // 手动返回一个对象
            return obj;
        }

        const o1 = createObj('QF001', 18);
        const o2 = createObj('QF002', 28);
        const o3 = createObj('QF003', 38);
        console.log(o1);
        console.log(o2);
        console.log(o3);

4. 自定义构造函数

• 自定义构造函数, 本质是就是一个函数
• 和new关键字连用的时候, 就叫做构造函数
• 自动创建一个对象
• 手动向创建的对象添加属性
• 自动返回一个对象

        function createObj () {
            // 自动创建出来一个对象

            // 手动向对象添加属性

            // 自动返回一个对象
        }

        const o1 = new createObj();  //这种调用方式, 才是 构造函数
        const o2 = createObj();      //这就是一个普通函数的调用

        console.log(o1);
        console.log(o2);

三、自定义构造函数的书写

    /**
     *  1. 一定是和new关键字连用，如果没有和new连用, 那么他就是一个普通函数
     * 
     *  2. 当一个函数和new关键字连用的时候, 这个函数就被称为自定义构造函数, 这个函数内的 this指向, 指向返回出来对象
     * 
     *  3. 构造函数不能使用给箭头函数，因为箭头函数内部没有this
     * 
     *  4. 构造函数内部不需要 return
     *        return 了基本数据类型, 写了和没写一样
     *        return 了引用数据类型, 写了构造函数就没用了
     * 
     *  5. 书写构造函数时, 首字母建议大写
     *      目的: 仅仅是为了和普通函数区分
     * 
     *  6. 我们构造函数通过new关键字创建出来的对象, 叫做实例化对象, 本质上还是一个对象, 只不过名字上叫做实例化对象(实例对象)
     *     我们把构造函数通过new关键字创建对象的过程叫做实例化
    */

        function createObj(num1, num2) {
            // 此时 this === 将来被返回出去的对象
            this.a = num1;
            this.b = num2;

            // return '我是一个普通字符串'
            // return [1, 2, 3, 4, 5]
        }
        const o1 = new createObj(1, 2);
        const o2 = new createObj(10, 20);
        console.log(o1);
        console.log(o2);

四、构造函数不合理的地方

1、不合理的地方

        function Person (name, age) {
            this.name = name;
            this.age = age;
            this.fn = function () {
                console.log('AAAAAA');
            }
        }
        
        const p1 = new Person('QF001', 18);
        const p2 = new Person('QF002', 19);
        
        console.log(p1);
        console.log(p2);

        p1.fn();
        p2.fn();

        console.log(p1.fn == p2.fn);

案例分析：

• 这样写实际功能也能完成, 但是多次创建对象时，会多次创建功能代码完全相同一个函数，这对内存空间是一种浪费

2、解决方法

        function fn() {
            console.log('AAAAAA');
        }
        function Person(name, age) {
            this.name = name;
            this.age = age;
            this.fn = fn;
            /**
             *  这样写实际功能也能完成, 并且在多次创建的时候
             * 
             *  每次给this.fn赋值时, 都会去找到fn函数
             * 
             *  然后多个对象的this.fn 的引用地址都是一个
            */
        }

        const p1 = new Person('QF001', 18);
        const p2 = new Person('QF002', 19);
        console.log(p1);
        console.log(p2);

        p1.fn();
        p2.fn();

        console.log(p1.fn == p2.fn);

五、ES6构造函数

1. 函数体和原型, 是需要分开写
2. 构造函数如果不和new一起连用, 不会报错
3. ES6类的语法: class 类名{xxxxx}

        class Stu {
            constructor(name) {
                //和构造函数的函数一样
                this.name = name;
            }

            // 这里位开始 全都是原型
        }
        const s1 = new Stu('QF001');
        console.log(s1);