es6的class

原创已于 2022-05-22 21:18:14 修改 · 146 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #java

于 2021-09-05 10:47:38 首次发布

前端专栏收录该内容

48 篇文章

订阅专栏

本文详细介绍了ES6中class关键字的使用，包括构造函数的定义、继承机制、super的运用以及静态方法和属性。通过实例演示了如何创建类、构造函数的自动调用、子类继承和封装属性。

class语法基础

ES6通过class关键字，可以定义类。ES6的class本质上是构造函数的一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而己，用法几乎与java的class相同了。函数声明和类声明之间的区别在于, 函数声明会提升，类声明不会。

知识点:

class 声明类
constructor 定义构造函数，用来初始化对象属性，通过new生成实例对象时，constructor() 方法会被自动调用，默认返回对象实例。如果没有定义constructor构造函数，JavaScript 将添加一个不可见的空构造方法。
extends 继承父类，父类的静态方法和属性不能被实例继承，但会被子类继承
super() 方法引用父类的构造方法。通过在构造方法中调用 super() 方法，我们调用了父类的构造方法，这样就可以访问父类的属性和方法。
static定义静态方法和属性，静态方法和静态属性属于类，不属于实例对象，只能通过类名.XX / 类名.XX() 来调用。
父类方法可以重写

类中我们可以使用 getter 和 setter 来获取和设置值

<script>
	//构造函数function Phone()的语法糖
	class Phone{
		static userYear = 3;
		//构造方法，方法名不能改变
		constructor(name,price){
			this.name = name;
			this.price = price;
		}
		static startPhone(){
			console.log("开机");
		}
		calls(){
			console.log(this);//this为该class
			console.log("我要使用"+this.name+"打电话");
		}
		applys(){
			//调用该类的其他静态方法
			Phone.startPhone();
			//调用该类的其他非静态方法
			this.calls();
		}
	}
	
	const one = new Phone("huawei",4500);
	one.calls();
	//静态方法和静态属性属于类，不属于实例对象，只能通过 类名.XX / 类名.XX() 来调用。
	console.log(one.userYear);//undefined
	console.log(Phone.userYear);//3
	Phone.startPhone();//开机
	
	//子类继承
	class SmartPhone extends Phone{
		constructor(name,price,color,size){
			//super调用父类的构造方法，只能在constructor中使用
			super(name,price);
			this.color = color;
			this.size = size;
		}
		
		play(){
			console.log("玩游戏");
		}
		
		//父类方的重写
		calls(){
			console.log("我要使用"+this.name+"打视频电话");
		}
	}
	const xiaomi = new SmartPhone("小米",2000,"红色",25);
	xiaomi.calls();//我要使用小米打视频电话			
</script>

*属性定义两种定义属性的方式：构造器 & 顶层定义

在这里插入图片描述

顶层定义的意义：

// 1. 建立只读变量
class Course1 {
  constructor(teacher, course) {
    this._teacher = teacher;
    this.course = course;
  }
  get teacher() {
    return this._teacher;
  }
}
const course1 = new Course1('YY', 'ES6');
course1.teacher = '222'; // 无法改变，但不会报错

// 2. 实现一个私有属性 - 闭包
// 方法一：
class Course2 {
  constructor(teacher, course) {
    this._teacher = teacher;
    // 在constructor作用域中定义局部变量，内部通过闭包的形式对外暴露该变量
    let _course = 'es6';

    this.getCourse = () => {
      return _course;
    }
  }
}
// 方法二：
class Course3 {
  #course = 'es6';
  constructor(teacher) {
    this._teacher = teacher;
    }
  }
  get course() {
    return `${#course}~`;
  }
  set course(val) {
    if (val) {
      this.#course = val;
    }
  }
}

// 3. 封装核心 - 适配器模式
// 底层封装好通用core服务
class Utils {
  constructor(core) {
    this._main = core;
    this._name = 'myName';
  }
  get name() {
    ...this._main.name,
    name: ${this._name}
  }
  set name(val) {
    this._name = val;
  }
}