欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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')
相关标签: JavaScript