当前位置: 代码迷 >> 综合 >> 一分钟看懂JavaScript里的ES5和ES6中类的创建和继承
  详细解决方案

一分钟看懂JavaScript里的ES5和ES6中类的创建和继承

热度:14   发布时间:2024-02-12 08:08:28.0

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

  相关解决方案