ES6——03(类)

目录

• 类的创建与方法
• 类的继承
• 拓展-----模板字符串
• 练习

类的创建与方法

语法

class Student{
}

构造方法

 //构造方法
        constructor(na,age){
            this.name=na;   //属性
            this.age=age;
            this.area="江西";
            console.log("Student构造方法...");
        }

普通方法

 //普通方法
        sayHi(){
            console.log("名字="+this.name);
            console.log("年龄="+this.age);
        }

静态方法

//静态方法
        static sa(){
            console.log("名字="+this.name);
            console.log("年龄="+this.age);
        }

getset方法

		get name(){
            console.log("正在取值");
            return this._name;   //防止递归所以不能直接return this.name;
        }
        set name(v){
            console.log("正在赋值");
            this._name=v;
        }

注意点：不能直接返回this.name会导致递归无限死循环

测试

	//new 对象
    let pk=new Student("碰磕",18);
    pk.sayHi();
    Student.sa();
    console.log(pk.name);

类的继承

//继承
    class Boy extends Student{
        constructor(na,age){
            super(na,age);//不写会报错
            console.log("男选手的构造方法");
        }
    }

是否继承成功√

打印父类的属性area

 	let boy1=new Boy("张三",11);
    console.log(boy1.area);//江西(继承成功)

模板字符串

用`(反引号)标识,用${}将变量括起来

实例

let name1='碰磕';
    let age=16;
    let t=`
        <div>
            <h3>名字=${name1}</h3>
            <p>年龄=${age}</p>    
        </div>
    `;
    console.log(t);

最终拼接成的字符串

练习

1、通过ES6语法创建学生类（姓名，性别，班级）和游戏类（名称，公司，发行年份），添加各自的构造方法。

//1
   class Students{
       constructor(xm,sex,ban){
            this.name=xm;
            this.sex=sex;
            this.ban=ban;
       }
   }
   class Game{
       constructor(mc,gs,time){
           this.mc=mc;
           this.gs=gs;
           this.time=time;
       }
   }

2、创建一个学生（姓名，性别，班级）数组，通过模板字符串拼接显示学生的所有信息（表格）

//2
let stumap=new Map();
   stumap.set("name","碰磕");
   stumap.set("sex","男");
   stumap.set("cls","c1901");
   for (const [key,val] of stumap) {
    let stuinfo=`<table border="1px"><tr><td>${val}</td></tr></table>`;
    console.log(stuinfo);
   }

3、创建一个游戏数组（名称，公司，发行年份），通过模板字符串拼接显示游戏的所有信息（无序列表）

//3
   let gamemap=new Map();
   gamemap.set("mc","王者荣耀");
   gamemap.set("gs","天美工作室");
   gamemap.set("time","2004-1-1");
   for (const [key,val] of gamemap) {
       let gameinfo=`<ul><li>${val}</li></ul>`;
       console.log(gameinfo);
   }

Es6类的练习就完结了
欢迎各位在评论区积极参与讨论练习。