文章目录
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.title
oul.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.url
this.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>