【前端】ES6：Class语法和Class继承

文章目录

1 Class语法
- 1.1 类的写法
- 1.2 getter与setter
- 1.3 静态属性和静态方法
2 Class继承

1 Class语法

1.1 类的写法

class Person {constructor(name,age){this.name = name;this.age = age;}say(){console.log(this.name,this.age)}
}
let obj = new Person("kerwin",100)
console.log(obj)

1.2 getter与setter

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul id="list"></ul>
<script>class List{constructor(ele){this.element = ele}get html(){return this.element.innerHTML}set html(arr){// 生成值为aaa, bbb, cccc的列表this.element.innerHTML = arr.map(item=>`<li>${item}</li>`).join("")}
}
let obj = new List(document.querySelector("#list"))
obj.html = ["aaa","bbb","cccc"]
</script>
</body>
</html>

1.3 静态属性和静态方法

class Person {static name = "Person这个类"constructor(name,age){this.name = name;this.age = age;}say(){console.log(this.name,this.age)}static eat(){console.log("eat")}
}
let obj = new Person("kerwin",100)// ES6之前的写法
// Person.myname = "person类的名字"
// Person.mymethod = function(){
//     console.log("mymethod")
// }console.log(Person.name)
Person.eat()

2 Class继承

ES6 规定，子类必须在constructor()方法中调用super()，否则就会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。如果不调用super()方法，子类就得不到自己的this对象。

class Person {static name = "Person这个类"constructor(name,age){this.name = name;this.age = age;}say(){console.log(this.name,this.age)}static eat(){console.log("eat")}
}
class Student extends Person{constructor(name,age,score){super(name,age)this.score = score}say(){super.say()console.log(this.score)}static eat(){super.eat();console.log("student eat")}
}
let obj = new Student("kerwin",100,200)
console.log(obj)
obj.say()
Student.eat()

例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="box1"><h1></h1><ul></ul></div><div class="box2"><h1></h1><img src="" alt="" style="width:100px;"><ul></ul></div><script>var data1 = {title: "体育",list: ["体育-1", "体育-2", "体育-3"]}var data2 = {title: "综艺",url: "https://pic.maizuo.com/usr/movie/5011ee407fb407d47e333a3935ec33d1.jpg?x-oss-process=image/quality,Q_70",list: ["综艺-1", "综艺-2", "综艺-3"]}class CreatBox{constructor(select,data){this.ele = document.querySelector(select) // <div class="box1">this.title = data.title // "体育"this.list = data.list   // ["体育-1", "体育-2", "体育-3"]this.render()}render(){let oh1 = this.ele.querySelector("h1")let oul = this.ele.querySelector("ul")oh1.innerHTML = this.titleoul.innerHTML = this.list.map(item=>`<li>${item}</li>`).join("")}}new CreatBox(".box1",data1)class CreateImgBox extends CreatBox{constructor(select,data){super(select,data)// 虽然父类中已经执行了render()，但这个时候找不到img标签，所以需要再次调用render()this.imgUrl = data.urlthis.render()}render(){// console.log("111111",this.imgUrl)super.render()let oimg = this.ele.querySelector("img")oimg.src=  this.imgUrl}}new CreateImgBox(".box2",data2)</script>
</body>
</html>