继承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
联系客服
