ES6中新增class类-向日葵屋

ES6中新增class类

小灰灰 2023-07-17 06:26 97阅读 0赞

我们都知道JavaScript是弱类型的语言，其缺陷就是缺乏严谨性，但是在JavaScript发展的过程中需要慢慢的弥补这些缺陷，于是便在ES6中出现了类的概念。

文章目录

- - 什么是类？
  - getter 绑定属性
  - setter 设置属性
  - setter和getter结合判断赋值
  - extends 继承
  - super

什么是类？

类是具备某些共同特征的实体的集合，它是一种抽象的概念。

class Person { 
    constructor(job, name, age, sex) { 
        this.job = job;
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    print() { 
        console.log('工作:', this.job)
        console.log('姓名:', this.name)
        console.log('年龄:', this.age)
        console.log('性别:', this.sex)
    }
}
const a = new Person("程序猿", "robbit", 18, "男");
console.log(a)

在这里插入图片描述
类的声明不会提前，和let、const一样，有临时性死区
类的所有代码都在严格模式下执行的
类的所有方法都是不可枚举的

for (const prop in a) { 
    console.log(prop)
}
// job
// name
// age
// sex

类的构造器必须使用 new 调用

const a = Person("程序猿", "robbit", 18, "男");
// TypeError: Class constructor Person cannot be invoked without 'new'

类的所有方法都无法当成构造函数直接使用

const b = new a.print()
// TypeError: a.print is not a constructor

getter 绑定属性

将对象属性绑定到查询该属性时将被调用的函数。

class Person { 
    constructor(name) { 
        this.name = name;
    }
    get age() { 
        return 10
    }
    print() { 
        console.log('姓名:', this.name)
        console.log('年龄:', this.age)
    }
}
var user = new Person('robbit')
console.log(user)

在这里插入图片描述

setter 设置属性

当尝试设置属性时，set语法将对象属性绑定到要调用的函数。

class Person { 
    constructor(name, age) { 
         this.name = name;
         this.age = age;
     }
    set age(age) { 
        if (age < 0) { 
            age = 0
        } else if (age > 200) { 
            age = 200
        }
        this._age = age;
    }
    print() { 
        console.log('姓名:', this.name)
        console.log('年龄:', this.age)
    }
}
var user = new Person('robbit', 300)
console.log(user)
// Person {name: "robbit", _age: 200}

setter和getter结合判断赋值

class Person { 
    constructor(name, age) { 
        this.name = name;
        this.age = age;
    }
    get age() { 
        return this._age
    }
    set age(age) { 
        if (age < 0) { 
            age = 0
        } else if (age > 200) { 
            age = 200
        }
        this._age = age;
    }
    print() { 
        console.log('姓名:', this.name)
        console.log('年龄:', this.age)
    }
}
var user = new Person('robbit', 300)
console.log(user)

在这里插入图片描述

extends 继承

class Animal { 
    constructor(type, name, age, sex) { 
        this.type = type;
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    print() { 
        console.log(`种类 ： ${ this.type}`)
        console.log(`名字 ： ${ this.name}`)
        console.log(`年龄 ： ${ this.age}`)
        console.log(`性别 ： ${ this.sex}`)
    }
}
class Dog extends Animal { 
    constructor(name, age, sex) { 
         // 如果定义了constructor 并表示这个是子类，则必须在constructor的第一行手动调用父类的构造函数
        super("犬类", name, age, sex) 
    };
}
const d = new Dog("旺财", 5, "公");
// Dog {type: "犬类", name: "旺财", age: 5, sex: "公"}

super

如果定义了constructor 并表示这个是子类，则必须在constructor的第一行手动调用父类的构造函数，但是super如果说当成对象使用，则表示父类的原型。

class Animal { 
    constructor(type, name, age, sex) { 
        this.type = type;
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    print() { 
        console.log(`种类 ： ${ this.type}`)
        console.log(`名字 ： ${ this.name}`)
        console.log(`年龄 ： ${ this.age}`)
        console.log(`性别 ： ${ this.sex}`)
    }
}
class Dog extends Animal { 
    constructor(name, age, sex) { 
        super("犬类", name, age, sex);
        this.loves = "吃骨头"
    }
    print() { 
        super.print();
        console.log(`爱好 ： ${ this.loves}`)
    }
}
const d = new Dog("旺财", 5, "公");
console.log(d);
// Dog {type: "犬类", name: "旺财", age: 5, sex: "公", loves: "吃骨头"}