javascript面向对象基础

Posted 2022-08-14 supermanguo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript面向对象基础相关的知识，希望对你有一定的参考价值。

主题

? 1）工厂模式

? 2）new运算符

? 3）构造函数

? 4）原型prototype

? 5）面相对象和面相过程编程

? 6）类和对象

## 知识点

##需求

### 1、需求一：实现多个选项卡的

- 问题一：如何写？按照以前方式写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
</body>
<script>
    // 第一个需求 一个选项卡；
    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    btns.forEach((v,k)=>
        v.onclick = function()
            ps.forEach((value,key)=>
                if(key==k)
                    // 选中项；
                    btns[key].style.background = "red";
                    ps[key].style.display = "block";
                else
                    // 非选中项；
                    btns[key].style.background = "";
                    ps[key].style.display = "none";
                
            )
        
    )

</script>
</html>

- 问题二：如何提高复用性？(函数封装)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <div class="mydiv2">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
</body>
<script>
    // 第二个需求 多个选项卡；
    function Tab(btns, ps) 
        btns.forEach((v, k) => 
            v.onclick = function () 
                ps.forEach((value, key) => 
                    if (key == k) 
                        // 选中项；
                        btns[key].style.background = "red";
                        ps[key].style.display = "block";
                     else 
                        // 非选中项；
                        btns[key].style.background = "";
                        ps[key].style.display = "none";
                    
                )
            
        )
    
    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    Tab(btns,ps);
    let btns2 = document.querySelectorAll(".mydiv2 button");
    let ps2 = document.querySelectorAll(".mydiv2 p");
    Tab(btns2,ps2);




</script>

</html>

###2、需求变更：其中某一个实现选项卡点击切换下一页功能

- 通过传统的传参数来解决；逻辑和判断越来越复杂；

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <div class="mydiv2">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <button class="nextPre">点击我第一个选项卡下一页切换</button>
</body>
<script>
    // 第三个需求 3-点击按钮第一个选项卡有下一页功能
    function Tab(btns, ps, isNext = false) 
        btns.forEach((v, k) => 
            v.onclick = function () 
                psFor(k);
            
        )

        if (isNext) 
            // 有下一页功能；
            let num = 0;
            document.querySelector(".nextPre").onclick = function () 
                num++;
                num = num > 2 ? 0 : num
                psFor(num);
            
        

        function psFor(k) 
            ps.forEach((value, key) => 
                if (key == k) 
                    // 选中项；
                    btns[key].style.background = "red";
                    ps[key].style.display = "block";
                 else 
                    // 非选中项；
                    btns[key].style.background = "";
                    ps[key].style.display = "none";
                
            )
        
    

    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    Tab(btns, ps, true);
    let btns2 = document.querySelectorAll(".mydiv2 button");
    let ps2 = document.querySelectorAll(".mydiv2 p");
    Tab(btns2, ps2);




</script>

</html>

###3、需求变更：另一个实现轮播图功能

- 如何灵活的自动播放？—>需要返还函数还需要返还属性：可以通过返还对象来解决；

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <div class="mydiv2">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <button class="nextPre">点击我第一个选项卡下一页切换</button>
    <button class="autoPlay">点击按钮第二个选项卡有自动轮播功能</button>
</body>
<script>
    // 第四个需求 4-点击按钮第二个选项卡有自动轮播功能
    function Tab(btns, ps, isNext = false, isAutoPlay = false) 
        btns.forEach((v, k) => 
            v.onclick = function () 
                psFor(k);
            
        )

        if (isNext) 
            // 有下一页功能；
            let num = 0;
            document.querySelector(".nextPre").onclick = function () 
                num++;
                num = num > 2 ? 0 : num
                psFor(num);
            
        

        if (isAutoPlay) 
            // 控制自动轮播
            let num = 0;
            document.querySelector(".autoPlay").onclick = function () 
                setInterval(() => 
                    num++;
                    num = num > 2 ? 0 : num
                    psFor(num);
                , 1000);
            
        

        function psFor(k) 
            ps.forEach((value, key) => 
                if (key == k) 
                    // 选中项；
                    btns[key].style.background = "red";
                    ps[key].style.display = "block";
                 else 
                    // 非选中项；
                    btns[key].style.background = "";
                    ps[key].style.display = "none";
                
            )
        
    

    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    // 下一页功能 轮播功能； 某一个选项卡的需求；
    Tab(btns, ps, true);
    let btns2 = document.querySelectorAll(".mydiv2 button");
    let ps2 = document.querySelectorAll(".mydiv2 p");
    Tab(btns2, ps2, false, true);




</script>

</html>

###4、需求变更：多个选项卡分别更改数量

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <div class="mydiv2">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <button class="nextPre">点击我第一个选项卡下一页切换</button>
    <button class="autoPlay">点击按钮第二个选项卡有自动轮播功能</button>
</body>
<script>
    // 第四个需求 4-点击按钮第二个选项卡有自动轮播功能
    function Tab(btns, ps) 
        btns.forEach((v, k) => 
            v.onclick = function () 
                psFor(k);
            
        )

        // if (isNext) 
        //     // 有下一页功能；
        //     let num = 0;
        //     document.querySelector(".nextPre").onclick = function () 
        //         num++;
        //         num = num > 2 ? 0 : num
        //         psFor(num);
        //     
        // 

        // if (isAutoPlay) 
        //     // 控制自动轮播
        //     let num = 0;
        //     document.querySelector(".autoPlay").onclick = function () 
        //         setInterval(() => 
        //             num++;
        //             num = num > 2 ? 0 : num
        //             psFor(num);
        //         , 1000);
        //     
        // 

        function psFor(k) 
            ps.forEach((value, key) => 
                if (key == k) 
                    // 选中项；
                    btns[key].style.background = "red";
                    ps[key].style.display = "block";
                 else 
                    // 非选中项；
                    btns[key].style.background = "";
                    ps[key].style.display = "none";
                
            )
        
        return psFor;
    

    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    // 下一页功能 轮播功能； 一个需求；
    let tab1 = Tab(btns, ps);
    // 下一页功能 
    let num = 0;
    document.querySelector(".nextPre").onclick = function () 
        num++;
        num = num > 2 ? 0 : num
        tab1(num);
    


    let btns2 = document.querySelectorAll(".mydiv2 button");
    let ps2 = document.querySelectorAll(".mydiv2 p");
    let tab2 = Tab(btns2, ps2);
    // 自动轮播
    let num2 = 0;
    document.querySelector(".autoPlay").onclick = function () 
        setInterval(() => 
            num2++;
            num2 = num2 > 2 ? 0 : num2
            tab2(num2);
        , 1000);
    



</script>

</html>

以上是关于javascript面向对象基础的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 面向对象开发知识基础总结

Javascript基础与面向对象基础~目录

web前端技术基础课程详解之JavaScript面向对象

JavaScript面向对象——JS OOP基础与JS 中This指向详解

javaScript面向对象基础