前端----选项卡原理，多个选项卡,工厂模式，构造函数,如何实现new

本文链接：https://blog.youkuaiyun.com/BigWind3/article/details/121288047

本文详细介绍了JavaScript实现选项卡和轮播图的原理，包括绑定事件处理不同显示效果，以及如何通过公共方法抽取共性功能。同时，探讨了面向对象编程的概念，解释了工厂模式、构造函数以及`new`运算符的工作原理，并提供了仿写`new`运算符的示例。此外，还讨论了如何通过`constructor`判断对象类型。内容涵盖了JavaScript基础和前端交互实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，拿到对应选项卡的结点，绑定结点，对应不同按钮，显示不同效果。

//遍历按钮组活得key，将key值传入，    
 btns.forEach((value, key) => {
            value.onclick = function () {
                psFor(key)
            }
        })

//遍历显示端，如果和传入的key值一样，则显示效果，否则移除
    function psFor(key) {
        ps.forEach((v, k) => {
            if (key == k) {
                btns[k].style.background = "red"
                ps[k].style.display = "block"
            } else {
                btns[k].style.background = ""
                ps[k].style.display = "none"
            }
        })
    }

2，多个选项卡原理

基本思路和选项卡一样，但是可以抽取出公共方法。如Tabs方法，根据传入的变量来绑定不同的DOM结点，并可以通过设置不同的参数来实现不同的功能

公共逻辑提取，所有选项卡共有的功能。

3，轮播图原理

根据定时器setInterval来实现1秒钟，切换选项卡的功能，视觉效果，看起来就是轮播。

  if(isAutoPlay){
            document.querySelector(".autoPlay")
            let num = 0;
            setInterval(() => {
                num++
                num = num > 2 ? 0 : num
                psFor(num)
            }, 1000);
        }

4，改造

共性的封装，独一无二的单独处理

5，面向对象

首先抽象事物或功能，研究属性和方法

工厂模式：

首先定义函数，添加原料（初始化对象），加工原料（添加属性和方法），出厂（返回对象）

缺点：性能问题，识别问题

无法识别对象是哪个工厂出厂的

每次调用方法，都会开辟新的内存地址

可以放进公共空间，原型prototype ====>new运算符

6，new运算符

1，执行函数

2，自动创建一个空对象

3，把创建的对象指向另外一个对象

4，把空对象和函数里的this连接起来

5，隐式返还this

通过这个特性可以把工厂模式进行简化

//简化工厂模式
function Tab(){
    //let obj = {}; ---->this
    this.name = "张三"
    this.hobby = function(){
        console.log("篮球")
    }
    //return obj;
}
//Tab()
let tab1 = new Tab()
console.log(tab1.name)
console.log(tab1.hobby)

把工厂模式改造成构造函数

Tab.prototype.psFor = function(){

}

约定俗成：1，首字母大写，2，属性放在构造函数；方法放在原型

let str = "ddddd"

console.log(str.constructor === String) //true

通过constructor判断属性,上图判断str是字符串

6，实现一个new

//仿写new
 function myNew(constructor,...arg){
     let obj = {};
    constructor.call(obj,...arg)
    obj.__proto__ = constructor.prototype
    return obj
 }
 let tab1 = myNew(Tab)