JavaScript中类（class）的介绍和应用

文章JavaScript中类（class）的介绍和应用分享给大家，欢迎收藏Java资料网，专注分享技术知识

一、类的概念

二、类的使用

1、语法 

2、实例

三、类的属性 

1、静态属性

2、实例属性

3、私有属性

四、类的方法

1、构造方法

2、静态方法

3、普通方法

 五、类的继承 

1、extends

2、super

---

一、类的概念

什么是类？

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

在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

======================================================================

今天就先介绍到这里吧~

内容不多，希望有用！

如有问题，还行指正！！！ 

文章来源:https://blog.csdn.net/m0_65029152/article/details/135153072
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！