JavaScriptES6的class关键字、实例属性和静态属性、实例方法和静态方法、extends继承"✧treasuremountain✧"-

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)