2.15. class 类
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。
基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
知识点：
-
class 声明类
-
constructor 定义构造函数初始化
-
extends 继承父类
-
super 调用父级构造方法
-
static 定义静态方法和属性
-
父类方法可以重写
-
class的get、set
// 父类
class Phone {
// 构造方法
constructor(brand, color, price) {
this.brand = brand;
this.color = color;
this.price = price;
}
// 对象方法
call() {
console.log('我可以打电话!!!')
}
}
// 子类
class SmartPhone extends Phone {
constructor(brand, color, price, screen, pixel) {
super(brand, color, price);
this.screen = screen;
this.pixel = pixel;
}
// 子类方法
photo() {
console.log('我可以拍照!!');
}
playGame() {
console.log('我可以玩游戏!!');
}
// 方法重写
call() {
console.log('我可以进行视频通话!!');
}
// 静态方法
static run() {
console.log('我可以运行程序')
}
static connect() {
console.log('我可以建立连接')
}
}
// 实例化对象
const Nokia = new Phone('诺基亚', '灰色', 230);
const iPhone6s = new SmartPhone('苹果', '白色', 6088, '4.7inch', '500w');
iPhone6s.playGame(); // 调用子类方法
iPhone6s.call(); // 调用重写方法
SmartPhone.run(); // 调用静态方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类声明</title>
</head>
<body>
<script>
//手机
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);
//class
class Shouji {
//构造方法 名字不能修改
constructor(brand, price) {
this.brand = brand;
this.price = price;
}
//方法必须使用该语法, 不能使用 ES5 的对象完整形式
call() {
console.log("我可以打电话!!");
}
}
let onePlus = new Shouji("1+", 1999);
console.log(onePlus);
</script>
</body>
</html>
class的静态成员
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静态成员</title>
</head>
<body>
<script>
function Phone() { }
Phone.name = '手机';
Phone.change = function () {
console.log("我可以改变世界");
}
Phone.prototype.size = '5.5inch';
let nokia = new Phone();
console.log(nokia.name);
// nokia.change();
console.log(nokia.size);
// ---------------------------------
class Phone2 {
//静态属性
static name = '手机';
static change() {
console.log("我可以改变世界");
}
}
let nokia = new Phone2();
console.log(nokia.name);
console.log(Phone.name);
</script>
</body>
</html>
class的类继承，子类对父类方法的重写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类继承-2</title>
</head>
<body>
<script>
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();
</script>
</body>
</html>
class 的get 和 set
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>get 和 set</title>
</head>
<body>
<script>
// get 和 set
class Phone {
get price() {
console.log("价格属性被读取了");
return 'iloveyou';
}
set price(newVal) {
console.log('价格属性被修改了');
}
}
// 实例化对象
let s = new Phone();
console.log(s.price); // iloveyou
s.price = 'free';
console.log(s.price); // iloveyou
// 补充
let temp = 666
class Phone {
get price() {
console.log('get---')
return temp
}
set price(newPrice) {
console.log('set---')
temp = newPrice
}
}
const p = new Phone()
console.log(p.price) // 666
p.price = 888
console.log(p.price) // 888
</script>
</body>
</html>