好资源导航 » 文章资讯 » JS面向对象编程实现的Tab选项卡案例详解

JS面向对象编程实现的Tab选项卡案例详解

2023-07-29 21:45:03 88

本文实例讲述了JS面向对象编程实现的Tab选项卡。分享给大家供大家参考，具体如下：

Tab选项卡案例

下面是一个简单面向过程的Tab选项卡。






选项卡








这是主页内容

这是说说内容

这是日志内容

下面来慢慢改成面向对象的形式。

1.首先将嵌套的函数拿到window.onload外面，不能有函数嵌套，可以有全局变量。如下：所有的改写最终效果都不变。

2.将全局的变量变为对象的属性，全局的函数变为对象的方法；将window.onload里的代码提取到一个构造函数里面，在window.onload里创建对象即可；(下面的代码执行起来是有问题的)。

这里必须注意：在构造函数Tab里的this跟之前this所代表的是不同的(此处是通过new来创建对象的)；在上面的示例中，this指的是调用者；在构造函数里，this指向的是vartab=newTab()，即tab这个对象，注意是对象。

说一下这段代码的问题：我们在Tab的原型上添加clickBtn方法后，clickBtn方法里的this本应该是指向vartab=newTab()的，但是我们在this.tabBtn[i].onclick=this.clickBtn;将clickBtn添加给了this.tabBtn[i]，即input按钮，clickBtn的所属由Tab对象变成了input按钮。

clickBtn的所属变成input按钮后，那么clickBtn里的this指向按钮，那再来看clickBtn里的代码，this.tabBtn、this.tabDiv，input按钮里有这两个属性吗？没有，所以会出错！

3.将clickBtn的调用放在一个函数里，这样就不会改变clickBtn的所属了。alert(this);此时弹出的是一个Object，说明clickBtn的所属关系没变，还是Tab对象。但是还有另一个问题，此时clickBtn里的this指向tab对象，那么this.className、this.index，此处的this指的是tab对象，那么对象中有这两个属性吗？没有，还会出错！所以第4步继续改造。

window.onload=function(){
vartab=newTab("tabBox");
}

/**
*选项卡
*@param{Object}id：选项卡id
*/
functionTab(id){
vartabBox=document.getElementById(id);

this.tabBtn=tabBox.getElementsByTagName('input');
this.tabDiv=tabBox.getElementsByTagName('div');

for(vari=0;i
4.以参数的形式将点击的按钮传入clickBtn中
window.onload=function(){
vartab=newTab("tabBox");
}

/**
*选项卡
*@param{Object}id：选项卡id
*/
functionTab(id){
vartabBox=document.getElementById(id);

this.tabBtn=tabBox.getElementsByTagName('input');
this.tabDiv=tabBox.getElementsByTagName('div');

for(vari=0;i
5.最终版——将代码提取到一个单独的js文件中，在用的时候引入即可。一般花大时间去写一个面向对象的程序，就是为了能够复用，以及方便的使用。
Tab.js
/**
*选项卡
*@param{Object}id选项卡id
*/
functionTab(id){
vartabBox=document.getElementById(id);
this.tabBtn=tabBox.getElementsByTagName('input');
this.tabDiv=tabBox.getElementsByTagName('div');

for(vari=0;i
使用：tab.html可以看到使用的时候，就可以很简单的创建两个选项卡出来了。





选项卡










这是主页内容

这是说说内容

这是日志内容

Js、Vue

VSCode

CSDN

再来简单总结一下JS面向对象中的this，this一般会在两种情况下出问题，一是使用定时器、二是事件，从上面的例子中也可以看出来。注意下面的说法是在构造函数里哦，其它情况下，this指向的是调用者。

可以看到效果没有将姓名显示出来，其实看到这里原因应该很清楚了，就是第14行代码中this.name，此处的this指向谁？指向window，因为setInterval是属于window的。

解决办法：上面例子中已经列出来了，就是用一个function将要执行的代码包起来，使其所属关系不会发生变化，注意function里调用方法时使用的是外部变量'_this'。事件的处理在上面的例子中已经说明了。

functionPerson(name){
this.name=name;
var_this=this;
setInterval(function(){
this.showName();
},3000);
}
Person.prototype.showName=function(){
alert(this);//[ObjectObject]
alert("姓名："+this.name);//姓名：jianghzou
}
varp1=newPerson("jiangzhou");

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

JS面向对象编程实现的Tab选项卡案例详解

Tab选项卡案例

热门推荐

随机推荐