js-5 Es6-类

1类

1.类的使用：

在类中定义的函数自动放到原型中，不在构造函数中，很理想
class User{
constructor(name){
this.name = name;
}
show(){
console.log(this.name);
}
get(){
return “skajf”;
}

}

let xj = new User("刘兴加");
xj.show();
console.log(User == User.prototype.constructor);		//true

2.hasownproperty来遍历对象属性好

用类来设置方法，其属性是不可遍历

3.class下默认严格模式

4.静态属性static host = “jskdjakss”,所有对象共用。或者 class xj{}；xj.name=“vvv”;在外部用 类名.静态属性名。

5.静态方法：构造函数对象上定义函数，this是构造函数，只能用构造函数调用。不能通过对象调用：

function User(){
}
User.show = function (){
…
}
或
User.proto.show=function (){
…
}
或者更简单的在class中函数前加static

class Member{
        constructor(name, age, sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        }

        static create(...arg){
            return new this(...arg);
        }
    }

    let xj = Member.create("兴佳", 22, "男");
    console.log(xj);

6.访问器和原来一样

7.属性保护，四种实现方法。

1.命名保护，_name这个属性大家默认只能通过访问器不能直接设置。

2.Symbol定义属性名或者对象属性，把受保护的属性全部压入这个对象 protecteds，只能内部访问，本身和子类访问this[protecteds].name。外部没有修改的权限。外部仅仅能通过访问器访问get name(){

        return this[protecteds].name;
    }。

const protecteds = Symbol();
    class Common{
        constructor(){
        this[protecteds] = {};
        this[protecteds].host = "http://www.baidu.com"; //可以把受保护的属性全部压入这个对象
        }
        set host(url){
            if(!/^https?:/i.test(url)){
                throw new Error("非常网址");
            }
            this[protecteds].host = url;
        }
        get host(){
            return this[protecteds].host;
        }
    }
    class Member extends Common{

        constructor(name, age, sex){
            super();
            this[protecteds].name = name;
            this.age = age;
            this.sex = sex;
        }

        static create(...arg){
            return new this(...arg);
        }
        /*set name(name){
            this[protecteds].name = name;
        }*/
        get name(){
            return this[protecteds].name;
        }
    }

    let xj = Member.create("兴佳", 22, "男");
    xj.host="http://www.baidu.com";
    console.log(xj);

    console.log(xj.name);

3.WeakMap保护类中属性：

weakMap的对象不能被遍历到，只能用set设置属性，get得到属性（protecteds.set(this,{…protecteds.get(this),url}); protecteds.get(this)[“host”]）

const protecteds = new WeakMap();
    class Common{
        constructor(){
            protecteds.set(this,{host:'"http://www.baidu.com"'});
            // this[protecteds].host = "http://www.baidu.com"; //可以把受保护的属性全部压入这个对象
        }
        set host(url){
            if(!/^https?:/i.test(url)){
                throw new Error("非常网址");
            }
            protecteds.set(this,{...protecteds.get(this),host:url});
        }
        get host(){
            return protecteds.get(this)["host"];
        }
    }
    class Member extends Common{

        constructor( age, sex){
            super();

            this.age = age;
            this.sex = sex;
        }

        static create(...arg){
            return new this(...arg);
        }
        set name(name){
            protecteds.set(this,{...protecteds.get(this),name:name});
        }
        get name(){
            return protecteds.get(this)["name"];
        }
    }

    let xj = Member.create( 22, "男");
    xj.name="xingjia";
    xj.host="http://www.liuxingjia.com";
    console.log(xj);
    console.log(xj.host);

    console.log(xj.name);

4.私有属性：在属性或函数前加#则此属性变私有，只能在本类中使用，不可被继承。firfox不支持，chrom支持.所以还是少用？？？

class Member {

       constructor( age, sex){
           // super();

           this.age = age;
           this.sex = sex;
           this.#check();
       }
       #name = "";
       create(...arg){
           return new this(...arg);
       }
       set name(name){
           this.#name = name;
       }
       get name(){
           return this.#name;
       }
       #check=()=>{
           console.log("jfjah");
       }

   }

   let xj = new  Member( 22, "男");
   xj.host="http://www.baidu.com";
   console.log(xj);
    xj.name="kjsadkf";
    // xj.#create();
   console.log(xj.name);

firfox：

chrom:

8.super的实现原理。

super.show(name) = this.proto.show.call(this,name)但又不仅仅限于此。
使用后者时多层继承会出现死循环，而super不会。这就是super出现啊的原因。

9练习，动画处理类，容器管理类，批量执行动画，动画队列控制。

1callback && callback();的意义就是：if(callback) { callback() }

2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: content-box;
    }
    body {
        padding: 30px;
    }
    .slide {
        width: 300px;
        display: flex;
        flex-direction: column;
        /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); */
    }
    .slide dt {
        height: 30px;
        background: #34495e;
        color: white;
        display: flex;
        align-items: center;
        padding-left: 10px;
        cursor: pointer;
    }
    .slide dt:first-of-type {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .slide dd {
        height: 100px;
        background: #f1c40f;
        overflow: hidden;
    }
    .slide dd div {
        padding: 10px;
    }
    .slide dd:last-of-type {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
</style>

</head>
<body>
<div class="slide s1">
    <dt>后盾人</dt>
    <dd>
        <div>houdunren.com</div>
    </dd>
    <dt>后盾人</dt>
    <dd>
        <div>hdcms.com</div>
    </dd>
    <dt>刘兴加</dt>
    <dd>
        <div>lxj.com</div>
    </dd>
</div>
</body>
<script>
    class Animation{
        constructor(el){
            this.el = el;           //元素的传递
            this.timeout = 5;       //定时器的变化时间
            this.isShow = true;     //元素是否展开
            this.defaultHeight = this.height;   //元素的原本高度
            console.log(this.defaultHeight);

        }
        hide(callback){
            this.isShow = false;        //表示元素是否已经展开
            let a1 = setInterval(()=>{
                // console.log(1);
                if(this.height<=0){     //当高度为0
                    clearInterval(a1);
                    callback&&callback();   //清除定时器
                    return;
                }
                this.height = this.height - 1;//减少高度

            },this.timeout)
        }
        show(callback){         //将元素的dd展开，增加height至原本高度
            this.isShow = true;
            let a1 = setInterval(()=>{
                // console.log(1);
                if(this.height>=this.defaultHeight){
                    clearInterval(a1);
                    callback&&callback();
                    return;
                }
                this.height = this.height + 1;


            },this.timeout)
        }
        set height(height){     //设置元素的height
            this.el.style.height = height+"px";
        }
        get height(){       //得到实时的元素的height
            return window.getComputedStyle(this.el).
            height.slice(0,-2)*1;
        }
    }
    class Slide{
        constructor(el){
            this.el = document.querySelector(el);
            this.links = this.el.querySelectorAll("dt");
            this.panels = [...this.el.querySelectorAll("dd")].map
            (item=>new Panel(item));        //将dd新建为panels对象数组

            console.log(this.links);
            console.log(this.panels);
            this.bind();                    //调用bind函数。

        }

        bind(){                               //给对象添加监听器，被点击就做动作，一组动作
            this.links.forEach((item,i)=>{
                item.addEventListener("click",()=>{
                    this.action(i);
                })
            })
        }

        action(i){          //做的动作，批处理。
            // Panel.hideAll(this.panels);
            Panel.hideAll(Panel.filter(this.panels,i),
                ()=>{this.panels[i].show();});
                //将除了i之外的对象都hide。i对象show
        }
    }
    class Panel extends Animation{
        /*constructor(el){
            super(el);
        }*/
        // static num=0;
       static hideAll(items, callback){
           if(Panel.num>0) return;
           items.forEach(item=> {
               Panel.num++;
               item.hide(()=>{
                   Panel.num--;
               });
           });

           callback && callback();

       }
       static filter(items,i){      //i是被点击的对象的下标
           return items.filter
           ((item,index) =>index!=i);   //将除了被点击的dt都hide，关闭
       }

    }
    Panel.num = 0;      //定义静态变量
    let hd = new Slide(".s1");







    // let el = document.querySelector(".s1");
    // let hd = new Animation(el);
    // hd.hide(()=>{
    //     console.log("okhide");
    //     hd.show(()=> {
    //         console.log("okshow");
    //     })
    // });

</script>
</html>