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>