本文通过构造函数方法 与 class 进行对比来讲解,这样会更好理解点
1,定义
class 的本质是 function,它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法
2,函数的使用(构造函数 与 class)
1,新建
- 构造函数创建实例
function Person(name,age){
this.name = name
this.age = age
}
const constructP = new Person('张小五',21) // {name: "张小五" age: 21}
- class 创建实例
constructor 是类的 构造器,每个类,都有构造器
程序员没有手动指定构造器,默认类内部有一个隐形的空构造器,类似于 constructor(){}
构造器作用:每当 new 这个类时候,必然会优先执行 构造器里的代码
class Animal{
constructor(name,age){
this.name = name
this.age = age
}
}
const classA = new Bnimal('张小五',10) // {name: "张小五" age: 10}
2,静态属性 与 实例属性
静态属性:直接挂载给构造函数的属性
实例属性:通过new出来的实例,访问到的动态属性
// 构造函数
constructP.name // 张小五 动态属性
constructP.info= '我是构造函数静态属性'
// class 类
classA.name // 张小五 动态属性
class Animal{
static info = '我是class类静态属性'
}
3,挂载的 静态方法 与 实例方法
静态方法:在函数原型上,添加一个静态方法
实例方法:在函数原型上,添加一个实例方法
- 构造函数
// 静态方法
constructP.show = function () {
console.log('我是面向对象挂载的show静态方法')
}
// 实例方法
constructP.prototype.say = function () {
console.log('我是面向对象挂载的say实例方法')
}
- class 类
在class类 上添加一个【实例方法】
在class类 上,通过static 修饰的属性,添加一个【静态方法】
class Bnimal{
...... // 此处添加constructor属性
say () { // 在a的原型上,查看到该方法
console.log('我是添加在class原型上的方法')
}
static show () { // 在class类 上,通过 static 修饰的属性,添加【静态方法】
console.log('我是class挂载的show静态方法')
}
}
注:类定义不会被提升,这意味着,必须在访问前对类进行定义,否则就会报错。
类中方法不需要 function 关键字;方法间不能加分号
4,继承
- class 类
通过 extends 来设置子类继承了父类元素
直接把子类的方法,添加在父类元素上,通过prototype来获取实例方法
class PersonSet{
constructor(name,age){
this.name = name
this.age = age
}
say(){ // 子类继承父类上的实例方法
console.log('打声招呼呗')
}
}
// 子类继承了父类元素的属性
class American extends PersonSet { }
const C = new Chinese('张小五',22)
console.log(C) // {name: "张小五" age: 22}
3,constructor中的 super 使用
1,为什么 里面要调用 super?
答:如果子类通过 extends 关键字继承父类,子类的 constructor 构造函数中,必须优先调用 super();
2,super 是什么东西?
super 是一个函数,子类的 super 是父类构造器 constructor 构造器的一个引用
3,为什么调用之后,实例上 name 与 age 就变成了 undefined
因为是父类构造器的引用,需要传值,不传的话,肯定是undefined
class PersonSet {
constructor(name,age){
this.name = name
this.age = age
}
}
class American extends PersonSet {
constructor(name,age){
super(name,age)
}
}
const A = new American('jack',20)
console.log(A) // American {age: 20,name: "jack"}
4,为子类挂载独有的方法或者属性
class PersonSet{
constructor(name,age){
this.name = name
this.age = age
}
}
class Chinese extends PersonSet {
constructor(name,age,number){
super(name,age)
this.number = number
}
}
const C = new Chinese ('jack',20,'3213221898xxxxxxxx')
console.log(C) // Chinese {name: "jack",age: 20,number:'3213221898xxxxxxxx'}
注:语法规范,在子类中,this 只能放到 super 之后使用
如果所有子类都共享的,就放到父类,否则直接放到子类中,即可