JavaScript中类(class)的介绍和应用举例详解_Javascript

一、类的概念

什么是类？

在生活中，类一些具有相似属性和行为的事物抽象出来的概念，比如：人类、球类、汽车类；

在javascript中，类是模板，是用于创建实例对象的模板；相当于实例的原型（prototype）；

二、类的使用

1、语法

class 类名 {  
  constructor(){
      ...
    }
  ...
}

class：es6中提供了class关键字，用来创建类；
类名：一般为名词，采用首字母大写表示，如person、car...；
{......}：类体放在一对大括号中，我们可以在大括号内定义类的成员，比如构造函数、静态方法，等等；
constructor(){......}：每个类都会包含的一个特殊方法，类的构造函数，用来实例化一个由class创建的对象；

2、实例

// 定义类
class classname {
  // 构造方法
  constructor(name) {
    this.name = name; // 实例属性
  }
  static author = "zyl"; // 静态属性

  #attr = 10; // 私有属性

  // 静态方法
  static sfn(data) {
    return `我是静态方法，只能通过类名调用，接收的参数为${data}；`;
  }

  // 普通方法
  fn(data) {
    console.log(`私有属性的值为${this.#attr}；`);   // 访问私有属性
    return `我是普通方法，通过实例调用，接收的参数为${data}；`;
  }
}
// 实例化
const class1 = new classname("第一个类");
console.log(class1); // classname {name: '第一个类'}

// 访问静态属性
console.log(classname.author); // zyl

// 访问实例属性
console.log(class1.name); // 第一个类

// 访问静态方法
console.log(classname.sfn("arg")); // 我是静态方法，只能通过类名调用，接收的参数为arg；

// 访问实例方法
console.log(class1.fn("123")); // 私有属性的值为10； 我是普通方法，通过实例调用，接收的参数为123；

三、类的属性

javascript类中的属性有：静态属性、实例属性、私有属性；

1、静态属性

类的属性，使用static关键字定义，通过【类名.属性名】访问；

2、实例属性

定义在构造函数的this上，通过【实例.属性名】访问；

3、私有属性

使用【#属性名】的方式定义，只能在类的内部访问；

// 定义类
class classname {
  // 构造方法
  constructor(name) {
    this.name = name; // 实例属性
  }
  static author = "zyl"; // 静态属性

  #attr = 10; // 私有属性
  fn() {
    return this.#attr;
  }
}
// 实例化
const class1 = new classname("第一个类");
console.log(class1); // classname {name: '第一个类'}

// 访问静态属性
console.log(classname.author);  // zyl

// 访问实例属性
console.log(class1.name);   // 第一个类

// 访问私有属性
console.log(class1.fn()); // 10

四、类的方法

javascript类中方法有：构造方法、静态方法、普通方法、私有方法；

1、构造方法

构造方法是一种特殊的方法：

名称为constructor()；
一个类中可以添加一个构造方法，用于对类进行实例化；
构造方法中可以对初始化对象属性；
使用new关键字实例化时，会自动执行constructor()；
定义类时，若没有定义constructor()构造方法，javascript会自动声明一个空的constructor()方法；

// 定义person类
class person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// 创建person1实例对象
const person1 = new person("zyl", 18);
console.log(person1);         // person {name: 'zyl', age: 18}

2、静态方法

使用static关键字定义，又叫类方法，它是属于类的，而非实例对象；

静态方法不能继承，不能通过实例调用，只能通过当前类名调用【类名.方法名】（父类的静态方法可以被子类继承）；

// 定义品牌类
class brand {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }

  // 静态方法，判断是否为vip用户
  static isvip(count) {
    return count == "zylcount" ? "vip用户" : "新用户";
  }

  // 静态方法，获取品牌折扣价
  static dprice(price) {
    return price > 10 ? price * 0.9 : price * 0.95;
  }
}

const brand1 = new brand("zylbrand", "clothing");
console.log(brand1);                     // brand {name: 'zylbrand', type: 'clothing'}

// 调用静态方法，通过类名brand调用，而非实例brand1调用；
console.log(brand.isvip("1111111"));     // 新用户
console.log(brand.dprice(12));           // 10.8

3、普通方法

类中可以定义任意数量的普通方法；

普通方法定义在类的原型上（prototype属性上），会被实例继承；

通过实例调用【实例.方法名】，不能通过类名调用；

// 定义汽车类
class car {
  constructor(brand, price) {
    this.brand = brand;
    this.price = price;
  }
  // 定义普通方法 
  getinfo() {
    return `该车的品牌是${this.brand};售卖价格是${this.price}`;
  }
}
let car1 = new car("volvo", "16.8w");
console.log(car1);                 //  {brand: 'volvo', price: '16.8w'}

// 通过实例调用普通方法
console.log(car1.getinfo());       //  该车的品牌是volvo;售卖价格是16.8w

// 普通方法是定义在car类的原型上
console.log(car.prototype);   // {constructor: ƒ, getinfo: ƒ}
console.log(car.prototype.getinfo === car1.__proto__.getinfo);   // true

五、类的继承

javascript中允许我们在创建一个类的时候，依赖于另一个类；被创建的类称为【子类/派生类】，被依赖的类称为【父类/基类】；子类会继承父类的属性和方法，有利于提高代码的可复用性；

1、extends

extends关键字，用于类的继承；使创建子类继承一个父类，子类会继承父类的所有属性和方法；

（1）语法

class 子类 extends 父类 {
    // 定义子类的属性和方法
    ...    
}

（2）实例

class parentclass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  static attr = 'abc';
  static sfn(data){
    return `我是定义在父类的静态方法，收到的参数为：${data}`;
  }
  getinfo(data) {
    return `我是定义在父类的普通方法，收到的参数为：${data}`;
  }
}

class childclass extends parentclass { }

const parent1 = new parentclass('parent', '45');  
const child1 = new childclass('zyl', 20);  
console.log(parent1);                 // parentclass {name: 'parent', age: '45'}
console.log(child1);                  // childclass {name: 'zyl', age: 20}
console.log(childclass);              // class childclass extends parentclass {}
console.log(childclass.attr);         // abc
console.log(childclass.sfn('1111'));  // 我是定义在父类的静态方法，收到的参数为：1111
console.log(child1.getinfo(123));     // 我是定义在父类的普通方法，收到的参数为：123

2、super

super关键字用于调用父类的属性和方法；在调用时，需要指定调用的父类属性或父类方法；

super必须写在this.xxx之前；

（1）语法

// 调用父类的构造方法
super();   
// 访问父类属性
super.属性;    
// 调用父类方法  
super.方法名();

（2）实例

// 定义父类
class parentclass {
  constructor(name, age, address) {
    this.name = name;
    this.age = age;
    this.address = address;
  }
  static attr = "abc";
  static sfn(data) {
    return `我是定义在父类的静态方法，收到的参数为：${data}`;
  }
  getinfo(data) {
    return `我是定义在父类的普通方法，收到的参数为：${data}`;
  }
}

// 定义子类，继承父类
class childclass extends parentclass {
  constructor(name, age, address, phone) {
    // 调用父类的构造方法
    super(name, age,  address);
    this.phone = phone;
  }

  // 访问父类的静态属性
  static attr = super.attr + "def";
  static sfn(data) {
    // 调用父类的静态方法
    console.log(`子类通过super调用：${super.sfn("super调用的实参")}`);
    return `我是定义在子类的静态方法，收到的参数为：${data}`;
  }
  getinfo(data) {
    // 调用父类的普通方法
    console.log(`子类通过super调用：${super.getinfo("super调用的实参")}`);
    return `我是定义在子类的普通方法，收到的参数为：${data}`;
  }
}

const parent1 = new parentclass("parent", 45 , "上海");
const child1 = new childclass("child", 20, "上海", '11111111');

console.log(parent1);                 // parentclass {name: 'parent', age: 45, address: '上海'}
console.log(child1);                  // childclass {name: 'child', age: 20, address: '上海'}

console.log(parentclass.attr);        // abc
console.log(childclass.attr);         // abcdef

console.log(parentclass.sfn("111"));  // 我是定义在父类的静态方法，收到的参数为：111

console.log(childclass.sfn("222"));   // 子类通过super调用：我是定义在父类的静态方法，收到的参数为：super调用的实参
                                      // 我是定义在子类的静态方法，收到的参数为：222

console.log(parent1.getinfo(123));    // 我是定义在父类的普通方法，收到的参数为：123                                   
console.log(child1.getinfo(456));     // 子类通过super调用：我是定义在父类的普通方法，收到的参数为：super调用的实参 
                                      // 我是定义在子类的普通方法，收到的参数为：456