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

2020-06-09 22:02:23 阅读：210 来源： 互联网

标签：ES6 console name age 实例 log Animal class 属性

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)

标签：ES6,console,name,age,实例,log,Animal,class,属性
来源： https://blog.csdn.net/Piconjo/article/details/106611319

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9