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,hobby } = this;
            console.log(`我叫${ name },性别${ sex },爱好${ hobby },今年${ age }岁`);
        }

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

    class FEEngineer extends Human {
        constructor(name,hobby,skill,salary) {
            // 调用父类的构造函数
            super(name,hobby);
            this.skill = skill;
            this.salary = salary;
        }

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

    const feer = new FEEngineer(
        '张四',12'洗澡'],'1k'
    );

    feer.eat();

super
1. 非静态方法中访问super -> 父类原型
2. 在静态方法中访问super -> 父类
在调用super 父类的this 始终是子类的this

);
        }

        checkThis(_this) {
            在调用super 父类的this 始终是子类的this
            console.log(_this === this);true
        }
    }
    给父类添加了静态属性
    Human.total = 899999999;

    class FEEngineer extends Human {
        constructor(name,salary) {
            super(name,1)"> salary;
        }

        say() {
             非静态方法中访问super -> 父类原型
            console.log(super.eat());吧唧吧唧
            console.log(super.checkThis(this));undefined
            console.log(es6,vue,react,webgl
        }

        static test() {
            在静态方法中访问super -> 父类
            console.log(super.name);Human
            console.log(super.total);899999999
        }
    }

    const feer = 
    );

    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 .zero();
            }

            if (args.length === 1.onlyOneArgument(args);
            }

            .add(args);
        }

        zero() {
            return 0;
        }

        onlyOneArgument() {
            return args[0];
        }

        add(args) {
             累加
            return args.reduce((a,b) => a + b,0function post(url,header,params) {
         重载操作
        if (!params) {
            params = header;
            header = null;  undefined
        }
    }

    post('https://imooc.com'2
    });

ES5继承的实现
利用构造函数

     P() {
        this.name = 'parent';
        this.gender = 2this.say = () {
            console.log('好的好的！我一定到！！咕咕咕'会导致报错，不能调用原型上的方法
    P.prototype.test = () {
        console.log('我是一个test方法');
    }

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

    var child =  C();
    child.say();好的好的！我一定到！！咕咕咕
    child.test();报错，不能调用原型上的方法

prototype

    );
        }
    }

    P.prototype.test =  C() {
        P.call(将C的原型指定为P的属性
    C.prototype =  P();

    我是一个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

ES6 class

猜你在找的ES6相关文章