面向对象

    对象的重要性：
        js底层都是使用对象处理数据的
        封装自定义对象：
            直接量方式
                例：
                    var obj={
                        '属性名':属性值,
                        ....,
                        '方法名':function(){操作},
                    }
            预定义构造函数方式
                    var obj=new Object()
                    obj.属性名=属性值
                    obj.方法名=function(){}
            以上两个方法都有一个缺陷：一次只能创建一个对象
            自定义构造函数方式
                    function 类名(){}
                    var obj=new 类名(实参)
                    优点：所有的属性和方法都保存在一个对象之中
                         每个功能特地得分开写 - 便于维护
                          铁链锁舟 -- 一个方法触发，多个方法联动
                    缺点：
                        对新手不友好

面向对象概念：

        更加注重对象的一种编程开发思想
        跟面向过程对比：
            面向过程：
                过程-开始-结束 ：先干什么再干什么最后干什么 -- 更加注重中间的过程
            面向对象：
                对象(属性和方法)，js万物皆对象 -- 更加注重参与的对象，不关注过程

最佳的创建，添加属性，添加方法的方案

    构造函数方式创建对象
    字面量方式创建对象 -- 同类型对象会重复
    使用工厂函数 -- 无法直观看出对象的类别
    使用自定义构造函数：
        当一个函数被new用来创建 对象了，这个函数就叫构造函数
        new函数：
            构造函数名称首字母要大写
            如果不传递实参，可以省略调用的小括号用e代替
            new的时候做了什么：
                隐形的创建了一个空对象
                将this指向他，this就代表他
                执行函数中的代码
                返回这个对象
    添加方法：
        传递参数：
            同类型的对象方法不是同一个
            将函数定义在全局，方法使用这个函数名称：
                全局的函数容易被覆盖
                原型：
                    将方法添加在原型上
    结论：
        创建对象：
            使用自定义构造函数
        添加属性：
            在构造函数中给this添加
        添加方法：
            将方法添加在原型上

原型

概念：
    对象天生自带的属性.__proto__对应的值是对象
    函数天生自带的属性prototype对应的值是对象
作用：
    原型中的属性和方法默认就能被对象使用
关系：
    构造函数 -- 母
    new出来的对象 - 子
    原型 -父
    

使用面向对象变成步骤

    先定义空构造函数：function Fn(){}
    new他，传实参：let obj=new Fn(实参)
    调用对象的方法：obj.方法名()
    给原型添加对应的方法：Fn.prototype.方法名=function(){}
    给构造函数根据调用语法添加形参：function Fn(形参){}
    在构造函数中，将所有需要用到的标签获取到作为对象的属性，放在this上：
    function Fn(形参){
        this.max=document.ququerySelector(形参)
    }
    给原型的方法中添加事件代码，实现具体效果：
    Fn.prototype.方法名=function(){
            具体效果
    }