ES6类与对象定义详解:继承、访问器、静态方法与属性

作者:代码拾荒

时间:2026-10-24

浏览:70

本文详解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程序设计的知识能对读者有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章