會js與jq的後端開發如何愉快的轉前端：第一篇：es6-物件導向-初窺門徑

繼承-例項化-super、this、that知識點精講總結整理

建立類 class
類接收引數，在construct 中接收
類中函式直接寫 doSomthing（）{//logic}
多個函式方法之間不需要新增逗號分隔

程式碼：


<script>

        // 1. 建立類 class  建立一個 明星類

        class Star {

            // 類的共有屬性放到 constructor 裡面

            constructor(uname, age) {

                this.uname = uname;

                this.age = age;

            }

            sing(song) {

                // console.log('我唱歌');

                console.log(this.uname + song);

            }

        }

        // 2. 利用類建立物件 new

        var dmm = new Star('大冪冪', 18);

        var bg = new Star('波哥', 20);

        console.log(dmm);

        console.log(bg);

        // (1) 我們類裡面所有的函式不需要寫function 

        //(2) 多個函式方法之間不需要新增逗號分隔

        dmm.sing('愛的供養');

        bg.sing('精忠報國');

    </script>

super 關鍵字呼叫父類函式

呼叫構造

class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);

            }
        }
        class Son extends Father {
            constructor(x, y) {
                super(x, y); //呼叫了父類中的建構函式
            }
        }

呼叫普通函式 super.函式名

// super 關鍵字呼叫父類普通函式
        class Father {
            say() {
                return '我是爸爸';
            }
        }
        class Son extends Father {
            say() {
                // console.log('我是兒子');
                console.log(super.say() + '的兒子');
                // super.say() 就是呼叫父類中的普通函式 say()
            }
        }
        var son = new Son();
        son.say();

子類繼承父類a方法，再擴充套件父類新寫一個b方法。

<script>
        // 父類有加法方法
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        // 子類繼承父類加法方法 同時 擴充套件減法方法
        class Son extends Father {
            constructor(x, y) {
                // 利用super 呼叫父類的建構函式
                // super 必須在子類this之前呼叫
                // 這時候我們就已經可以使用 父類 sun方法了，下程式碼編寫只是為了可以擴充套件減法
                super(x, y); 
                this.x = x;
                this.y = y;

            }
            subtract() {
                console.log(this.x - this.y);

            }
        }
        var son = new Son(5, 3);
        son.subtract();
        son.sum();
    </script>

1.在 ES6 中類沒有變數提升，所以必須先定義類，才能通過類例項化物件

2.類裡面的共有的屬性和方法一定要加this使用.

3.constructor 裡面的this 指向的是建立的例項物件

4.方法裡面的this 指向的是誰呼叫這個方法的本身,因為他呼叫的。
5.接上面，與this對應，那麼that裡面儲存的是constructor裡面的this

程式碼演示

<!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>

</head>

<body>

    <button>點選</button>

    <script>

        var that;

        var _that;

        class Star {

            constructor(uname, age) {

                // constructor 裡面的this 指向的是 建立的例項物件

                that = this;

                console.log(this);

                this.uname = uname;

                this.age = age;

                // this.sing();

                this.btn = document.querySelector('button');

                this.btn.onclick = this.sing;

            }

            sing() {

                // 這個sing方法裡面的this 指向的是 btn 這個按鈕,因為這個按鈕呼叫了這個函式

                console.log(this);

                console.log(that.uname); // that裡面儲存的是constructor裡面的this

            }

            dance() {

                // 這個dance裡面的this 指向的是例項物件 dmm 因為dmm 呼叫了這個函式

                _that = this;

                console.log(this);

            }

        }

        var dmm = new Star('大冪冪');

        console.log(that === dmm);

        dmm.dance();

        console.log(_that === dmm);

        // 1. 在 ES6 中類沒有變數提升，所以必須先定義類，才能通過類例項化物件

        // 2. 類裡面的共有的屬性和方法一定要加this使用.

    </script>

</body>

</html

執行效果

es6-物件導向-知識點

點選點選按鈕後：

es6-物件導向-知識點

用哪個關鍵字建立類_____
子類如何繼承父類關鍵字____
呼叫父類中的建構函式與普通函式關鍵字是____

本作品採用《CC 協議》，轉載必須註明作者和本文連結

感謝關注上海PHP自學中心-免費程式設計視訊教學|

會js與jq的後端開發如何愉快的轉前端：第一篇：es6-物件導向-初窺門徑

相關文章