JS基礎入門篇（三十六）—面向對象（三）

時間 2019-12-13

原文原文鏈接

1.class

class es6 中爲關鍵字用來聲明一個類es6

1.只能經過new調用
2.不存在變量提高
3.多個方法之間直接書寫,不須要,隔開
4.類的方法是直接定義在類的原型上的
5.定義在類中的方法不可枚舉
6.Object.keys() 和 Object.values()

下面是詳細解釋 函數

1.只能經過new調用this

<script>

//--------------- class ------------------
  class Fn{}
//Fn();  //直接調用會報錯
  var f=new Fn();//必須經過new調用
  console.log(f);//Fn {}


//--------------- function ------------------
  function go() {}
  go();//函數能夠直接調用
</script>

2.不存在變量提高spa

<script>
//---------------function解析時，會放到前面。因此不會報錯-------------
go(); // 函數聲明 能夠 先調用 再聲明
function go() {}// 函數聲明

//---------------class解析時，不會放到前面。因此會報錯-------------
var f=new Fn();//報錯  Fn is not defined
class Fn{}
</script>

3.多個方法之間直接書寫不須要,隔開code

<script>
 class Fn{
        constructor(name,age){
            this.name=name;
            this.age=age;
        }
        say(){
            console.log("我會說話");
        }
    }

    var f=new Fn("kite","18");
    console.log(f.name);//kite
    console.log(f.age);//18
</script>

解析：其中constructor方法和say方法之間並無用逗給開。由於不是對象，因此不須要用逗號隔開。對象

4.類的方法是直接定義在類的原型上的繼承

<script>
  class Fn{
        constructor(name,age){
            this.name=name;
            this.age=age;
        }
        say(){
            console.log("我是"+this.name);
        }
    }

    var f1=new Fn("kite","18");
    var f2=new Fn("Mary","28");
    f1.say();//我是kite
    f2.say();//我是Mary
    console.log(f1.say===f2.say);// true
    console.log(f1.hasOwnProperty("say"));//false 表示不是自身 身上的方法
</script>

5.定義在類中的方法不可枚舉事件

class P {
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        say(){ // 這個say 是 掛在 P 類 的原型上的方法
            console.log("我會說話.個人名字叫:"+this.name);
        }
    };
    
    var p1 = new P("kite",29);
    for( var attr in p1 ){
        console.log( attr );
        //運行結果爲
        //name
        //age
    }

6.Object.keys()和Object.values()
除了經過for in來遍歷對象中的屬性，能夠經過Object.keys()獲得對象的屬性名，能夠經過Object.keys()獲得對象的屬性值ip

<script>
class P {
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        say(){ // 這個say 是 掛在 P 類 的原型上的方法
            console.log("我會說話.個人名字叫:"+this.name);
        }
    };
    
    var p1 = new P("kite",29);

    console.log( Object.keys( p1 ) ); //["name", "age"]
    console.log( Object.values( p1 ) ); //["kite", 29]
</script>

2.繼承-extends

繼承
    extends
注意:
    構造函數中調用super

舉例說明get

<script>
    //父類
    class Fn{
        constructor(name,age){
            this.name=name;
            this.age=age;
        }
        say(){
            console.log("個人名字是"+this.name);
        }

    }

    //子類
    class F extends Fn{
        constructor(name,age,job){
            super(name,age);
            this.job=job;
        }
        say(){
            console.log("個人名字是"+this.name,"個人工做是"+this.job);
        }
        eat(){
            console.log("我喜歡吃西瓜");
        }
    }

    //子類實例化
    var f=new F("zm",18,"worker");
    f.say();//個人名字是zm 個人工做是worker
    f.eat();//我喜歡吃西瓜

</script>

3.自定義屬性

自定義事件
建立:new CustomEvent(事件名,事件對象設置參數);
事件對象設置參數 {bubbles:true}//是否設置冒泡
綁定:元素.addEventListener
觸發:元素.dispatchEvent(自定義事件實例,事件名)

舉例說明：

<body>
<div id="box">box</div>
<script>
    var box = document.getElementById("box");
    //建立自定義屬性
    var c = new CustomEvent("abc", {bubbles: true});
    //自定義屬性綁定
    box.addEventListener("abc", function () {
        console.log(1);
    });
    box.addEventListener("abc", function () {
        console.log(2);
    });
    //自定義屬性觸發
    box.dispatchEvent(c, "abc");
</script>
</body>

經過函數模擬自定義函數：

<script>
        var obj={};

        //addFn函數做用：
        // 用空對象存儲 事件名 和 函數
//         以如下這種方式存儲
//        {
//            abc:[fn1,fn2];
//            cfd:[fb1,fb2];
//        }
        function addFn( EventName,fn ) {
            if(!obj[ EventName]){
                obj[ EventName]=[];
            }
            obj[ EventName].push(fn);
        }

        //trigger函數做用：
        //經過for循環觸發函數
        function trigger(EventName) {
            for(var i=0;i<obj[ EventName].length;i++){
                obj[ EventName][i]();
            }
        }

        addFn("abc",function () {console.log(1);});
        addFn("abc",function () {console.log(2);});
        addFn("abc",function () {console.log(3);});

        trigger("abc");
</script>

以面向對象的方式寫自定義事件：

<script>
        class CustomEv{
            constructor(){
                this.obj = {};
            }
            addFn( EventName,fn ) {
                if(!this.obj[ EventName]){
                    this.obj[ EventName]=[];
                }
                this.obj[ EventName].push(fn);
            }
            trigger(EventName) {
                for (var i = 0; i < this.obj[EventName].length; i++) {
                    this.obj[EventName][i]();
                }
            }
        }

        var c=new CustomEv();
        c.addFn("abc",function () {console.log(1);});
        c.addFn("abc",function () {console.log(2);});
        c.addFn("abc",function () {console.log(3);});

        c.trigger("abc");
</script>