介绍 JavaScript 中的类
最编程
2024-10-01 20:46:54
...
在JavaScript中,class
关键字自ES6(ECMAScript 2015)起被引入,作为基于原型的继承的更清晰、更易于理解的语法糖。它允许你通过类(class)和构造函数(constructor)来创建对象,并通过类的方法(methods)和属性(properties)来定义对象的行为和状态。以下是对class
的详细介绍和各种示例说明。
基本语法
class ClassName {
constructor(props) {
// 构造函数,实例创建时自动调用
this.property = props;
}
methodName(args) {
// 方法,可以访问类的属性和其他方法
// ...
}
get propertyName() {
// getter,访问属性时使用
// ...
}
set propertyName(value) {
// setter,设置属性值时使用
// ...
}
// 可以使用 static 关键字定义静态方法
static staticMethodName(args) {
// 静态方法,不需要实例化类就可以调用
// ...
}
}
示例
示例 1: 基本类和实例
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const person1 = new Person('Alice', 30);
person1.greet(); // 输出: Hello, my name is Alice and I am 30 years old.
示例 2: Getter 和 Setter
class User {
constructor(name) {
this._name = name;
}
get name() {
return this._name.toUpperCase();
}
set name(value) {
if (value.length < 3) {
throw new Error('Name must be at least 3 characters long');
}
this._name = value;
}
}
const user = new User('bob');
console.log(user.name); // 输出: BOB
user.name = 'al'; // 抛出错误
user.name = 'Alice';
console.log(user.name); // 输出: ALICE
示例 3: 静态方法
class MathUtils {
static add(a, b) {
return a + b;
}
static multiply(a, b) {
return a * b;
}
}
console.log(MathUtils.add(2, 3)); // 输出: 5
console.log(MathUtils.multiply(2, 3)); // 输出: 6
示例 4: 继承
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
const myDog = new Dog('Buddy');
myDog.speak(); // 输出: Buddy barks.
在上面的示例中,Dog
类通过 extends
关键字继承了 Animal
类的属性和方法,并且重写了 speak
方法以提供特定于狗的行为。
示例 5: 多态
多态性允许我们以统一的接口来处理不同的对象类型。在JavaScript中,多态性通常通过方法的重写和函数的参数多态性(即函数可以接受不同类型的参数)来实现。
然而,由于JavaScript的动态类型和原型继承机制,多态性在JavaScript中表现得更加自然和灵活。我们不需要显式地声明接口或类型,而是可以基于对象的实际类型来调用方法。
class Shape {
draw() {
console.log('Drawing a shape...');
}
}
class Circle extends Shape {
draw() {
console.log('Drawing a circle...');
}
}
class Square extends Shape {
draw() {
console.log('Drawing a square...');
}
}
function drawShape(shape) {
shape.draw(); // 这里体现了多态性:draw方法的具体实现取决于shape的实际类型
}
const circle = new Circle();
const square = new Square();
drawShape(circle); // 输出: Drawing a circle...
drawShape(square); // 输出: Drawing a square...
在这个例子中,drawShape
函数接受一个Shape
类型的参数,但由于多态性,它可以接受Circle
或Square
的实例,并调用它们各自的draw
方法。这就是多态性在JavaScript中的体现。
这些示例展示了JavaScript中class
的基本用法,包括如何定义类、实例化对象、使用getter和setter、定义静态方法以及如何通过继承来扩展类的功能。这些特性使得JavaScript成为一种强大且灵活的面向对象编程语言。
推荐阅读
-
解释 JavaScript 中函数的实参和形参
-
介绍 JavaScript 中的类
-
深入解析Android中的Image类(涉及YUV_420_888)
-
最全面详细:JavaScript中YUV420P转换为RGB的完整解析
-
10bit YUV(P010)的存储结构和处理-随着计算机处理信息的能力越来越厉害,这种能表现更高动态范围的图像存储格式将会逐渐成为主流,但是现在很多算法都不能直接处理 10bit 的 YUV ,都是先将其转换为 8bit YUV ,然后再进行处理,这实际上是丢弃了 10bit YUV 的图像高动态范围优势。 令人遗憾的是在渲染图像时,目前 OpenGL 也无法直接对 10bit YUV 进行渲染,也是需要先转换为 8bit YUV 。 接下来以一种常见的 10bit YUV (P010) 格式为例,介绍一下 10bit YUV 到 8bit YUV 的转换过程。 P010 最早是微软定义的格式,表示的是 YUV 4:2:0 的采样方式,也就是说 P010 表示的是一类 YUV 格式,它的内存排布方式可能是 NVNVYUYV12 。
-
Java 8新特性探究(十三)JavaFX 8新特性以及开发2048游戏-JavaFX历史## 跟java在服务器端和web端成绩相比,桌面一直是java的软肋,于是Sun公司在2008年推出JavaFX,弥补桌面软件的缺陷,请看下图JavaFX一路走过来的改进 从上图看出,一开始推出时候,开发者需使用一种名为JavaFX Script的静态的、声明式的编程语言来开发JavaFX应用程序。因为JavaFX Script将会被编译为Java bytecode,程序员可以使用Java代码代替。 JavaFX 2.0之后的版本摒弃了JavaFX Script语言,而作为一个Java API来使用。因此使用JavaFX平台实现的应用程序将直接通过标准Java代码来实现。 JavaFX 2.0 包含非常丰富的 UI 控件、图形和多媒体特性用于简化可视化应用的开发,WebView可直接在应用中嵌入网页;另外 2.0 版本允许使用 FXML 进行 UI 定义,这是一个脚本化基于 XML 的标识语言。 从JDK 7u6开始,JavaFx就与JDK捆绑在一起了,JavaFX团队称,下一个版本将是8.0,目前所有的工作都已经围绕8.0库进行。这是因为JavaFX将捆绑在Java 8中,因此该团队决定跳过几个版本号,迎头赶上Java 8。 ##JavaFx8的新特性 ## ###全新现代主题:Modena 新的Modena主题来替换原来的Caspian主题。不过在Application的start方法中,可以通过setUserAgentStylesheet(STYLESHEET_CASPIAN)来继续使用Caspian主题。 参考http://fxexperience.com/2013/03/modena-theme-update/ ###JavaFX 3D 在JavaFX8中提供了3D图像处理API,包括Shape3D (Box, Cylinder, MeshView, Sphere子类),SubScene, Material, PickResult, LightBase (AmbientLight 和PointLight子类),SceneAntialiasing等。Camera类也得到了更新。从JavaDoc中可以找到更多信息。 ###富文本 强化了富文本的支持 ###TreeTableView ###日期控件DatePicker 增加日期控件 ###用于 CSS 结构的公共 API
-
解析Python中的类的方法和概念
-
在js中实现大顶堆和小顶堆的操作(javascript)
-
将频谱中的零频率分量移到中心位置的有关fftshift的介绍
-
介绍前端JavaScript代码混淆加密的简单示例和原理