【前端】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.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>