ES6（11）：Class

作者：陈应锋forever | 来源：互联网 | 2023-05-29 18:54

ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。（所以其实不要和面向对象的

ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。（所以其实不要和面向对象的class 混为一谈，因为并不是真正意义上的类）

ES5：（之前的博文中有记录过this，优先级new 是最高的，并且如果是new 方法创建的实例，等于是复制了一份，this指向自身）

技术分享图片

constructor构造方法，this关键字则代表实例对象（与ES5 一致）。

class 创建的类与ES5 中创建的函数有所不同，下面如果直接执行call 方法，提示类的构造器不能没有new 去执行，必须要创建实例才可以。

技术分享图片

类的数据类型就是函数，类本身就指向构造函数。

技术分享图片

在类的实例上面调用方法，其实就是调用原型上的方法。

技术分享图片

class B {}
let b = new B();
b.cOnstructor=== B.prototype.constructor // true

由于类的方法都定义在prototype对象上面，所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法。

class Point {
constructor(){
// ...
}
}
Object.assign(Point.prototype, {
toString(){},
toValue(){}
});

技术分享图片

设置对象原型的时候，a 丢到了Point 类的构造方法的原型中。

prototype对象的constructor属性，直接指向“类”的本身，这与 ES5 的行为是一致的。

Point.prototype.cOnstructor=== Point // true

内部所有定义的方法，都是不可枚举的（non-enumerable）。这一点与 ES5（可枚举）的行为不一致。

ES5 一样，实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）。

//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘;
}
}
var point = new Point(2, 3);
point.toString() // (2, 3)
point.hasOwnProperty(‘x‘) // true
point.hasOwnProperty(‘y‘) // true
point.hasOwnProperty(‘toString‘) // false
point.__proto__.hasOwnProperty(‘toString‘) // true

getter、setter：

class MyClass {
constructor() {
// ...
}
get prop() {
return ‘getter‘;
}
set prop(value) {
console.log(‘setter: ‘+value);
}
}
let inst = new MyClass();
inst.prop = 123;
// setter: 123
inst.prop
// ‘getter‘

类的属性名，可以采用表达式。

let methodName = ‘getArea‘;
class Square {
constructor(length) {
// ...
}
[methodName]() {
// ...
}
}

技术分享图片

表达式：（有点像函数）

const MyClass = class Me {
getClassName() {
return Me.name;
}
};
const MyClass1 = class{
getClassName() {
return Me.name;
}
};
const foo = function test(){}

技术分享图片

采用 Class 表达式，可以写出立即执行的 Class（必须要有new）。

let person = new class {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}(‘张三‘);
person.sayName(); // "张三"

类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。

类不存在变量提升（hoist），这一点与 ES5 完全不同。

技术分享图片

变量提升到全局window。（作为使用new 创建的对象实例，本身this也是指向自身）

由于本质上，ES6 的类只是 ES5 的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性。

如果某个方法之前加上星号（*），就表示该方法是一个 Generator 函数。

class Foo {
constructor(...args) {
this.args = args;
}
* [Symbol.iterator]() {
for (let arg of this.args) {
yield arg;
}
}
}
for (let x of new Foo(‘hello‘, ‘world‘)) {
console.log(x);
}
// hello
// world

类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。

全局方法/静态方法：如果静态方法包含this关键字，这个this指的是类，而不是实例。

class Foo {
static classMethod() {
return ‘hello‘;
}
}
Foo.classMethod() // ‘hello‘
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function

class Foo {
static bar() {
this.baz();
}
static baz() {
console.log(‘hello‘);
}
baz() {
console.log(‘world‘);
}
}
Foo.bar() // hello

类可以被继承（extend）：Bar继承了Foo 类，Bar的原型指向Foo

技术分享图片

静态方法也是可以从super对象上调用的（非静态方法也可以）。

class Foo {
static classMethod() {
return ‘hello‘;
}
}
class Bar extends Foo {
static classMethod() {
return super.classMethod() + ‘, too‘;
}
}
Bar.classMethod() // "hello, too"

实例属性除了定义在constructor()方法里面的this上面，也可以定义在类的最顶层（注意没有this）。

class IncreasingCounter {
_count = 0;
get value() {
console.log(‘Getting the current value!‘);
return this._count;
}
increment() {
this._count++;
}
}

静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性（第一种跟ES5 之前一样）。

class Foo {
}
Foo.prop = 1;
Foo.prop // 1

目前最新的写法。

class MyClass {
static myStaticProp = 42;
constructor() {
console.log(MyClass.myStaticProp); // 42
}
}

私有方法和私有属性（class 暂不直接支持，只有通过变通的方法，因为class 其内部this本身就是指向实例自身）

ES5：

技术分享图片

ES6：

class Widget {
foo (baz) {
bar.call(this, baz);
}
// ...
}
function bar(baz) {
return this.snaf = baz;
}

bar 成为了类的私有方法。

私有属性提案（chrom最新版可以使用了,火狐67.0 未支持）class加了私有属性。方法是在属性名之前，使用#表示，内部使用this.#xxx 访问。

技术分享图片

对比：

技术分享图片

私有方法：貌似暂时不支持

new是从构造函数生成实例对象的命令。ES6 为new命令引入了一个new.target属性，该属性一般用在构造函数之中，返回new命令作用于的那个构造函数。如果构造函数不是通过new命令或Reflect.construct()调用的，new.target会返回undefined，因此这个属性可以用来确定构造函数是怎么调用的。

技术分享图片

利用这个特点，可以写出不能独立使用、必须继承后才能使用的类（子类继承父类时，new.target会返回子类）。

class Shape {
constructor() {
if (new.target === Shape) {
throw new Error(‘本类不能实例化‘);
}
}
}
class Rectangle extends Shape {
constructor(length, width) {
super();
// ...
}
}
var x = new Shape(); // 报错
var y = new Rectangle(3, 4); // 正确

推荐阅读

main
OC学习笔记之@property和@synthesize

本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

蜡笔小新 2023-12-14 12:05:06
int
lua语言闭包、模式匹配、日期、编译、模块的特性及应用

本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值，函数可以作为变量自由传递，也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性，为程序开发带来了便利。 ... [详细]

蜡笔小新 2023-12-14 18:18:21
function
基于layUI的图片上传前预览功能的2种实现方式

本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]

蜡笔小新 2023-12-14 17:06:58
main
Java实现大数乘法（分治算法）

本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]

蜡笔小新 2023-12-14 15:43:50
get
Hibernate基础映射

在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

蜡笔小新 2023-12-14 10:57:47
java
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
get
java 线程死锁模拟

1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]

蜡笔小新 2023-12-13 19:12:25
main
指针的引用以及在什么情况下使用指针的引用

本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址，通过指针可以修改指针所指的变量的值。然而，如果想要修改指针的指向，就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法，并思考了在修改指针的指向后，取指针的输出结果。 ... [详细]

蜡笔小新 2023-12-13 12:54:29
get
GetWindowLong函数

今天在看一个代码里头写了GetWindowLong(hwnd,0)，我当时就有点费解，靠，上网搜索函数原型说明，死活找不到第 ... [详细]

蜡笔小新 2023-12-14 17:58:15
list
PHP图片截取方法及应用实例

本文介绍了使用PHP动态切割JPEG图片的方法，并提供了应用实例，包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用，以及图片切割的具体步骤。同时，还提供了一些注意事项和优化建议。通过本文的学习，读者可以掌握PHP图片截取的技巧，实现自己的需求。 ... [详细]

蜡笔小新 2023-12-14 16:44:09
int
Java序列化对象传给PHP的方法及原理解析

本文介绍了Java序列化对象传给PHP的方法及原理，包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用，以及代码执行序列化所需要的权限。最后指出，序列化会将对象实例的所有字段都进行序列化，使得数据能够被表示为实例的序列化数据，但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]

蜡笔小新 2023-12-14 15:25:15
utf-8
开发笔记:加密&json&StringIO模块&BytesIO模块

篇首语：本文由编程笔记#小编为大家整理，主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识，希望对你有一定的参考价值。一、加密加密 ... [详细]

蜡笔小新 2023-12-14 15:18:35
main
实现下拉列表，点击其他位置自动隐藏效果的三种方式比较

目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]

蜡笔小新 2023-12-14 15:03:14
utf-8
Alink回归预测的不完善问题及期待

本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

蜡笔小新 2023-12-14 14:25:33
int
如何使用Java获取服务器硬件信息和磁盘负载率

本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务，并获取服务器的磁盘信息，并将结果输出。然后在本地使用JS编写一个AJAX脚本，远程请求服务端的程序，得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]

蜡笔小新 2023-12-14 13:56:20

陈应锋forever

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章