JS面向对象编程的理解

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')