ES6 入门第七章 class类

ES6 入门第七章

class类

ES6 提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

知识点：

1）class 声明类

2）constructor 定义构造函数初始化

3）extends 继承父类

4）super 调用父级构造方法

5）static 定义静态方法和属性

6）父类方法可以重写

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写法

//class
class Phone{
//构造方法 名字不能修改
	constructor(brand,price){
		this.brand = brand;
		this.price = price;
}

//方法必须使用该语法，不能使用 ES5 的对象完整形式
	call(){
		console.log("我可以打电话！！");
	}
}
let onePlus = new Phone("1+",1999);
console.log(onePlus);

class 静态成员

class Phone{
	//静态属性
	static name = '手机';
	static change(){
		console.log("我可以改变世界")
	}
}
			
let nokia = new Person();
console.log(nokia.name);
console.log(Phone.name);

使用static 标注的属性和方法它属于类，不属于实例对象

类继承

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.playGame = function(){
	console.log("我可以玩游戏")
}
			
const chuizi = new SmartPhone('锤子',2499,'金色','5.5inch');		
console.log(chuizi);

ES6 实现类继承

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);//Phone.call(this,brand,price)
					this.color = color;
					this.size = size;
	}
				
	photo(){
		console.log("拍照");
	}
				
	playGame(){
		console.log("玩游戏");
	}
}
			
const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
console.log(xiaomi);
xiaomi.call();
xiaomi.photo();
xiaomi.playGame();

子类对父类方法的重写

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);//Phone.call(this,brand,price)
					this.color = color;
					this.size = size;
	}
				
	photo(){
		console.log("拍照");
	}
				
	playGame(){
		console.log("玩游戏");
	}
	
	call(){
		console.log("我可以进行视频通话");
	}
}
			
const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
console.log(xiaomi);
xiaomi.call();
xiaomi.photo();
xiaomi.playGame();

class的 set 和 get

get 取值函数

//get 和 set
class Phone{
	get price(){
		console.log("价格属性被读取了");
	}
}

//实例化对象
let s = new Phone();
console.log(s.price);

class Phone{
	get price(){
		console.log("价格属性被读取了");
		return '价格是多少呢？？？待定……';
	}
}

//实例化对象
let s = new Phone();
console.log(s.price);

return 返回了值，所以 s.price 的值就为 return 的值

set 存值函数

class Phone{
	get price(){
		console.log("价格属性被读取了");
		return '价格是多少呢？？？待定……';
	}

	set price(newVal){
		console.log('价格属性被修改')
	}
}
//实例化对象
let s = new Phone();
s.price = 'free';

因为给s.price赋了值，所以调用了set。