ES6 class

作者: -艾玛
来源: 51数据库
2021-10-23

继承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('http://www.51sjk.com/Upload/Articles/1/0/292/292944_20210728123704087.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