Class关键字
class关键字是ES6的新特性
例如
若创建一个动物类
则需要：
class Animal{
}
(有Java的感觉了…)
构造器
用constructor创建构造器 其意义和Java的构造函数相同(如果你会Java的话…)
每个类中都有一个构造器 若没有手动指定 那么默认每个类中有个看不见的空构造器
构造器的作用是每当new这个类的时候首先执行构造器中的代码 常用于初始化赋值
class Animal{
// 类中的构造器
constructor (name,age)
{
this.name=name;
this.age=age;
}
}
实例属性和静态属性
【实例属性】 是通过new出来的实例访问到的属性
像这样：
function Person(name,age)
{
this.name=name;
this.age=age;
}
console.log(p1.name) // 实例属性
console.log(p1.age) // 实例属性
或是：
class Animal{
// 类中的构造器
constructor (name,age)
{
this.name=name; // 实例属性
this.age=age; // 实例属性
}
}
console.log(a1.name)
console.log(a1.age)
【静态属性】是通过构造函数直接访问到的属性
比如：
function Person(name,age)
{
this.name=name;
this.age=age;
}
// 在这里address属性直接挂载给了构造函数 所以是静态属性
Person.address="XX路"
console.log(Person.address)
或是 用static修饰：
class Animal{
// 类中的构造器
constructor (name,age)
{
this.name=name; // 实例属性
this.age=age; // 实例属性
}
// 在class内部通过static修饰的属性即【静态属性】
static address="XX路"
}
console.log(Animal.address)
(Java练习生表示很轻松 but前端可能需要花时间理解一下这些概念)
实例方法和静态方法
实例方法 即挂载到原型对象prototype上的方法
比如：
function Person(name,age)
{
this.name=name;
this.age=age;
}
// 实例方法
Person.prototype.speak=function()
{
console.log("Person的实例方法")
}
p1.speak();
或是：
class Animal{
constructor (name,age)
{
this.name=name;
this.age=age;
}
woof()
{
console.log("woof woof woof!")
}
}
a1.woof();
静态方法 即挂载构造函数上的方法
比如：
function Person(name,age)
{
this.name=name;
this.age=age;
}
// 静态方法
Person.speak=function()
{
console.log("Person的实例方法2")
}
Person.speak();
或是：
class Animal{
constructor (name,age)
{
this.name=name;
this.age=age;
}
static woof()
{
console.log("woof woof woof!")
}
}
Animal.woof();
实例方法在调用时 通过创建出的对象调用
而静态方法在调用时 只能直接通过类调用
注意点：
- 1、在class的内部 只能写构造器 静态属性/方法 实例方法
- 2、class内部还是采用原本的function的方式 只是外部进行了优化 本质没变 因此class关键字也被称为语法糖
继承(extends)
有两个类 分别是狗和猫：
// 狗
class Dog
{
constructor(name,age)
{
this.name=name;
this.age=age;
}
}
const d1=new Dog("狗",2)
console.log(d1)
// 猫
class Cat
{
constructor(name,age)
{
this.name=name;
this.age=age;
}
}
const c1=new Cat("猫",1)
console.log(c1)
出现冗余代码
此时 可以抽取它们的共有构造作为父类
在class类中 可使用extends关键字以实现子类继承父类
子类在创建时 会使用父类的构造函数
像这样：
// 父类
class Animal
{
constructor(name,age)
{
this.name=name;
this.age=age;
}
}
// 狗
class Dog extends Animal
{
}
const d1=new Dog("狗",2)
console.log(d1)
// 猫
class Cat extends Animal
{
}
const c1=new Cat("猫",1)
console.log(c1)
子类也可以继承父类的方法并直接使用：
// 父类
class Animal
{
constructor(name,age)
{
this.name=name;
this.age=age;
}
say()
{
console.log("bbbbb...")
}
}
class Dog extends Animal
{
}
const d1=new Dog("狗",2)
d1.say();
class Cat extends Animal
{
}
const c1=new Cat("猫",1)
c1.say();
super函数
若一个子类通过extends关键字继承了父类 那么 必须在子类的constructor内调用super()
super是一个函数 是父类的构造器(constructor)的引用 可以将super视为父类的构造器
super可以传递参数
// 父类
class Animal
{
constructor(name,age)
{
this.name=name;
this.age=age;
}
}
// 狗
class Dog extends Animal
{
constructor(name,age)
{
super(name,age) // 将参数通过super传给父类
}
}
const d1=new Dog("狗",2)
console.log(d1)
// 猫
class Cat extends Animal
{
}
const c1=new Cat("猫",1)
console.log(c1)
子类独有属性
当子类有某个属性 而其父类的其它子类没有该属性
那么此时 可定义子类的独有属性
将参数传给子类的构造器中 然后用this关键字指定即可
需要注意的是：独有的属性必须放在super的后面
// 父类
class Animal
{
constructor(name,age)
{
this.name=name;
this.age=age;
}
}
// 在class类中 可使用extends关键字以实现子类继承父类
// 狗
class Dog extends Animal
{
constructor(name,age,id)
{
super(name,age)
this.id=id; // 独有的属性必须放在super的后面
}
}
const d1=new Dog("狗",2,"001")
console.log(d1)
// 猫
class Cat extends Animal
{
}
const c1=new Cat("猫",1)
console.log(c1)