JavaScript ES6的class关键字、实例属性和静态属性、实例方法和静态方法、extends继承

你的名字 2023-02-16 04:19 21阅读 0赞

## 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)

--------------------