一、面向对象编程的理解

聊到面向对象的编程，就不得不提一下面向过程的编程，这两者均不是一门技术，而是一种解决问题的思路和方式。

区别：

面向对象：注重的是结果
面向过程：注重的是过程

举例：

面向对象：点外卖
面向过程：自己买菜做饭那么，是不是有了面向对象就不需要面向过程了呢？不是，面向对象其实是对面向过程的一种封装。

二、面向对象编程的举例

需求：给三个 div 和 p 标签设置边框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 40px;
            margin-top: 10px;
            background-color: greenyellow;
        }

        p {
            width: 200px;
            height: 40px;
            margin-top: 10px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <p></p>
    <p></p>
    <p></p>
</body>

</html>

1.使用 for 循环: 面向过程

<script> 

    let divList = document.getElementsByTagName('div');
    let pList = document.getElementsByTagName('p');

    for (let i = 0; i < divList.length; i++) {
        divList[i].style.border = '2px solid red';
    }
    for (let i = 0; i < pList.length; i++) {
        pList[i].style.border = '2px solid red';
    }
</script>

弊端：（1）获取元素代码过长（2）两个for循环，代码冗余（3）不便于维护

2.使用函数封装

<script>

    let divList = tagName('div');
    let pList = tagName('p');
    
    setStyle(divList, '2px solid red');
    setStyle(pList, '2px solid red');

    function tagName(name) {
        return document.getElementsByTagName(name);
    }

    function setStyle(eles, value) {
        for (let i = 0; i < eles.length; i++) {
            eles[i].style.border = value;
        }
    }
</script>

好处： 代码复用

弊端： 函数名是全局变量，会造成全局变量污染

3.使用对象封装

<script>
    let obj = {
        tagName: function (name) {
            return document.getElementsByTagName(name);
        },
        setStyle: function (eles, value) {
            for (let i = 0; i < eles.length; i++) {
                eles[i].style.border = value;
            };
        }
    };

    let divList = obj.tagName('div');
    let pList = obj.tagName('p');
    obj.setStyle(divList, '2px solid red');
    obj.setStyle(pList, '2px solid red');
</script>

好处：（1）便于维护，以后添加修改方法很方便（2）避免全局变量污染

4.使用第三方框架：jquery

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $('div,p').css('border', '2px solid red');
</script>

三、面向对象编程的小结

在实际开发中，如果要实现一个需求，先看有没有现成的专业的对象来解决这个需求，如果有就直接拿来用，没有就自己造一个专业的对象。比如自己封装一个组件、一个工具函数等。

别人造好的对象：快捷方便，但是不好维护
自己造的对象：好维护，但是耗费时间和精力

聊一聊面向对象的编程