我理解的

面向对象

我相信在大多人不了解前端的时候 ,都认为的是写代码考的都是数理化逻辑 ,刚刚开始入行的时候我也是这样认为的, 后面通过查找学习了后发现完完全全不是,每个小的功能是逻辑写出来,可是你的思想却不是.每一个程序员写出来的代码都不是完全一样的,这也就是思想造成的 ,而有一个好的建模思想对你的学习,对框架和项目的理解更加的快速

什么是面向对象

面向对象是一种编程范式的思想 注意是一种思想 是比作用域更加高纬度的开发思想
面向对象是一种对现实世界理解和抽象的方法，把相关的数据和方法组织为一个整体来看待（对象） ，从更高的层次（类）来进行系统建模，更贴近事物的自然运行模式
我们的JavaScript是一个多范式的编程语言有很多的开发方式
1.过程式:从上到下依次执行
2.面向对象:从类开始构造
3.函数式:通过数学计算进行开发
我们可以怎么理解面向对象呀可以看下面的图

思考时进行建模，写代码时，先写超类，再写父类，再写子类，最后实例化（自顶向下，先建模，再实现）

三大特性

1. 封装性： 声明和操作被封装在了类的内部
2. 复用性：同一个类可以多次创建不同对象（继承？组合）
3. 多态性：同一个类创建的对象可以有不同变化

这么说很难理解
我是通过了一个项目更加了解了这种思想 代码都是都练会的不是看会的

这是简易版本主要是体验思想
我把这个项目分成了三个类
第一是先把每个月的第一天和最后一天和上个月的时间取到然后
第二因为是6*7的就把每个月和上个月的最后几天和下个月的前天的数据取出来
第三就是通过数据驱动的思想 把页面渲染 再给他添加事件

//先把关键的三天取出来
        function DateTransfer(date = new Date()) {
    // 当月第一天
    const first = new Date(date)
    first.setDate(1)

    // 上个月的最后一天
    const lastOfLast = new Date(date)
    lastOfLast.setDate(0)

    // 当月的最后一天
    const last = new Date(date)
    last.setMonth(last.getMonth() + 1)
    last.setDate(0)
    return {
        first,
        lastOfLast,
        last
    }
}

这里就是取出数据

    // 先拿到那三个 标志日期
    // 以 6 月为例
    // 第一天 当月最后一天 上个月最后一天
    const { first, last, lastOfLast } = DateTransfer(date)
    const list = []
    // 上个月的日期
    // 本月第一天是星期几？4 -> 上个月还剩 4-1=3 天要展示
    // getDay 获取到的数字，是  0 - 6 , 0 代表星期天
    // 这里用的第一天
    let firstDay = first.getDay()
    if(firstDay === 0){
      // 把 0 转成中国人熟悉的 7 星期天
      firstDay = 7
    }
    for (let i = firstDay - 1; i > 0; i--) {
        // 3 2 1  -> 2 1 0
        // newDate 重新调用构造函数，一定要生成一个新的日期
        // 这里用的最后一天
        const newDate = new Date(lastOfLast)
        // lastOfLast.getDate() 得到上个月最后一天的日期数 // 31
        newDate.setDate(lastOfLast.getDate() - (i - 1))
        list.push(newDate)
    }

    // 本月的日期
    //本月的日期用的是本月的的最后一天

    for (let i = 1; i <= last.getDate(); i++) {
        // 1 - 30
        const newDate = new Date(last)
        newDate.setDate(i) // i
        list.push(newDate)
    }

    // 下个月的日期
    // 整个日历 6*7 = 42
    // list.length 数组的长度
    const len = list.length
    for (let i = 1; i <= 42 - len; i++) {
        // 下个月日期，用 last 好还是 first 好
        // first 好，因为每个月的最后一天，天数都不确定
        // 当月的第一天月份上加个1就是下月的第一天
        const newDate = new Date(first)
        // 下个月
        newDate.setMonth(newDate.getMonth() + 1)
        newDate.setDate(i)
        // 往 list 中不断加数据，加了数据之后，长度变化
        list.push(newDate)
    }
    return list
}

給页面添加功能渲染

        console.log(DateList())
        
        function DateManager(){
            let now =new Date()
            let list =DateList(now)
            function render(){
                const divListStr =list.map(date=>{
                    return `<div class="block ${now.getMonth() === date.getMonth() ? 'current' : "other"
                }">${date.getDate()}</div>`
        }).join('')
        document.body.innerHTML=`<div>${now.toLocaleDateString()}</div><div class="container">${divListStr}</div>`
        document.querySelectorAll('.block').forEach((el,key)=>{
            el.onclick = ()=>{
                const date=list[key]
                now =date
                list =DateList(now)
                render()
            }

        })
            }
            render()
        }
         DateManager()