ES6 class

Posted 2021-03-16 chenyingying0

继承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