ES6 class

繼承extends
繼承可以讓子類獲得父類的方法 屬性
可以擴充 增加新的方法 屬性等

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

        desc() {
            const { name, age, sex, hobby } = this;
            console.log(`我叫${ name }, 性別${ sex }, 愛好${ hobby }, 今年${ age }歲`);
        }

        eat() {
            console.log('吧唧吧唧');
        }
    }

    class FEEngineer extends Human {
        constructor(name, age, sex, hobby, skill, salary) {
            // 呼叫父類的建構式
            super(name, age, sex, hobby);
            this.skill = skill;
            this.salary = salary;
        }

        say() {
            console.log(this.skill.join(','));
        }
    }

    const feer = new FEEngineer(
        '張四',
        12,
        '女',
        '洗澡',
        ['es6', 'vue', 'react', 'webgl'],
        '1k'
    );

    feer.eat();

super
1. 非靜態方法中訪問super -> 父類原型
2. 在靜態方法中訪問super -> 父類
在呼叫super 父類的this 始終是子類的this

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

        desc() {
            const { name, age, sex, hobby } = this;
            console.log(`我叫${ name }, 性別${ sex }, 愛好${ hobby }, 今年${ age }歲`);
        }

        eat() {
            console.log('吧唧吧唧');
        }

        checkThis(_this) {
            //在呼叫super 父類的this 始終是子類的this
            console.log(_this === this);//true
        }
    }
    //給父類添加了靜態屬性
    Human.total = 899999999;

    class FEEngineer extends Human {
        constructor(name, age, sex, hobby, skill, salary) {
            super(name, age, sex, hobby);
            this.skill = skill;
            this.salary = salary;
        }

        say() {
            // 非靜態方法中訪問super -> 父類原型
            console.log(super.eat());//吧唧吧唧
            console.log(super.checkThis(this));//undefined
            console.log(this.skill.join(','));//es6,vue,react,webgl
        }

        static test() {
            //在靜態方法中訪問super -> 父類
            console.log(super.name);//Human
            console.log(super.total);//899999999
        }
    }

    const feer = new FEEngineer(
        '張四',
        12,
        '女',
        '洗澡',
        ['es6', 'vue', 'react', 'webgl'],
        '1k'
    );

    feer.say();
    FEEngineer.test();

多型
同一個介面 在不同情況下做不一樣的事情
介面本身只是一組定義 實作都是在類里面
需要子類去實作的方法

    class Human {
        say() {
            console.log('我是人');
        }
    }

    class Man extends Human {
        say() {
            super.say();
            console.log('我是小哥哥');
        }
    }

    class Woman extends Human {
        say() {
            super.say();
            console.log('我是小姐姐');
        }
    }

    new Man().say();//我是人 我是小哥哥
    new Woman().say();//我是人 我是小姐姐

多載

    class SimpleCalc {
        addCalc(...args) {
            if (args.length === 0) {
                return this.zero();
            }

            if (args.length === 1) {
                return this.onlyOneArgument(args);
            }

            return this.add(args);
        }

        zero() {
            return 0;
        }

        onlyOneArgument() {
            return args[0];
        }

        add(args) {
            // 累加
            return args.reduce((a, b) => a + b, 0);
        }
    }

    function post(url, header, params) {
        // 多載操作
        if (!params) {
            params = header;
            header = null; // undefined
        }
    }

    post('https://imooc.com', {
        a: 1,
        b: 2
    });

ES5繼承的實作
利用建構式

    function P() {
        this.name = 'parent';
        this.gender = 2;
        this.say = function() {
            console.log('好的好的！我一定到！！咕咕咕');
        }
    }

    //會導致報錯，不能呼叫原型上的方法
    P.prototype.test = function() {
        console.log('我是一個test方法');
    }

    function C() {
        // 跑一遍父類
        P.call(this);
        this.name = 'child';
        this.age = 11;
    }

    var child = new C();
    child.say();//好的好的！我一定到！！咕咕咕
    child.test();//報錯，不能呼叫原型上的方法

prototype

    function P() {
        this.name = 'parent';
        this.gender = 2;
        this.say = function() {
            console.log('好的好的！我一定到！！咕咕咕');
        }
    }

    P.prototype.test = function() {
        console.log('我是一個test方法');
    }

    function C() {
        P.call(this);
        this.name = 'child';
        this.age = 11;
    }

    //將C的原型指定為P的屬性
    C.prototype = new P();

    var child = new C();
    child.say();//好的好的！我一定到！！咕咕咕
    child.test();//我是一個test方法

babel環境安裝
1、安裝好node.js
2、建立好專案，使用命令列進入專案
3、輸入npm init 做基本配置，回車后專案中生成package.json檔案
4、npm install --save-dev babel/cli 生成node_modules檔案夾和package-lock.json檔案
5、全域安裝babel-cli npm i babel-cli -g
6、配置 npm i -D babel-preset-env
7、創建.babelrc

標籤：JavaScript

上一篇：理解 nodeJS 中的 buffer，stream

下一篇：layui下select下拉框不顯示或沒有效果