# class

es6中的类和对象
- 对象对象的定义是一组无序的相关属性和方法的集合，所有的事物都是对象
- class类在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。class 的本质是 function (class Person() ; typeof Person == Function)。它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。
- 对象和类的区别类抽象了对象的公共部分(封装了公共的属性和方法)，他泛指某一大类(class)，对象特指某一个，通过类实例化一个具体的对象他俩之间的关系可以理解为设计图(类)和实物(对象)的关系
- 类的使用上面是es6 class的写法下面是es5构造函数的写法

<script>
        class person { // 创建一个person类
            constructor(name){ 
                this.name = name
            }
            ale(){
                alert("我是",this.name)
            }
        }
        var p1 = new person("不凡君"); // 创建person类的实例 需要注意的是使用创建的类必须通过实例化的方式
        console.log(p1.ale())

        // function person(name){
        //     this.name = name;
        // }
        // person.prototype.ale = function(){
        //     alert(this.name)
        // }
        // var p1 = new person("不凡君");
        // console.log(p1.ale())
</script>

类的注意事项及特点
- 构造函数为了与普通函数更好的区分一般构造函数的首字母都是大写
- 类里面的constructor(构造函数)函数可以接收实例传递过来的参数同时返回实例对象
- constructor函数只要new生成实例时就会自动调用这个函数即使不写这个函数也会自动生成
- 生成实例的时候 new关键字不能省略
- 类里面的函数不能加function
- 类里面的多个函数之间不需要加,
- 类里面的所有方法都是定义在原型上面
类的继承利用原型让一个引用类型继承另一个引用类型的属性和方法，即让原型对象等于另一个类型的实例（即要继承的对象的实例） Class 可以通过extends关键字实现继承

<script>
    class Point {  }

    class ColorPoint extends Point { 
        constructor() {
            // super()的主要作用是把父级也就是person的属性和方法放在子类的原型上面
            super() 
            
        }
    }
</script>

面向对象案例

<script>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
    <style>
        .clearfix:after {
            content: " ";
            display: block;
            height: 0;
            clear: both;
        }
        .clearfix {
            zoom: 1;
        }
        *{
            list-style: none;
        }
        .tab{
            border-bottom: 1px solid red;
        }
        .tab li{
            float: left;
            padding: 10px;
        }
        .tab li:hover{
            color: red;
        }
        .tab .on{
            color: red;
        }
        .box  li{
            display: none;
        }
        .box .on{
            display: block;
        }
    </style>
</head>
<body>
    <div id="main">
        
    </div>
    <div id="main1">

    </div>
    <script>
        class Tab {
            constructor(id , arrs){
                this.id = id;
                this.arrs = arrs;
                this.init();
            }
            init(){
                this.initBox(); // 初始化 容器
                this.initTop(); // 初始化 tab头部栏
                this.initBot(); // 初始化 tab底部栏
            }
            initBox(){
                var str = `<div class="tab clearfix"></div><div class="box clearfix"></div>`
                $(`#${this.id}`).html(str)  ;
            }
            initTop(){ // 初始化tab栏
                var ul = document.createElement("ul")
                var str="";
                for(var i = 0 ; i< this.arrs.length ; i ++){
                    str +=`<li class="${i == 0 ? "on" : ""}" onclick="${this.toggle(this.id , this)}">${this.arrs[i].tabname}</li>`
                }
                ul.innerHTML = str
                $(`#${this.id} .tab`).html(ul);
            }
            initBot(){
                var ul = document.createElement("ul")
                var str="";
                for(var i = 0 ; i< this.arrs.length ; i ++){
                    str +=`<li class="${i == 0 ? "on" : ""}">${this.arrs[i].info}</li>`
                }
                ul.innerHTML = str
                $(`#${this.id} .box`).html(ul);
            }
            toggle(id , that){
                
                $(`#${id} .tab`).on("click","ul li",function(){
                    $(this).addClass("on").siblings().removeClass("on");
                    $(`#${that.id} .box ul li`).removeClass("on").eq($(this).index()).addClass("on");
                })
            }
        }
        var arrs = [
            {
                tabname:"张三",
                info:"张三位于郑州"
            },
            {
                tabname:"李四",
                info:"李四位于上海"
            },
            {
                tabname:"王五",
                info:"王五位于北京"
            },
        ]
        var tabs = new Tab("main" , arrs)
        var tabs1 = new Tab("main1" , arrs)
    </script>
</body>
</html>
</script>

← Iterator（遍历器） Promise →