JS:ES6-10 class类

最新推荐文章于 2023-12-18 21:01:26 发布

小白目

最新推荐文章于 2023-12-18 21:01:26 发布

阅读量391

点赞数 1

分类专栏： ES6 -- 11 文章标签： javascript 前端开发语言 es6 ecmascript

本文链接：https://blog.csdn.net/qq_37974755/article/details/122115467

版权

ES6 -- 11 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

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

方法：

1. class 声明类；

2. constructor 定义构造函数初始化；

3. extends 继承父类；

4. super 调用父级构造方法；

5. static 定义静态方法和属性；

6. 父类方法可以重写；

class 基本实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class类</title>
</head>
<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>
</html>

class静态成员方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class静态成员</title>
</head>
<body>
<script>
// class静态成员
// ES5写法
// function Phone(){}
// Phone.name = "手机";
// Phone.change = function(){
// console.log("我可以改变世界！");
// }
// let nokia = new Phone();
// console.log(nokia.name); // undefined
// // nokia.change();
// // 报错：Uncaught TypeError: nokia.change is not a function
// Phone.prototype.color = "黑色";
// console.log(nokia.color); // 黑色
// console.log(Phone.name);
// Phone.change();
// 注意：实例对象和函数对象的属性是不相通的
// ES6写法
class Phone{
// 静态属性
static name = "手机";
static change(){
console.log("我可以改变世界！");
}
}
let nokia = new Phone();
console.log(nokia.name);
console.log(Phone.name);
Phone.change();
</script>
</body>
</html>

class类继承：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6class类继承</title>
</head>
<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;
}
photo(){
console.log("我可以拍照！");
}
game(){
console.log("我可以玩游戏！");
}
}
const chuizi = new SmartPhone("小米",1999,"黑色","5.15inch");
console.log(chuizi);
chuizi.call();
chuizi.photo();
chuizi.game();
</script>
</body>
</html>

子类对父类方法重写：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6class类继承</title>
</head>
<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>
</html>

class中的getter和setter设置（Getters和Setters使你可以快速获取或设置一个对象的数据。一般来说，一个对象拥有两个方法，分别用于获取和设置某个值）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class中的getter和setter设置</title>
</head>
<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>
</html>