JS面向对象编程的理解
程序员文章站
2022-07-03 14:58:55
...
JS面向对象主要基于function来实现的,通过function来模拟类,通过prototype来实现类方法的共享,跟其他语言有着本质的不同,自从有了ES6后,把面向对象类的实现更像后端语言的实现了,通过class来定义类,通过extends来继承父类,其实ES6类的实现本质上是一个语法糖,不过对于开发简单了好多。废话不多说上个简单的ES6类的面向对象编程
<div id="wrapper">
<ul class="nav">
<li class="act">选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<section>
<div class="Act">选项一内容</div>
<div>选项二内容</div>
<div>选项三内容</div>
</section>
</div>
*{
margin: 0;
padding: 0;
list-style: none;
}
#wrapper{
width: 500px;
margin: 50px auto;
}
.nav{
height: 50px;
}
.nav>li{
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
float: left;
margin: 0 30px;
}
.nav>.act{
background: #0088dd;
}
section{
height: 100px;
}
section>div{
width: 100px;
text-align: center;
line-height: 50px;
float: left;
margin: 0 30px;
display: none;
}
section>.Act{
display: block;
}
var that;
class Fn{
constructor(id){
that = this
this.wrap = document.querySelector(id)
// console.log(this.wrap);
this.lis = this.wrap.querySelectorAll('li')
// console.log(this.lis);
this.oDiv = this.wrap.querySelectorAll('div')
// console.log(this.oDiv);
this.init()
}
init(){
for(var i=0;i<this.lis.length;i++){
this.lis[i].index=i
this.lis[i].onclick=this.toogle
}
}
toogle(){
that.clearStyle()
this.className='act';
that.oDiv[this.index].className='Act'
// console.log(that);
// console.log(this);
}
clearStyle(){
for(var i=0;i<this.lis.length;i++){
this.lis[i].className=''
this.oDiv[i].className=''
}
}
}
new Fn('#wrapper')
上一篇: 时间戳