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 了。