创建对象的实例

最新推荐文章于 2022-11-15 13:26:35 发布

该睡觉觉了

最新推荐文章于 2022-11-15 13:26:35 发布

阅读量213

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zhangyiyang111/article/details/111999872

版权

js 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中如何使用构造函数创建对象，并通过`init`方法初始化对象属性。特别是，它展示了如何设置事件监听器，当按钮被点击时，调用`changeItem`方法来切换显示的div。此外，还详细解释了事件处理函数中的`this`关键字用法。

摘要由CSDN通过智能技术生成

实例

1.构造函数

标签作为对象的属性

添加一个入口方法 init 在这个方法中进行循环事件操作

事件里面的操作，会放到一个方法里面

2.实例化对象

 function TabSwitch(){
     //1.添加属性
     this.menus = document.getElementsByTagName("button");
     this.items = document.getElementsByTagName("div");
     console.log(this); //TabSwitch创建的对象
     var that = this; //在this指向对的时候，存储一份

     //2.添加一个入口方法
     this.init = function(){
         for(var i = 0;i<this.menus.length;i++){
             this.menus[i].index = i;
             this.menus[i].onclick = function(){
                 //会把事件发生时要执行的操作，放在一个方法中
                 //事件处理函数中的this---触发事件的对象(点谁就是谁)
                 that.changeItem(this.index);
             }
         }
     }
     //入口方法都是自己调用
     this.init();

     //切换div的方法
     this.changeItem = function(index){
         for(var j = 0;j<this.items.length;j++){
             this.items[j].style.display = "none";
             this.menus[j].className = "";
         }
         this.items[index].style.display = "block";
         this.menus[index].className = "active"
     }

 }

//2.创建实例对象
new TabSwitch();