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

已于 2024-06-27 10:30:46 修改
阅读量1.5k 收藏 26
点赞数 31
分类专栏： JavaScript 文章标签： javascript es6 class类
于 2023-12-25 19:21:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65029152/article/details/135153072
版权

一、类的概念

二、类的使用

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

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

今天就先介绍到这里吧~

内容不多，希望有用！

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

白菜不太菜
关注
  • 31
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JavaScript】JavaScript 中的 Class 类：全面解析
Allen-
05-04 1005
在JavaScript中，class语法作为一种面向对象编程的结构化方式，为创建可复用、易于维护的代码提供了强大支持。构造函数 (负责初始化新创建的类实例，自动在使用new关键字实例化时调用。可以接收参数并使用this关键字为实例分配属性。是类定义中的核心入口点，奠定了实例的基础状态。私有字段与方法 (ES2022 引入了私有字段与方法，通过在名称前加来声明，增强了类的封装性。私有字段和方法仅能在类内部访问，外部代码无法直接触及，确保了数据安全和实现细节的隐藏。
JavaScript之class详解
qq_53109172的博客
04-24 1767
在JavaScript中利用 class 完成面向对象思想开发，对 class 降级到 ES5
【JavaScript】类class
Jamcy123的博客
07-27 230
看看js中的类，如有错误，望不吝赐教
带你快速过一遍js的新语法class
最新发布
gaotlantis的博客
06-04 391
如果我们将定义的属性前面加上#，那么只有定义的类里面能访问，我们外界不能直接访问。接下来我们给出一段代码及运行结果让大家对此了解更深刻。run() {const p = new People('小花', 18)p.run()其实我想，JavaScript中的class让你可以假装自己是一个传统的面向对象编程大师，就像在舞台上扮演角色一样。它让你可以创建对象模板，定义属性和方法，还可以玩继承和多态的花样。虽然底层还是原型继承，但class让代码更有条理，就像穿着西装打领带一样，看起来很专业。
优雅而高效的JavaScript—— Class 和模块化
杜永康的博客
10-18 1352
Class 是一种用于创建对象的模板或蓝图。通过 Class，我们可以定义对象的属性和方法，并通过实例化来创建具体的对象。${this// 输出：Hello, my name is John..`);// 输出：Hello, my name is John.在上面的示例中，我们定义了一个名为 Person 的 Class，它有两个属性 name 和 age，以及一个方法 sayHello。通过 new 关键字可以创建 Person 的实例，并调用其方法。
JavaScript Class类详解
热门推荐
m0_37824255的博客
05-18 1万+
ECMAScript 6 提供了更接近传统语言的写法，新引入的class关键字具有正式定义类的能力。类（class）是ECMAScript中新的基础性语法糖结构，虽然ECMAScript 6类表面上看起来可以支持正式的面向对象编程，但实际上它背后使用的仍然是原型和构造函数的概念，让对象原型的写法更加清晰、更像面向对象编程的语法。
JS 之CLASS类应用
weixin_30719711的博客
10-08 120
<script type="text/javascript">function register(){this.check_username = function(){if(document.getElementById("username").value == ""){alert("用户名不能为空");}}this.check_password = function()...
class javascript
qq_43401689的博客
05-24 58
javascript的class 与传统面向类的区别 即实例不是 class难点 class和prototype的关系 class中super的this
JavaScript 类(class)
m0_59075169的博客
04-22 355
JavaScript 类(class)
JS-Class-Id小应用
ThinkInMyLife的专栏
12-31 124
一个js的应用，一个九宫格的位子选取方法，自己想的办法，虽然不是很优秀，要用的时候可以以备不时之需。 选取的页面HTML代码： &lt;div class="position" style="display: none; position: absolute; top: 517px; left: 617.5px;"&gt; &lt;ul class="area"&gt; ...
js Class的概念及其应用场景
rock_23的博客
03-31 1246
含义：类是用来创建对象的模板。JS和其他语言不同，它是没有Class的，它本质就是JS的构造函数封装的语法糖。ES6提供一种更为清晰的方式来遵循面向对象的编程方式。
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
JavaScript中的类(Class)详细介绍
10-24
在JavaScript中，类（Class）是ES6引入的一种新的语法糖，用于模拟传统的面向对象编程中的类概念，尽管JavaScript本质上是一种基于原型的面向对象语言。本文将深入探讨JavaScript中的类定义、构造函数以及类名等相关...
Javascript定义类（class）的三种方法详解
10-24
由于 JavaScript 早期版本不直接支持类（class）的概念，开发者需要通过其他方式来实现类似的功能。本文将详细解释三种在JavaScript中定义类的方法：构造函数法、Object.create()法以及极简主义法。 1. 构造函数法 ...
深入理解JavaScript和TypeScript中的class
12-12
`class` 在 JavaScript 和 TypeScript 中是面向对象编程的关键构造，用于定义类，它是从其他语言（如 Java 和 C#）引入 JavaScript 的一个特性。在 ES6 中，`class` 关键字提供了一种更加简洁、易读的语法来声明类，...
在JavaScript中调用Java类和接口的方法
11-23
在JavaScript中调用Java类和接口的方法是一种跨语言交互的方式，尤其在JavaScript引擎如Nashorn中，这种交互变得可能。以下将详细解释如何在JavaScript中实现这一目标。 首先，要访问Java类，你需要使用`Java.type...
JavaScript实现获取dom中class的方法
12-09
本文将深入讲解如何使用JavaScript实现获取DOM元素中class的方法。 首先，我们来分析提供的代码实例。在示例中，定义了一个名为`getClass`的函数，它接受两个参数：`node`代表要查询的DOM元素，`classname`是要找的...
JavaScript Class介绍以及使用方法(代码说明)
翾的博客
05-21 2627
Class学过Java的小伙伴会发现, 这个class和Java里的class基本语法并没有什么区别… 下面正式开始介绍.定义类JavaScript 语言的传统方法是通过构造函数，定义并生成新对象。//例: function Point (x,y) { this.x = x; this.y = y; }
js中的class类
m0_56713342的博客
12-03 764
使用class这个关键词定义一个类,基于这个类创建实例以后会自动执行constructor方法,此方法可以用来初始化。另一种是：在类里面添加静态的方法可以使用static这个关键词，静态方法就是不需要实例化类就能使用的方法。new 类（） ---->默认会执行类中的constructor方法。子类定义方法想要父类的方法通过 super.父类的方法（）new出来的实例对象，调用父类的实例方法是不相等的。super（）相当于父类的实例，原型上的方法。父类用箭头函数另写的方法是实例方法。class 类名{ }
js class与java class
07-15
JavaScript中的类（class）和Java中的类有一些相似之处，但也存在一些区别。 1. 语法差异：在Java中，类的定义是使用关键字"class"，后跟类名。而在JavaScript中，类的定义是通过关键字"class"，后跟类名和一个类体（包含类的属性和方法）。 Java示例： ```java public class MyClass { // 类的属性 // 类的方法 } ``` JavaScript示例： ```javascript class MyClass { // 类的属性 // 类的方法 } ``` 2. 继承机制：Java中的类可以通过继承来扩展现有类的功能，使用关键字"extends"。而JavaScript中的类也支持继承，但使用的是关键字"extends"和"super"。 Java示例： ```java public class ChildClass extends ParentClass { // 子类的属性 // 子类的方法 } ``` JavaScript示例： ```javascript class ChildClass extends ParentClass { constructor() { super(); // 调用父类的构造函数 // 子类的属性 } // 子类的方法 } ``` 3. 类成员：Java中的类成员（属性和方法）可以使用访问修饰符（例如public、private、protected）来控制其可见性。而JavaScript中的类成员默认是公开的，可以使用关键字"public"、"private"、"protected"来控制可见性。 Java示例： ```java public class MyClass { private int myPrivateVar; // 私有属性 public void myPublicMethod() { // 公共方法 } } ``` JavaScript示例： ```javascript class MyClass { #myPrivateVar; // 私有属性 myPublicMethod() { // 公共方法 } } ``` 这些是JavaScript类和Java类之间的一些主要差异。虽然它们有共同之处，但也有一些不同之处，因此在使用时需要注意。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值