ES6 class类和继承
2022-05-07 本文已影响0人
生命里那束光
一、class 类
1. 概述
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。
- 通过 class 关键字，可以定义类。
- 基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已；
2. 知识点
class声明类；类构造函数
constructor定义构造函数初始化；
constructor关键字用于在类定义块内部创建类的构造函数。方法名constructor会告诉解释器在使用new操作符创建类的实例对象时，应该调用此方法。
extends继承父类；
super调用父级构造方法；
static定义静态方法和属性；父类方法可以重写；
3. class类的构成
- 类可以包含构造函数方法、原型方法、实例方法、获取函数、设置函数和静态方法。但是不必要的。空的类定义同样有效。默认情况下，类定义中的代码都是在严格模式下进行的。
代码实现：
<body>
<script>
// ES5写法
function Phone(brand,price){
this.brand = brand;
this.price = price;
}
// 添加方法
Phone.prototype.call = function(){
console.log("我可以打电话！");
}
// 实例化对象
let HuaWei = new Phone("华为",5999);
HuaWei.call();
console.log(HuaWei);
// ES6写法
class Phone{
// 构造方法，名字是固定的
constructor(brand,price) {
this.brand = brand;
this.price = price;
}
// 打电话，方法必须使用该方式写
call(){
console.log("我可以打电话！");
}
}
let HuaWei = new Phone("华为",5999);
HuaWei.call();
console.log(HuaWei);
</script>
</body>
运行结果：
实例化
使用new操作符实例化类时，相当于使用new调用其的构造函数。构造流程图如下：
- 创建一个空对象，作为将要返回的对象实例。
- 将这个空对象的原型，指向构造函数的
prototype属性。- 将这个空对象赋值给函数内部的this关键字。
- 开始执行构造函数内部的代码。(完成赋值等操作)
- 最后返回这个对象。
注意事项：
-
constructor构造函数不是必需的。不定义构造函数时相当于将构造函数定义为空函数。 - 类构造函数与构造函数的区别：调用类的构造必须使用new操作符，而普通构造函数可以使用new，也可以不使用new。
- 类可以认为是特殊的构造函数。typeof操作符检测一个类时，返回的结果为
function。同时类中有[[Prototype]]属性，此属性中的constructor属性指向自身。与构造函数相同。
4. class静态成员
注意事项：
ES5中，类函数对象和实例对象，属性（静态对象）互不相通
静态对象：在面向对象编程中，属于类函数对象，但不属于实例对象
ES6中，静态对象用
static定义// ES6写法 class Phone{ // 静态属性 static name = "手机"; static change(){ console.log("我可以改变世界！"); } }
二、ES5 组合继承（构造函数）
代码实现：
<body>
<script>
// ES5构造函数继承
// 手机
function Phone(brand,price){
this.brand = brand;
this.price = price;
}
Phone.prototype.call = function(){
console.log("我可以打电话！");
}
// 智能手机
function SmartPhone(brand,price,color,size){
//继承原来类的方法
Phone.call(this,brand,price);
this.color = color;
this.size = size;
}
// 设置子级构造函数的原型 //继承原来类的方法
SmartPhone.prototype = new Phone;
SmartPhone.prototype.constructor = SmartPhone;
// 声明子类的方法
SmartPhone.prototype.photo = function(){
console.log("我可以拍照！");
}
SmartPhone.prototype.game = function(){
console.log("我可以玩游戏！");
}
const chuizi = new SmartPhone("锤子",2499,"黑色","5.5inch");
console.log(chuizi);
chuizi.call();
chuizi.photo();
chuizi.game();
</script>
</body>
运行结果：
三、ES6class类继承
代码实现：
<body>
<script>
// ES6class类继承
class Phone{
constructor(brand,price) {
this.brand = brand;
this.price = price;
}
call(){
console.log("我可以打电话！");
}
}
//SmartPhone类 继承 Phone类
class SmartPhone extends Phone{
// 构造函数 继承属性
constructor(brand,price,color,size) {
super(brand,price); // 调用父类构造函数
this.color = color;
this.size = size;
}
photo(){
console.log("我可以拍照！");
}
game(){
console.log("我可以玩游戏！");
}
}
const chuizi = new SmartPhone("小米",1999,"黑色","5.15inch");
console.log(chuizi);
chuizi.call();
chuizi.photo();
chuizi.game();
</script>
</body>
运行结果：
四、子类对父类方法重写
代码实现：
<body>
<script>
// ES6class类继承
class Phone{
constructor(brand,price) {
this.brand = brand;
this.price = price;
}
call(){
console.log("我可以打电话！");
}
}
//定义子类
class SmartPhone extends Phone{
// 构造函数
constructor(brand,price,color,size) {
super(brand,price); // 调用父类的属性
this.color = color;
this.size = size;
}
// 子类对父类方法重写
// 直接写，直接覆盖
// 注意：子类无法调用父类同名方法
call(){
console.log("我可以进行视频通话！");
}
photo(){
console.log("我可以拍照！");
}
game(){
console.log("我可以玩游戏！");
}
}
const chuizi = new SmartPhone("小米",1999,"黑色","5.15inch");
console.log(chuizi);
chuizi.call();
chuizi.photo();
chuizi.game();
</script>
</body>
运行结果：
五、class中的getter和setter设置
CLASS类里面可以设置getter和setter方法，
- getter可以获取一些方法
- setter可以设置一些方法
代码实现：
<body>
<script>
// class中的getter和setter设置
class Phone{
get price(){
console.log("价格属性被读取了！");
// 返回值
return 123;
}
set price(value){
console.log("价格属性被修改了！");
}
}
// 实例化对象
let s = new Phone();
console.log(s.price); // 返回值
s.price = 2999;
</script>
</body>
运行结果：
