JS笔记19：JS类

1、JS类

• 创建类

        class ClassName{
            // 类体

            //构造函数，用于创建和初始化一个class创建的对象
            // 若未定义构造函数，则JS会自动添加一个空的构造方法
            constructor(name,url){
                //也可以不传参
                this.name = name  // 定义类属性
                this.url = url
            }

        }

• 使用类
  创建对象时，会自动调用构造函数

         // 使用类，关键字new
         let c = new ClassName("Name","url2")
         console.log(c.name,c.url)  // 控制台输出：Name url2

• 类表达式

         // 类表达式
         let variable1 = class {
            // 未命名，匿名类
            // this.name = "匿名"  // 报错
            // constructor(name){
            //  this.name = "匿名类"
            // }
         }
         console.log(variable1.name)  //输出 variable1

         let variable2 = class ClassName2{
            //命名类
         }
         console.log(variable2.name)  //输出 ClassName2

• 类方法
  类中除了构造函数外，还可以添加任意数量的类方法

         // 类方法
         class ClassName3{
            constructor(name){
                this.name = name
            }
            method_1(){
                return this.name
            }
            method_2(content){
                document.getElementById("class").innerHTML = `<h1>${this.method_1()}</h1>${content}`
            }
         }
         let a = new ClassName3("百草")
         a.method_2("长大了！")

类声明和类表达式的主体都执行在严格模式下。比如，构造函数，静态方法，原型方法，getter 和 setter 都在严格模式下执行

---

2、JS类继承

    //继承 extends关键字
    //继承，增加代码复用性

    class Animal{
        constructor(name){
            //构造函数
            this._name = name
            this.age = 15
        }
        get name(){
            //get关键字 getter获取值，在严格模式下执行
            //getter负责查询值，它不带任何参数，
            return this._name
        }
        set name(content){
            //set关键字 setter设置值，在严格模式下执行；
            //setter则负责设置键值，值是以参数的形式传递，在他的函数体中，一切的return都是无效的
            this._name = content
        }
    }
    class Dog extends Animal{
        constructor(name, age){
            super(name) //super() 方法用于调用父类的构造函数
            this.age = age
        }
    }
    let d = new Dog("dog", 20)
    console.log(d.age)  // 输出dog
    document.getElementById("class").innerHTML = `${d.age}`  // 20

    let a = new Animal("动物")
    document.getElementById("class").innerHTML = a.name  //即使getter是方法，但是使用时不用使用括号
    // getter & setter方法名称与属性名不能相同
    // 一般习惯属性使用_开头；与getter&setter区分
    a.name = "修改"  // setter是一个方法，但是使用时也无需括号
    document.getElementById("class").innerHTML = a.name

• 函数声明&类声明

    // 函数声明提升，即未声明先使用，则返回undefined
    // 类声明：不会提升，需要先声明再使用，否则会报错
    let b = new B()  // 报错：Uncaught ReferenceError: B is not defined at index.html:97:13
    class B{
        // 先调用后声明，b亦会报错
    }

    let c = f
    function f(){
        // 先调用后声明，c亦正常
    }

---

3、JS静态方法

        class ClassName4{
            static say(){
                // 静态方法，又称类方法
                // 属于类，不属于对象=>仅可类名调用，不能对象调用
                return "Hello World!"
            }
        }
        let obj4 = new ClassName4()
        // document.getElementById("class").innerHTML = `<h1>${obj4.say()}</h1>`
        // 报错 index.html:118 Uncaught TypeError: obj4.say is not a function at index.html:118:63
        document.getElementById("class").innerHTML = `<h1>${ClassName4.say()}</h1>`

---

4、参考

1. JavaScript 类(class)
2. JavaScript 类继承
3. JavaScript 静态方法