ES6类与对象定义详解:继承、访问器、静态方法与属性
本文详解ES6中类的定义与使用,涵盖类的基本语法、实例生成、继承机制及参数传递。重点解析getter/setter访问器属性、静态方法与静态属性的实现方式,通过代码示例展示如何在JavaScript中规范构建面向对象结构。
ES6类与对象定义概述
本文通过具体示例介绍ES6中定义类与创建对象的核心方法,旨在为读者提供清晰的参考指南。
类的基本定义与实例生成
首先介绍类的基础定义方式以及如何生成类的实例对象。
// 类的基本定义和生成实例
class Parent{ //定义一个类
constructor(name='xiaxaioxian'){
this.name= name;
}
}
// 生成一个实例
let g_parent = new Parent();
console.log(g_parent); //{name: "xiaxaioxian"}
let v_parent = new Parent('v') // 'v'就是构造函数name属性 , 覆盖构造函数的name属性值
console.log(v_parent); // {name: "v"}
类的继承机制
接着探讨类之间的继承关系及其实现机制。
// 继承
class Parent{ //定义一个类
constructor(name='xiaxaioxian'){
this.name= name;
}
}
class Child extends Parent{
}
console.log('继承',new Child()) // 继承 {name: "xiaxaioxian"}
继承中的参数传递
进一步说明在继承过程中如何正确传递和处理参数。
// 继承传递参数
class Parent{ //定义一个类
constructor(name='xiaxaioxian'){
this.name= name;
}
}
class Child extends Parent{
constructor(name = 'child'){ // 子类重写name属性值
super(name); // 子类向父类修改 super一定放第一行
this.type= 'preson';
}
}
console.log('继承',new Child('hello')) // 带参数覆盖默认值 继承{name: "hello", type: "preson"}
访问器属性:getter与setter
解析ES6对ES5中访问器属性的重新定义,包括getter和setter的使用。
class Parent{ //定义一个类
constructor(name='xiaxaioxian'){
this.name= name
}
get longName(){ // 属性
return 'mk' + this.name
}
set longName(value){
this.name = value
}
}
let v = new Parent();
console.log('getter',v.longName) // getter mkxiaxaioxian
v.longName = 'hello';
console.log('setter',v.longName) // setter mkhello
静态方法的定义与调用
介绍如何在类中定义静态方法,并说明其调用方式。
class Parent{ //定义一个类
constructor(name='xiaxaioxian'){
this.name= name
}
static tell(){ // 静态方法:通过类去调用,而不是实例
console.log('tell')
}
}
Parent.tell(); // tell
静态属性的实现
阐述静态属性的定义方法及其与实例属性的区别。
// 静态属性
class Parent{ //定义一个类
constructor(name='xiaxaioxian'){
this.name= name
}
static tell(){ // 静态方法:通过类去调用,而不是实例
console.log('tell') // tell
}
}
Parent.type = 'test'; // 定义静态属性
console.log('静态属性',Parent.type) // 静态属性 test
let v_parent = new Parent();
console.log(v_parent); // {name: "xiaxaioxian"} 没有tell方法和type属性
读者可使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun对上述代码进行实际测试,以验证运行效果。
如需深入了解JavaScript其他知识,可参考本站系列教程,包括《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》以及《JavaScript数学运算用法总结》。
希望本文提供的关于JavaScript程序设计的知识能对读者有所帮助。
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
