JavaScript：类

最新推荐文章于 2024-12-12 10:04:56 发布
最新推荐文章于 2024-12-12 10:04:56 发布
阅读量374 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/JinsmLill/article/details/127575644
本文详细介绍了JavaScript中的类，包括类的定义、类构造函数、类的实例化、类的构成、类方法与静态类方法以及类的继承。通过实例解析了类的使用方式和继承机制，帮助读者掌握JavaScript的面向对象编程思想。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

类 是可以模拟类的行为的 特殊函数 。

ECMAScript 中没有正式的“类”这个类型，本质上类就是一种特殊的函数，就像函数是一种特殊的对象。

在 ES6 之前，ECMAScript 没有正式的、规范化的实现继承的语法。

ES6 新增类，来规范化 ECMAScript 中关于继承的实现。

类是 ECMAScript 的基础性语法糖，是对使用原型和构造函数实现继承的规范，是对寄生式组合继承的规范。

类表面上看起来可以支持正式的面向对象编程，但实际上使用的仍然是原型和构造函数来模拟类的行为（继承）。

主要参考资料：

  • 《JavaScript 高级程序设计（第4版）》- P249（274/931）

定义类

定义一个类需要使用关键字 class 。

定义类的方式有两种：

  • 类声明

    类声明，即使用关键字 class 定义一个具名的类。

  • 类表达式

    类表达式，即以表达式的形式使用关键字 class 定义一个类，类名是可选的。

类名一般采用首字母大写的形式。

示例：

  • 定义类。
    class TypeA {}  // 类声明

const TypeB = class {}  // 类表达式，不指定类名

const Type = class TypeC {}  // 类表达式，指定类名

类构造函数

类构造函数 是归属于类的构造函数。

定义一个类构造函数需要使用关键字 constructor 作为类构造函数的函数名。

与构造函数一样，在类构造函数中，可以使用对象 this 为类的实例对象添加属性。

类构造函数与构造函数的区别：

类构造函数不能被直接调用。

构造函数能被直接调用。

示例：

  • 类构造函数
    class Type {
	constructor() {
		this.instAttr = 'instAttr'
	}  // 类构造函数
}

类的实例化

类的实例化，即使用操作符 new 调用类创建一个实例对象。

类不能被直接调用，只能使用操作符 new 被调用。

使用操作符 new 调用类，会执行如下操作：：

  1. 在内存中创建一个新对象。
  2. 新对象的内部特性 [[Prototype]] 被赋值为 类 的属性 prototype 。
  3. 调用 类构造函数 。
  4. 类构造函数 的对象 this 被赋值为新对象。
  5. 执行类构造函数的函数体。
  6. 如果类构造函数有非空的返回值，则返回类构造函数的返回值，否则返回类构造函数的对象 this 。

类可以立即实例化。

即在使用类表达式定义类时，直接使用操作符 new 调用类。

示例：

  • 类的实例化

    class Type {
	constructor() {
		console.log('instantiate Type')
		this.instAttr = 'instAttr'
	}
}

const type = new Type()  // 类的实例化

console.log('type.instAttr:', type.instAttr)
const prototype = Object.getPrototypeOf(type)
console.log('prototype of type === Type.prototype:', prototype === Type.prototype)

// 输出：
// instantiate Type
// type.instAttr: instAttr
// prototype of type === Type.prototype: true

  • 类的立即实例化

    const type = new class Type {
	constructor() {
		console.log('instantiate Type')
	}
}()  // 类的立即实例化

// 输出：
// instantiate Type

类的构成

关于类的内容需要定义在类的块作用域中

在类块中只能定义方法，不能定义非函数属性。

虽然在类块中不能定义非函数属性，但类本质上是一个函数对象，所以可以在类块外直接为类添加非函数属性。

在类块中定义方法的语法：

使用对象字面量的方法简写的形式定义方法。

方法之间不需要使用逗号操作符 , 分隔。

函数名可以像属性名一样，使用字符串、符号、表达式作为键。

在类块中正常定义的方法可以分为三种：

  • 类构造函数
  • 普通函数
  • 访问器函数

    即访问器属性的获取函数和设置函数

示例：

  • 在类块中定义的三种方法。
    class Type {
	constructor() {
		console.log('instantiate Type')
		this._innerAttr = '1948'
	}  // 类构造函数
	
	generalFunc() {
		console.log('execute general function')
	}  // 普通函数
	
	// 访问器函数
	get accessorAttr() {
		console.log('get accessor attribute')
		return this._innerAttr
	}  // 获取函数
	
	set accessorAttr(val) {
		this._innerAttr = val + '-set'
		console.log('set accessor attribute')
	}  // 设置函数
}

const type = new Type()
console.log('type.accessorAttr:', type.accessorAttr)
type.accessorAttr = '2017'
console.log('type.accessorAttr:', type.accessorAttr)
type.generalFunc()

// 输出：
// instantiate Type
// get accessor attribute
// type.accessorAttr: 1948
// set accessor attribute
// get accessor attribute
// type.accessorAttr: 2017-set
// execute general function

类方法与静态类方法

类方法 ，即类的原型的方法。

在类块中正常定义的方法，会被添加到类的原型，作为类的原型的方法。

静态类方法 ，即类自身的方法。

在类块中使用关键字 static 定义的方法，会被添加到类自身，作为类自身的方法。

示例：

  • 为类定义静态类方法。
    class Type {
	static staticFunc() {
		console.log('execute static function')
	}  // 静态类方法
}

Type.staticFunc()

// 输出：
// execute static function

类的继承

类支持单继承。

一个类继承另一个类需要使用关键字 extends 。

子类使用关键字 extends 继承父后，子类的原型会被赋值为父类，搭建原型链。

其实使用关键字 extends 可以继承任何拥有内部特性 [[Construct]] 和原型的对象，即函数对象（保持向后兼容）。

示例：

  • 一个类继承另一个类。

    class SuperType {}

class SubTypeA extends SuperType {}  // 类型 SubTypeA 继承类型 SuperType

const SubTypeB = class extends SuperType {}  // 在类表达式中使用关键字 extends 

console.log('SubTypeA.prototype:', SubTypeA.prototype)
console.log('SuperType is prototype of SubTypeA:', SuperType.isPrototypeOf(SubTypeA))

// 输出：
// SubTypeA.prototype: SuperType {constructor: ƒ}
// SuperType is prototype of SubTypeA: true

  • 一个类继承一个构造函数。

    function SuperType() {}  // 构造函数

class SubType extends SuperTpye {}  // 继承构造函数

派生类

派生类 ，即使用关键字 extends 继承某个类的类。

在派生类中调用父类构造函数，为派生类的实例添加父类的实例属性，需要调用关键字 super 。

关键字 super 只能在派生类的类块中定义的方法内使用。

内部特性 [[HomeObject]] ：

在类块中的定义的方法，拥有一个内部特性 [[HomeObject]] ，是一个指针，指向定义方法的对象，即类。

关键字 super 引用 [[HomeObject]] 的原型，即类的原型。

关键字 super 引用派生类的原型，即派生类的父类。

关键字 super 可以像函数一样被调用。

在调用关键字 super 时 ，会调用父类构造函数创建一个父类的实例，并将该实例赋值给当前函数的对象 this 。

通过关键字 super 可以调用父类的静态类方法。

不能单独引用 super 。

示例：

  • 在派生类中调用关键字 super ，为派生类的实例添加父类的实例属性。

    class SuperType {
    constructor() {
        console.log('instantiate SuperType')
	    this.superInstAttr = '2021'
    }
}

class SubType extends SuperType {
    constructor() {
        super()  // 调用关键字 super ，为派生类的实例添加父类的实例属性。
        console.log('instantiate SubType')
	    this.subInstAttr = '2035'
    }
}

const subType = new SubType()
console.log('subType:', subType)
console.log('subType.superInstAttr:', subType.superInstAttr)
console.log('subType.subInstAttr:', subType.subInstAttr)

// 输出：
// instantiate SuperType
// instantiate SubType
// subType: SubTypeA {superInstAttr: '2021', subInstAttr: '2035'}
// subType.superInstAttr: 2021
// subType.subInstAttr: 2035

  • 在派生类中通过关键字 super 调用父类的静态类方法。

    class SuperType {
    static superStaticFunc() {
        console.log('execute Super static function')
    }
}

class SubType extends SuperType {
    static subStaticFunc() {
        super.superStaticFunc()  // 通过关键字 super 调用父类的静态类方法
        console.log('execute Sub static function')
    }
}

SubType.subStaticFunc()

// 输出：
// execute Super static function
// execute Sub static function

关键字 super 与类构造函数：

  • 如果派生类没有定义类构造函数。

在实例化派生类时会自动调用 super ，并且传入所有传递给派生类的参数。

  • 如果在派生类中显式定义了类构造函数。

则必须在类构造函数中调用 super ，或者返回一个对象。

在类构造函数中，不能在调用关键字 super 之前使用对象 this 。

即在派生类的类构造函数中，想要使用对象 this 就必须在此之前调用关键字 super 。

综合示例：

  • 类的继承，派生类与父类。
    // 父类
class SuperType {
    constructor() {
        console.log('instantiate SuperType')
	    this.superInstAttr = '2045'  // 添加父类实例属性
	    this._superInnerInstAttr = '2049'
    }  // 父类的类构造函数
    
    static superStaticFunc() {
        console.log('execute Super static function')
    }  // 父类的静态类方法
    
    // 父类的类方法
    superProtoFunc() {
        console.log('execute Super prototype function')
    }  // 普通函数
    
    get superAccessorAttr() {
        console.log('get Super accessor attribute')
	    return this._superInnerInstAttr
    }  // 获取函数
    set superAccessorAttr(val) {
        console.log('set Super accessor attribute')
	    this._superInnerInstAttr = val + '-set'
    }  // 设置函数
}

// 派生类
class Sub extends SuperType {
    constructor() {
        super()  // 调用关键字 super 
        console.log('instantiate Sub')
	    this.subInstAttr = '2076'
	    this._subInnerInstAttr = '2091'
    }
    
    static subStaticFunc() {
        super.superStaticFunc()  // 调用父类的静态类方法
        console.log('execute Sub static function')
    }
    
    subProtoFunc() {
        console.log('execute Sub prototype function')
    }
    get subAccessorAttr() {
        console.log('get Sub accessor attribute')
	    return this._subInnerInstAttr
    }
    set subAccessorAttr(val) {
        console.log('set Sub accessor attribute')
	    this._subInnerInstAttr = val + '-set'
    }
}

Sub.subStaticFunc()

console.log('# --- --- ---')
const sub = new Sub()
console.log('sub:', sub)

console.log('# --- --- ---')
console.log('sub.superInstAttr:', sub.superInstAttr)
console.log('sub.superAccessorAttr:', sub.superAccessorAttr)
sub.superAccessorAttr = '2108'
console.log('sub.superAccessorAttr:', sub.superAccessorAttr)

console.log('# --- --- ---')
console.log('sub.subInstAttr:', sub.subInstAttr)
console.log('sub.subAccessorAttr:', sub.subAccessorAttr)
sub.superAccessorAttr = '2108'
console.log('sub.subAccessorAttr:', sub.subAccessorAttr)

console.log('# --- --- ---')
sub.superProtoFunc()
sub.subProtoFunc()

// 输出：
// execute Super static function
// execute Sub static function
// # --- --- ---
// instantiate SuperType
// instantiate Sub
// sub: Sub {superInstAttr: '2045', _superInnerInstAttr: '2049', subInstAttr: '2076', _subInnerInstAttr: '2091'}
// # --- --- ---
// sub.superInstAttr: 2045
// get Super accessor attribute
// sub.superAccessorAttr: 2049
// set Super accessor attribute
// get Super accessor attribute
// sub.superAccessorAttr: 2108-set
// # --- --- ---
// sub.subInstAttr: 2076
// get Sub accessor attribute
// sub.subAccessorAttr: 2091
// set Super accessor attribute
// get Sub accessor attribute
// sub.subAccessorAttr: 2091
// # --- --- ---
// execute Super prototype function
// execute Sub prototype function
JavaScript 中的类
Amy的博客
12-24 1270
前言 整理 JavaScript 中类（包括 ES5、ES6 及 TypeScript）的实现方法， 以及相关知识。原封不动地记录了我觉得比较重要的概念，明白了这些概念也就理解了 JavaScript 中类的实现方式。 内容主要来自： JavaScript 高级程序设计（第3版） ES6 标准入门（第3版） MDN 本文仅整理、记录、学习。 理解对象 属性的类型（属性描述符） ECMA-262 第 5 版在定义只有在内部才用的特性（attribute）时，描述了属性（property）的各种特征。E
JS定义类或对象
04-25
Javascript是基于对象的脚本语言，理所当然会有对象概念的存在，通常我们在项目中都是运用“function fnname{…..}”的形式直接声明一个方法，再去调用。这么做很方便。但是如果你的项目中拥有频繁的JS操作，比如平凡的AJAX特效、页面分模块开发等等，需要大量的JS代码，如果都用这种形式，很难去控制、维护和扩展。所以定义对象可以让你仅仅记住对象名称极其作用，就会达到易控制，易维护和易扩展。在优化你的JS代码的同时也提升了你的开发水平。
详解javascript的类
weixin_34148340的博客
11-01 138
前言 生活有度，人生添寿。 原文地址：详解javascript的类 博主博客地址：Damonare的个人博客   Javascript从当初的一个“弹窗语言”，一步步发展成为现在前后端通吃的庞然大物。javascript的受欢迎程度也是与日俱增，今年最受欢迎编程语言又是花落javascript，这实在是一个充满了活力的语言。如今，随随便一个网页javascript代码量都不下数千行，要是node...
JavaScript类和模块
热门推荐
kissLife的博客
05-22 1万+
JavaScript类和模块
JavaScript类
Eyno的博客
03-25 1761
文章目录@[TOC](文章目录)一、类（class）1.创建类2.创建类对象3.类表达式4.类的方法二、类继承1.用法2.类提升三、静态方法 一、类（class） 1.创建类 类是用于创建对象的模板。 使用 class 关键字来创建一个类，类体在一对大括号{} 中，我们可以在大括号 {}中定义类成员的位置，如方法或构造函数。 每个类中包含了一个特殊的方法 constructor()，它是类的构造函数（方法），这种方法用于创建和初始化一个由 class 创建的对象。然后可以添加任意数量的方法。 class C
JavaScript中的类
sinat_41212418的博客
10-13 1655
JavaScript中的类
JavaScript：JavaScript类
02-24
JavaScript类提供了`public`（默认）、`private`和`protected`三种访问控制符，但需要注意的是，JavaScript的私有属性和方法实际上是通过闭包实现的，而不是像其他一些语言那样在语法层面上支持。 7. **类表达式**...
JavaScript：ES6新特性：类与模块教程.docx
08-28
JavaScript：ES6新特性：类与模块教程.docx
JavaScript语言精粹.修订版 Javascript：The Good Parts 中英 pdf
04-24
《JavaScript语言精粹》修订版还涵盖了JavaScript的最新发展，例如ES6及后续版本的新特性，如箭头函数、类、模板字符串、解构赋值等。此外，Douglas Crockford对语言中的一些"坏部分"（如with关键字和全局变量）进行...
JavaScript：JavaScript
02-23
7. **ES6及后续版本**：随着ECMAScript规范的发展，JavaScript引入了许多新特性，如箭头函数、模板字符串、解构赋值、类（class）、模块（import/export）、Promise、Set和Map等，极大地提升了代码的可读性和可维护...
Javascript简介：Alura-JavaScript：网络编程和语言
02-18
尽管名字相似，JavaScript与Java并无直接关系，但它们都遵循类C语法。 在“Javascript简介：Alura-JavaScript：网络编程和语言”中，我们将探讨JavaScript在网络编程中的应用和其作为语言的基本特性。JavaScript的...
JavaScript 类
一出好剧
03-11 761
JavaScript类 理解类，忘记类。
javascript
weixin_30414635的博客
05-27 121
由浅到深了解JavaScript类最近在无忧脚本混了一阵子，回复了一些贴子，自己却没有做出什么东东让大家看看，心里有些不安，于是写了下边的一点东西，本来应该发在类封装区的，考虑到那里比较冷，而这篇文章我希望能够帮助到更多的朋友，因此放到这里来了。>>>>>>>>>>>>>>>>>>>&...
JavaScript 类(class)
笔记
02-10 467
在这个示例中，我们创建了一个基类 Animal，该类具有一个名为 name 的实例变量和一个 sayHello() 方法。JavaScript 类(class) 是一种更高级的抽象编程概念，允许你定义对象的模板，以便它们可以被重复使用，这是一种将对象的实例封装起来的机制。在这个示例中，我们定义了一个类名为 Person，它有一个构造函数，构造函数接收两个参数： name 和 age。在实际工作中，JavaScript 类可以实现更复杂的需求，例如继承，多态和封装等。这种模板称为类，生成的对象称为对象实例。
javascript语言中的类（class）
最新发布
ganggun的博客
12-12 1636
类提供了一种组织代码的方式，尤其适合面向对象编程（OOP）的场景。它使代码更加模块化、可复用、可扩展。通过类，可以轻松地创建多个对象实例并管理它们的属性和行为。如何定义一个类？class 类名 {// 构造函数（定义类的属性）constructor(参数1, 参数2, ...) {this.属性1 = 参数1;this.属性2 = 参数2;// 方法（定义类的行为）方法名() {// 方法逻辑// 静态方法（直接通过类调用，无需实例化）static 静态方法名() {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值