JavaScript 的面向对象和继承,是经常用到的方式和方法。
一、传统方法写类(ES5)
// 1. 构造函数
let Person = function({name,age,height}={}){this.name = name ;this.age = age ;this.height = height ;
};
// 2. 原型添加方法
Person.prototype.showName = function(){console.info(`${this.name} 今年 ${this.age} 岁`);
};// 3. 创建子类,并继承
let Teacher = function({name,age,height,school}={}){Person.call(this,{name:name,age:age,height:height});this.school = school ;
};
// 继承父类方法
// 方式一:原型链继承
/* for(let item in Person.prototype ){Teacher.prototype[item] = Person.prototype[item];}*/// 方式二:Object.create()
// Teacher.prototype = Object.create( Person.prototype );// 方式三:调用构造函数继承
Teacher.prototype = new Person();// 子类自己的方法
Teacher.prototype.showSchool = function(){console.info(`我来自 ${this.school}`);
};// 4. 创建对象
let zhangsan = new Teacher({name : "张三",age : 29 ,height: "180cm",school:"重庆工程学院"
});
zhangsan.showName(); // 调用父类方法
zhangsan.showSchool(); // 调用自己的方法
二、ES6 新增 class 写法
class Person{//1. 构造器:内部写属性constructor({name,age,height}){this.name = name ;this.age = age ;this.height = height ;}//2. 添加方法showName(){console.info(`${this.name} 今年 ${this.age} 岁`);}
}
// extends 继承
class Teacher extends Person{constructor({name,age,height,school}={}){// 继承属性。方法会通过 extends 自动继承super({name:name,age:age,height:height});this.school = school ;}//3. 添加子类自己的方法showSchool(){console.info(`我来自 ${this.school}`);}
}// 4. 创建对象
let zhangsan = new Teacher({name : "张三",age : 29 ,height: "180cm",school:"重庆工程学院"
});
zhangsan.showName(); // 调用父类方法
zhangsan.showSchool(); // 调用自己的方法
注:构造函数的参数使用了对象结构的写法。对于 ES6 的解构,参考这篇文章 一文看懂 ES6 解构赋值
ES6 太方便了,是时候拥抱 ES6 了。