class 类

2020-12-29  本文已影响0人  jasmine_6aa1

本文通过构造函数方法 与 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 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 Bnimal{
     ...... // 此处添加constructor属性
    say () { // 在a的原型上,查看到该方法
         console.log('我是添加在class原型上的方法')
    }
    static show () { // 在class类 上,通过 static 修饰的属性,添加【静态方法】
         console.log('我是class挂载的show静态方法')
    }
}

注:类定义不会被提升,这意味着,必须在访问前对类进行定义,否则就会报错。
类中方法不需要 function 关键字;方法间不能加分号

4,继承

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 之后使用
如果所有子类都共享的,就放到父类,否则直接放到子类中,即可

上一篇 下一篇

猜你喜欢

热点阅读