ES6中的类

一、关于类/class:

类是一种对象的模板，ES6 的 class 可以看作只是一个语法糖，它的绝大
部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像
面向对象编程的语法而已。

class Person{ //构造类
 constructor(name,age){ 
	 console.log(`构造函数执行了, ${name}, ${age}`); // 构造方法(函数), 调用new，自动执行
	 }
 }
 console.log(typeof Person); //function
 let p1 = new Person('Strive',18);

构造函数的 prototype 属性，在 ES6 的“类”上面继续存在。事实上，类
的所有方法都定义在类的 prototype 属性上面。

class应用

文本框输入颜色，失去焦点后改变body背景色

请输入网页的背景颜色<input type="text" id="color" onblur="getColor()">
<script type="text/javascript">
	//1 获取颜色
	function getColor(){
		let colorObj = document.getElementById("color").value;
		let e = new Bgcolor(colorObj)
		e.showBg()
	}
	//2 主体类--构造函数
	class Bgcolor{
		constructor(color) {
		    this.color = color
		}
		showBg(){
			document.body.style.backgroundColor=this.color;
		}
	}
</script>

将类赋给一个表达式或变量

const Person = class{	//将类赋给一个表达式或变量
constructor(name,age) {
    this.name = name;
	this.age = age;
}
showName(){
	return `名字为:${this.name}`
}
showAge(){
	return `年龄:${this.age}`
}
}
console.log(typeof(Person))	//function
let p1 = new Person('ES6',6);
console.log(p1.showName(),p1.showAge())

ES6 里面 class 没有提升功能，必须在定义好了以后再执行。在 ES5，用函数模拟
可以，默认函数提升
类没有预解析，必须先定义再使用，以下是错误写法

 let p1 = new Person();
 console.log(p1.name);
 class Person{
	 constructor(){
		 this.name ='aaa';
	 }
 }

类必须使用 new 调用，否则会报错。

class Point {
 // ...
}
// 报错
var point = Point(2, 3);
// 正确
var point = new Point(2, 3);

二、类的其它用法

在“类”的内部可以使用 get 和 set 关键字，对某个属性设置取值函数和存值函数，拦截该属性的存取行为。

class Person{
constructor() {
    
}
get aaa(){
	return `aaa的属性`;	//用于返值
}
set aaa(val){
	console.log(`设置aaa属性，值为:${val}`); //设置好aaa的值供后面调用时捕获
}
}
let p1 = new Person();
p1.aaa = '123';
console.log(p1.aaa)

静态方法: 所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static 关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”

class Person{
constructor() {
    
}
showName(){
	return '这是showName方法';
}
static aaa(){
	return '这是静态方法';	//就是类身上方法，不受p1限制，只为Person服务
}
}
let p1 = new Person();
console.log(p1.showName())
console.log(p1.aaa())