JavaScript ES6 Class 类定义详解:构造函数、实例方法与静态方法
本文详细解析 JavaScript ES6 中 Class 类的定义方式,涵盖类声明与表达式。重点讲解构造函数的作用、new 操作符的执行流程,以及实例方法、访问器方法和静态方法的定义与调用区别,通过代码示例展示随机生成实例的静态方法应用。
前言
回顾以往使用构造函数创建类的方式,我们会发现其与普通函数的编写形式过于接近,且代码的可读性往往不够直观。
在 ES6(ECMAScript2015)新的标准中使用了class关键字来直接定义类;
但是类本质上依然是之前所学习过的构造函数、原型链的语法糖而已。所以学好之前的构造函数、原型链更有利于我们理解类的概念和继承关系。
正文
1.声明类的两种方式:
使用 class 关键字进行类声明
class Person{}
类表达式(较少使用)
var People = class { }
那么 Person 类的原型对象是什么?以下代码展示了原型对象及 typeof 运算符对 Person 类型的检测结果。
console.log(Person.prototype) // Person {}
console.log(Person.prototype.__proto__) // {}
console.log(Person.constructor) // [Function: Function]
console.log(typeof Person) // function
2.class 类的构造函数
如果在创建对象实例时需要传递参数,应如何处理?
- 每个类都可以定义一个构造函数,该方法的名称固定为
constructor。 - 当使用 new 操作符实例化类时,会自动调用该类的构造函数
constructor。 - 每个类仅能包含一个构造函数,若定义多个构造函数,程序将抛出异常。
示例代码如下:
// 类的声明
class Person {
// 类的构造方法
constructor(name, age) {
this.name = name
this.age = age
}
foo () {
console.log(this.name)
}
}
var p1 = new Person('h', 19)
console.log(p1)// Person { name: 'h', age: 19 }
p1.foo() // h
当使用 new 关键字实例化类时,会调用
constructor函数,并依次执行以下步骤(假设新创建的对象为 p1):
- 在内存中创建一个新对象
- 将类的原型 prototype 赋值给新创建的对象
p1.__proto__ = Person.prototype- 将新对象绑定到函数的 this 上下文:new 绑定
this = p1- 执行函数体内的代码
- 自动返回创建好的对象 **
3.class中方法定义
3.1 class 中定义普通的实例方法
class Person {
// 类的构造方法
constructor(name, age) {
this.name = name
this.age = age
this._address = '北京市'
}
eating () {
console.log(this.name + ' 正在eating~')
}
running () {
console.log(this.name + ' 正在running~')
}
}
var p1 = new Person('jam', 19)
console.log(p1)
p1.eating()
p1.running()
3.2 class 类中定义访问器方法
class Person {
// 类的构造方法
constructor(name, age) {
this.name = name
this.age = age
this._address = '北京市'
}
// 类的访问器方法
get address () {
// 在这里可以设置拦截访问操作
console.log('获取呢')
return this._address
}
set address (newValue) {
// 在这里可以设置拦截设置操作
console.log('修改呢')
return this._address = newValue
}
}
var p1 = new Person('jam', 19)
console.log(p1.address)
p1.address = '天津市'
console.log(p1.address)
3.3 类的静态方法(类方法)
在方法名前添加
static关键字,即可将其定义为类的静态方法。静态方法不会被类的实例继承,而是直接通过类本身进行调用。
小案例:使用类的静态方法完成随机生成Person实例
class Person {
// 类的构造方法
constructor(name, age) {
this.name = name
this.age = age
this._address = '北京市'
}
// 类的静态方法(也称为类方法) 创建对象随机生成一个名字小案例
static randomPerson () {
// 创建一个存储名字的数组
let names = ['jam', 'jak', 'jag', 'jao', 'jno']
// Math.random()生成一个0-1之间的数字,小数肯定是不对的
let nameIndex = Math.floor(Math.random() * names.length)
let name = names[nameIndex]
// 生成随机年龄
let age = Math.floor(Math.random() * 100)
// return随机生成的人物 姓名+ 年龄
return new Person(name, age)
}
}
此处直接调用类的静态方法即可,无需使用 new 操作符来创建实例对象。
随机生成一个Person实例(附效果图)
// 随机生成一个
var p2 = Person.randomPerson()
console.log(p2)

随机生成多个Person实例(附带效果图)
// 随机生成多个
for (let index = 0; index < 20; index++) {
console.log(Person.randomPerson())
}

文末
到此这篇关于JavaScript ES6中class定义类的文章就介绍到这了,更多相关ES6中class定义类内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
怎么用 Promise 封装 JavaScript sleep 函数实现异步延时
2026-11-05 17:49:14
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
