ES6中class类教程(基础部分)
一、constructor(构造器)(今后用的多)
-
constructor构造器的作用就是,每当 new 这个类的时候,必会优先执行constructor构造器中的代码;
传统构造函数:
function Animal (name, age) { //实例属性 this.name = name; this.age = age; } const a1 = new Animal('dog', 3);
class类:
class Animal {
constructor(name, age){
//实例属性
this.name = name;
this.age = age;
}
}
const a2 = new Animal('cat', 2);
-
每一个class类中,都有一个constructor构造器,如果没有手动指定constructor构造器,那么可以认为class类内部,有个隐形的,空的constructor构造器。
class Animal { //constructor(){ 这里就是隐形的,空的constructor构造器 //} }
二、使用 static 创建静态属性(今后用的不多)
- 什么是静态属性:
通过 “构造函数” 直接访问到的属性;
例如下面的 sounds,直接挂载给了 Animal ,所以 sounds 是 静态属性
function Animal (name, age) {
this.name = name;
this.age = age;
}
Animal.sounds = 'yayaya';
console.log(Animal.sounds)// yayaya
const a1 = new Animal('dog', 3);
console.log(a1.sounds)// undefined
console.log(a1.name)//dog
console.log(a1.age)//3
相反的是,name,age,能被new出来的实例a1所访问到,所以 name 和 age 是 实例属性
-
在 class 内部怎么定义 静态属性
通过 static 关键字修饰的属性,就是 静态属性
class Animal { constructor(name, age){ this.name = name; this.age = age; } static sounds = 'yayaya'; } console.log(Animal.sounds)//yayaya const a2 = new Animal('cat', 2); console.log(a2.sounds)//undefined console.log(a2.name)//cat console.log(a2.age)//2
三、实例方法(今后会经常用到)
- 什么是 实例方法 :
能被new出来的实例所访问的方法
-
传统构造函数定义实例方法的方式:
function Animal (name, age) { this.name = name; this.age = age; } Animal.prototype.sounds = function () { console.log('yayaya') } const a1 = new Animal('dog', 3); a1.sounds()//yayaya
-
class类中,定义实例方法的方式:
class Animal { constructor(name, age){ this.name = name; this.age = age; } sounds () { console.log('yayaya') } } const a2 = new Animal('cat', 2); a2.sounds()//'yayaya'
class内部定义实例方法,与constructor,static平级定义
通过控制台打印 a1 和 a2 可以看到,实例方法都是定义在了原型链上,所以两种方法本质上并没有区别。
四、使用 static 创建静态方法(今后用的不多)
静态方法就是挂载到构造函数上的方法,new 出来的 实例 访问不到;
-
传统构造函数定义静态方法的方式:
function Animal (name, age) { this.name = name; this.age = age; } Animal.sounds = function () { console.log('yayaya') } Animal.sounds() //yayaya const a1 = new Animal('dog', 3); a1.sounds()// 报错:a1.sounds is not a function
-
class类 内部定义静态方法的方式:
class Animal { constructor(name, age){ this.name = name; this.age = age; } static sounds () { console.log('yayaya') } } Animal.sounds() //yayaya const a2 = new Animal('cat', 2); a2.sounds() // 报错:a2.sounds is not a function
在class类内部,定义静态属性和静态方法都是通过static关键字来修饰的!
注意事项:
在class类内部的{ }区间内,只能写constructor构造器、static静态方法、static静态属性和实例方法(实例属性在constructor构造器内)!
class类中extends,super的进阶文章请看下一篇文章!