ECMAScript 6：二、Class基本语法
1 前言
ES6学习笔记2：Class。
学习地址：
https://es6.ruanyifeng.com/#docs/class
2 笔记
（1）类的由来
JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。
const {log:l} = console;
function Dear(x, y) {
this.x = x;
this.y = y;
}
Dear.prototype.toString = function() {
return `Dear with ${this.x} and ${this.y}`;
}
var d = new Dear('xiaoxu', 'xiaoli')
l(d) // Dear { x: 'xiaoxu', y: 'xiaoli' }
l(d.toString()) // Dear with xiaoxu and xiaoli
上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写，就是下面这样。 –总结：ES6的class可看作为语法糖。
class Dear {
// 构造方法constructor，也在Dear类的原型链（prototype）上
constructor(x, y){
this.x = x;
this.y = y;
}
// 定义在Dear的原型链（Dear.prototype）上的方法
toString(){
return `Dear with ${this.x} and ${this.y}`;
}
}
var d = new Dear('xiaoxu', 'xiaoli')
l(d) // Dear { x: 'xiaoxu', y: 'xiaoli' }
l(d.toString()) // Dear with xiaoxu and xiaoli
上面代码定义了一个“类”，可以看到里面有一个constructor()方法，这就是构造方法，而this关键字则代表实例对象。这种新的 Class 写法，本质上与本章开头的 ES5 的构造函数Dear是一致的。
Dear类除了构造方法，还定义了一个toString()方法。注意，定义toString()方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法与方法之间不需要逗号分隔，加了会报错。
ES6 的类，完全可以看作构造函数的另一种写法。
class Dear {
// 构造方法constructor，也在Dear类的原型链（prototype）上
constructor(x, y){
this.x = x;
this.y = y;
}
// 定义在Dear的原型链（Dear.prototype）上的方法
toString(){
return `Dear with ${this.x} and ${this.y}`;
}
}
l(typeof Dear) // function
l(Dear === Dear.prototype.constructor) // true
上面代码表明，类的数据类型就是函数，类本身就指向构造函数。
使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。
构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。
class Dear {
// 构造方法constructor，也在Dear类的原型链（prototype）上
constructor(x, y){
}
// 定义在Dear的原型链（Dear.prototype）上的方法
toString(){
}
toVal(){}
}
// 等同于
Dear.prototype = {
constructor(x, y){
},
toString(){
},
toVal(){}
}
上面代码中，constructor(x, y)、toString()、toVal()这三个方法，其实都是定义在Dear.prototype上面。
因此，在类的实例上面调用方法，其实就是调用原型上的方法。
class B {
toString(){
console.log("B")
}
}
const b = new B();
l(b.constructor === B.prototype.constructor) // true
l(b.toString === B.prototype.toString) // true
B.prototype.toString.call(b) // B
b.toString() // B
上面代码中，b是B类的实例，它的constructor()方法就是B类原型的constructor()方法。
由于类的方法都定义在prototype对象上面，所以类的新方法可以添加在prototype对象上面。Object.assign()方法可以很方便地一次向类添加多个方法。
Object.assign的浅拷贝，对于基本数据类型，遇到同名属性则直接将其替换。对于引用数据类型，直接把指向的地址替换为目标地址，而它本有的原始属性会丢失掉。
（1）Object.assign 方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。
（2）Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象。
注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，
则后面的属性会覆盖前面的属性。
（3）Object.assign 拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（ enumerable: false ）。即Object.assign 方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。
查看可枚举属性的方式：
// 定义一个对象
const obj = {
name: 'xiaoxu',
age: 99,
[Symbol('key')]: 'symbol value'
};
// 查看所有可枚举属性
const enumerableProperties = Object.keys(obj);
console.log(enumerableProperties); // ['name', 'age']
// 查看所有属性（可枚举和不可枚举）
const allProperties = Reflect.ownKeys(obj);
console.log(allProperties); // ['name', 'age', 'Symbol(key)']
Object.assign()方法向类添加多个方法栗子：
let {log: l} = console;
class Dear {
// 构造方法constructor，也在Dear类的原型链（prototype）上
constructor(x, y){
}
// 定义在Dear的原型链（Dear.prototype）上的方法
toString(){
}
toVal(){}
}
let obj = {
constructor(x, y){
},
toString(){
console.log('toString')
},
toVal(){
console.log('toVal')
}
}
const dear = new Dear();
// 打印可枚举的属性，
// 可枚举的属性才能通过Object.assign
// 拷贝到target对象Dear.prototype
l(Object.keys(obj)) //[ 'constructor', 'toString', 'toVal' ]
Object.assign(Dear.prototype, obj)
Dear.prototype.toString.call(dear) //toString
dear.toVal() //toVal
prototype对象的constructor属性，直接指向“类”的本身，这与 ES5 的行为是一致的。
class Dear {
// 构造方法constructor，也在Dear类的原型链（prototype）上
constructor(x, y){
}
// 定义在Dear的原型链（Dear.prototype）上的方法
toString(){
}
toVal(){}
}
l(Dear.prototype.constructor === Dear) // true
另外，类的内部所有定义的方法，都是不可枚举的（non-enumerable）。
class Dear {
// 构造方法constructor，也在Dear类的原型链（prototype）上
constructor(x, y){
}
// 定义在Dear的原型链（Dear.prototype）上的方法
toString(){
}
toVal(){}
}
l(Object.keys(Dear.prototype)) //[]
l(Object.getOwnPropertyNames(Dear.prototype))
// [ 'constructor', 'toString', 'toVal' ]
上面代码中，toString()方法是Dear类内部定义的方法，它是不可枚举的。这一点与 ES5 的行为不一致。
var Dear = function (x, y) {
// ...
};
Dear.prototype.toString = function () {
// ...
};
l(Object.keys(Dear.prototype))
// ["toString"]
l(Object.getOwnPropertyNames(Dear.prototype))
// ["constructor","toString"]
上面代码采用 ES5 的写法，toString()方法就是可枚举的。
（2）constructor() 方法
constructor()方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor()方法，如果没有显式定义，一个空的constructor()方法会被默认添加。
class Dear {
}
// 等同于
class Dear {
constructor() {}
}
上面代码中，定义了一个空的类Dear，JavaScript引擎会自动为它添加一个空的constructor()方法。
constructor()方法默认返回实例对象（即this），完全可以指定返回另外一个对象。
class Dear {
constructor() {
return Object.create(null);
}
}
l(new Dear() instanceof Dear) // false
l(null instanceof Dear) // false
l(undefined instanceof Dear) // false
上面代码中，constructor()函数返回一个全新的对象，结果导致实例对象不是Dear类的实例。
类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。
class Dear {
constructor() {
return Object.create(null);
}
}
// TypeError: Class constructor Dear
// cannot be invoked without 'new'
Dear()
（3）类的实例
生成类的实例的写法，与 ES5 完全一样，也是使用new命令。前面说过，如果忘记加上new，像函数那样调用Class()，将会报错。
class Dear {
// ...
}
// 报错
var dear = Dear(2, 3);
// 正确
var dear = new Dear(2, 3);
类的属性和方法，除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）。
class Dear {
// 构造方法constructor，也在Dear类的原型链（prototype）上
constructor(x, y){
this.x = x;
this.y = y;
}
// 定义在Dear的原型链（Dear.prototype）上的方法
toString(){
return `Dear with ${this.x} and ${this.y}`;
}
}
var d = new Dear("xiaoxu", "xiaoli");
l(d.toString()) //Dear with xiaoxu and xiaoli
l(d.hasOwnProperty('x')) //true 实例this的属性
l(d.hasOwnProperty('y')) //true 实例this的属性
// toString在类的原型链上，实例对象获取不到
l(d.hasOwnProperty('toString')) //false
// d.__proto__是类的原型链
l(d.__proto__ === Dear.prototype) //true
l(d.__proto__.hasOwnProperty('x')) //false
l(d.__proto__.hasOwnProperty('toString')) //true
上面代码中，x和y都是实例对象Dear自身的属性（因为定义在this对象上），所以hasOwnProperty()方法返回true，而toString()是原型对象的属性（因为定义在Dear类上），所以hasOwnProperty()方法返回false。这些都与 ES5 的行为保持一致。
与 ES5 一样，类的所有实例共享一个原型对象。
class Dear {
// 构造方法constructor，也在Dear类的原型链（prototype）上
constructor(x, y){
this.x = x;
this.y = y;
}
// 定义在Dear的原型链（Dear.prototype）上的方法
toString(){
return `Dear with ${this.x} and ${this.y}`;
}
}
var d = new Dear("xiaoxu", "xiaoli");
var d2 = new Dear("xiaoli", "xiaoxu")
l(d.__proto__ === d2.__proto__) // true
l(Object.getPrototypeOf(d) === Dear.prototype) //true
l(Object.getPrototypeOf(d2) === Dear.prototype) //true
上面代码中，d和d2都是Dear的实例，它们的原型都是Dear.prototype，所以__proto__属性是相等的。
这也意味着，可以通过实例的__proto__属性为“类”添加方法。
__proto__ 并不是语言本身的特性，这是各大厂商具体实现时添加的私有属性，虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性，但依旧不建议在生产中使用该属性，避免对环境产生依赖。生产环境中，我们可以使用 Object.getPrototypeOf() 方法来获取实例对象的原型，然后再来为原型添加方法/属性。
class Dear {
// 构造方法constructor，也在Dear类的原型链（prototype）上
constructor(x, y){
this.x = x;
this.y = y;
}
// 定义在Dear的原型链（Dear.prototype）上的方法
toString(){
return `Dear with ${this.x} and ${this.y}`;
}
}
var d = new Dear("xiaoxu", "xiaoli");
var d2 = new Dear("xiaoli", "xiaoxu")
d.__proto__.print = function() { l("xiaoxu and xiaoli") };
d.print() //xiaoxu and xiaoli
d2.print() //xiaoxu and xiaoli
var d3 = new Dear("xu", "li");
d3.print() //xiaoxu and xiaoli
上面代码在d的原型上添加了一个print()方法，由于d的原型就是d2的原型，因此d2也可以调用这个方法。而且，此后新建的实例d3也可以调用这个方法。这意味着，使用实例的__proto__属性改写原型，必须相当谨慎，不推荐使用，因为这会改变“类”的原始定义，影响到所有实例。
（4）实例属性的新写法
ES2022 为类的实例属性，又规定了一种新写法。实例属性现在除了可以定义在constructor()方法里面的this上面，也可以定义在类内部的最顶层。
//以前的实例属性写法
class Increase {
constructor(){
this._count = 0;
}
get count(){
l("get count")
return this._count;
}
increment(){
this._count++;
}
}
上面示例中，实例属性_count定义在constructor()方法里面的this上面。
现在的新写法是，这个属性也可以定义在类的最顶层，其他都不变。
class Increase {
_count = 0;
get count(){
l("get count")
return this._count;
}
increment(){
this._count++;
}
}
上面代码中，实例属性_count与取值函数count()和increment()方法，处于同一个层级。这时，不需要在实例属性前面加上this。–总结：类中实例属性（无static，无this修饰）和原型链（类）的方法同层级时，属性是归属于this实例对象的，而方法是归属于原型链prototype的，归属有区别。
class Increase {
_count = 0;
get count(){
l("get count", this._count)
return this._count;
}
increment(){
this._count++;
}
}
var i1 = new Increase();
var i2 = new Increase();
i2.increment();
i1.count //get count 0
i2.count //get count 1
上述可见，_count不属于prototype，归属于实例本身（如果是类prototype本身的属性，那么获取的值应当一致才对）。
注意，新写法定义的属性是实例对象自身的属性，而不是定义在实例对象的原型上面。
这种新写法的好处是，所有实例对象自身的属性都定义在类的头部，看上去比较整齐，一眼就能看出这个类有哪些实例属性。
class Dear {
bar = 'hello';
baz = 'world';
constructor() {
// ...
}
}
上面的代码，一眼就能看出，Dear类有两个实例属性，一目了然。另外，写起来也比较简洁。
（5）取值函数（getter）和存值函数（setter）
与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。
class MyClass {
constructor() {
// ...
}
// get set的方法名称，就是属性值的名称
get prop() {
return 'getter';
}
set prop(value) {
console.log('setter: '+value);
}
}
let inst = new MyClass();
inst.prop = 123;
// setter: 123
l(inst.prop)
// 'getter'
上面代码中，prop属性有对应的存值函数和取值函数，因此赋值和读取行为都被自定义了。
存值函数和取值函数是设置在属性的 Descriptor 对象上的。同时，this.prop = prop;也会调用自身的prop属性的set方法。
class MyClass {
constructor(prop) {
// ...
this.prop = prop;
}
// get set的方法名称，就是属性值的名称
get prop() {
return 'getter';
}
set prop(value) {
console.log('setter: '+value);
}
}
let inst = new MyClass(12);
inst.prop = 123;
// setter: 123
l(inst.prop)
// 'getter'
let props = Object.getOwnPropertyDescriptors(MyClass.prototype);
l('first:')
l(props)
// true
l('prop' in props)
let prop = Object.getOwnPropertyDescriptor(MyClass.prototype,
"prop");
l('second:')
l(prop)
l('prop' in prop) // false
l('set' in prop) // true
l('get' in prop) // true
结果：
setter: 12
setter: 123
getter
first:
{
constructor: {
value: [class MyClass],
writable: true,
enumerable: false,
configurable: true
},
prop: {
get: [Function: get prop],
set: [Function: set prop],
enumerable: false,
configurable: true
}
}
true
second:
{
get: [Function: get prop],
set: [Function: set prop],
enumerable: false,
configurable: true
}
false
true
true
上面代码中，存值函数和取值函数是定义在prop属性的描述对象上面，这与 ES5 完全一致。
（6）属性表达式
类的属性名，可以采用表达式。
let method = "getAge";
class Xiaoxu {
constructor(){
}
[method](){
console.log('xiaoxu lai le.')
}
}
new Xiaoxu().getAge() //xiaoxu lai le.
上面Xiaoxu类的方法名getAge，是从表达式得到的。
（7）Class 表达式
与函数一样，类也可以使用表达式的形式定义。
const MyClass = class Xiaoxu {
getClassName() {
return Xiaoxu.name;
}
};
上面代码使用表达式定义了一个类。需要注意的是，这个类的名字是Xiaoxu，但是Xiaoxu只在 Class 的内部可用，指代当前类。在 Class 外部，这个类只能用MyClass引用。
const MyClass = class Xiaoxu {
getClassName() {
return Xiaoxu.name;
}
};
let inst = new MyClass();
l(inst.getClassName()) // Xiaoxu
Xiaoxu.name // ReferenceError: Xiaoxu is not defined
上面代码表示，Xiaoxu只在 Class 内部有定义。
如果类的内部没用到的话，可以省略Xiaoxu，也就是可以写成下面的形式。
const MyClass = class { /* ... */ };
采用 Class 表达式，可以写出立即执行的 Class。
let person = new class {
constructor(name) {
this.name = name;
}
printName(){
console.log(this.name)
}
}('小徐');
person.printName(); //小徐
上面代码中，person是一个立即执行的类的实例。
（8）静态方法
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
class Xiaoxu {
static printHi(){
console.log('hello');
}
}
Xiaoxu.printHi(); //hello
var x = new Xiaoxu();
x.printHi() //TypeError: x.printHi is not a function
上面代码中，Xiaoxu类的printHi方法前有static关键字，表明该方法是一个静态方法，可以直接在Xiaoxu类上调用（Xiaoxu.printHi()），而不是在Xiaoxu类的实例上调用。如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。
– 总结：类中static修饰的静态方法，需要类调用，实例无法调用。
而Java中则不是这样，java中实例对象和类都可以调用static静态方法：
class Fruit {
static void run(){
System.out.println("just run with me.");
}
}
Java执行结果如下：
Fruit.run(); //just run with me.
new Fruit().run(); //just run with me.
注意，如果静态方法包含this关键字，这个this指的是类，而不是实例。
class Xiaoxu {
static print() {
// static方法中的this，指的是类本身：Xiaoxu
this.Pout();
}
static Pout() {
console.log('hello');
}
Pout() {
console.log('world');
}
}
Xiaoxu.print() // hello
上面代码中，静态方法print调用了this.Pout，这里的this指的是Xiaoxu类，而不是Xiaoxu的实例，等同于调用Xiaoxu.Pout。另外，从这个例子还可以看出，静态方法可以与非静态方法重名。
Java则不尽然，java中的static方法中，是不能出现this关键字的，因为this就是指向的实例对象本身，而非类本身。同时Java中是不能出现同名的静态方法和非静态方法，除非是同名的重载方法（参数个数或类型不同）。
父类的静态方法，可以被子类继承。
class Xiaoxu {
static print() {
console.log('hello');
}
}
class Xu extends Xiaoxu {
}
Xu.print() // 'hello'
这一点和Java是相同的，Java栗子如下：
class Fruit {
static void run() {
System.out.println("just run with me.");
}
}
class FruitSon extends Fruit {
}
执行结果：
FruitSon.run(); //just run with me.
上述说明，父类的静态方法，子类是可以调用的。
同时静态方法也可以从super对象上调用，这点同Java依然存在区别。
class Xiaoxu {
static print() {
console.log('hello');
}
}
class Xu extends Xiaoxu {
static print() {
super.print();
console.log("xiaoxu!")
}
}
Xu.print()
// 'hello'
// xiaoxu!
在Java中不支持static方法中使用super关键字：
Java中支持在实例方法中使用super（非static方法）：
执行结果：
new FruitSon().run();
//just run with me.
//just run with me.
– 总结：类中static修饰的静态方法，供类本身调用，实例无法调用该方法。静态方法包含this关键字，这个this指的是类，而不是实例对象。静态方法可以与非静态方法重名，同时父类的静态方法，可以被子类继承。
（9）静态属性
静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。
class Xiaoxu {
}
Xiaoxu.names = "xu";
l(Xiaoxu.names) // xu
注意：类名.name打印的是类名称：
class Xiaoxu {
}
Xiaoxu.name = "xu";
l(Xiaoxu.name) // Xiaoxu
上面的写法为Xiaoxu类定义了一个静态属性names。
目前，只有这种写法可行，因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。现在有一个提案提供了类的静态属性，写法是在实例属性的前面，加上static关键字。
class MyClass {
static myStaticProp = 99;
constructor() {
console.log(MyClass.myStaticProp); // 99
}
}
const m = new MyClass() //99
这个新写法大大方便了静态属性的表达。
// 老写法
class Foo {
// ...
}
Foo.prop = 1;
// 新写法
class Foo {
static prop = 1;
}
上面代码中，老写法的静态属性定义在类的外部。整个类生成以后，再生成静态属性。这样让人很容易忽略这个静态属性，也不符合相关代码应该放在一起的代码组织原则。另外，新写法是显式声明（declarative），而不是赋值处理，语义更好。
– 总结：类的静态属性，支持在类内部，通过static修饰属性，显式声明作为类的静态属性。
（10）私有方法和私有属性
早期解决方案
私有方法和私有属性，是只能在类的内部访问的方法和属性，外部不能访问。这是常见需求，有利于代码的封装，但早期的 ES6 不提供，只能通过变通方法模拟实现。
一种做法是在命名上加以区别。
class Widget {
// 公有方法
load (props) {
this._pro(props);
}
// 私有方法
_pro(props) {
return this.p = props;
}
// ...
}
上面代码中，_pro()方法前面的下划线，表示这是一个只限于内部使用的私有方法。但是，这种命名是不保险的，在类的外部，还是可以调用到这个方法（实际还是可以调用的）。
另一种方法就是索性将私有方法移出类，因为类内部的所有方法都是对外可见的。
class Widget {
load (props) {
pro.call(this, props);
}
// ...
}
function pro(props) {
return this.p = props;
}
上面代码中，load是公开方法，内部调用了pro.call(this, props)。这使得pro(props)实际上成为了当前类的私有方法。
还有一种方法是利用Symbol值的唯一性，将私有方法的名字命名为一个Symbol值。
const pro = Symbol('pro');
const p = Symbol('p');
export default class MyClass{
// 公有方法
load(props) {
this[pro](props);
}
// 私有方法
[pro](props) {
return this[p] = props;
}
// ...
};
上面代码中，pro和p都是Symbol值，一般情况下无法获取到它们，因此达到了私有方法和私有属性的效果。但是也不是绝对不行，Reflect.ownKeys()依然可以拿到它们。
const pro = Symbol('pro');
const p = Symbol('p');
class MyClass{
// 公有方法
load(props) {
this[pro](props);
}
// 私有方法
[pro](props) {
return this[p] = props;
}
// ...
};
l(Reflect.ownKeys(MyClass.prototype))
// [ 'constructor', 'load', Symbol(pro) ]
上面代码中，Symbol值的属性名依然可以从类的外部拿到。
私有属性的正式写法
ES2022正式为class添加了私有属性，方法是在属性名之前使用#表示。而Java是通过private关键字来声明私有属性的。
class Increase {
#count = 0;
get value() {
console.log('Getting value:', this.#count);
return this.#count;
}
increment() {
this.#count++;
}
}
const inc = new Increase();
inc.value //Getting value: 0
inc.increment()
l(inc.value)
//Getting value: 1
//1
上面代码中，#count就是私有属性，只能在类的内部使用（this.#count）。如果在类的外部使用，就会报错。
class Increase {
#count = 0;
get value() {
console.log('Getting value:', this.#count);
return this.#count;
}
increment() {
this.#count++;
}
}
const inc = new Increase();
inc.#count
//SyntaxError: Private field '#count'
// must be declared in an enclosing class
inc.#count = 20
//SyntaxError: Private field '#count'
// must be declared in an enclosing class
上面示例中，在类的外部，读取或写入私有属性#count，都会报错。Private field ‘#count’ 也表明了#count是私有属性，类似Java private 关键字修饰的私有属性。
注意，从 Chrome 111 开始，开发者工具里面可以读写私有属性，不会报错，原因是 Chrome 团队认为这样方便调试。
另外，不管在类的内部或外部，读取一个不存在的私有属性，也都会报错。这跟公开属性的行为完全不同，如果读取一个不存在的公开属性，不会报错，只会返回undefined。
class Increase {
#count = 0;
get value() {
console.log('Getting value:', this.#count);
return this.#count;
}
increment() {
this.#count++;
}
}
const inc = new Increase();
inc.#name
// SyntaxError: Private field '#name'
// must be declared in an enclosing class
上面示例中，#name是一个不存在的私有属性，不管在函数内部或外部，读取该属性都会导致报错。
注意，私有属性的属性名必须包括#，如果不带#，会被当作另一个属性。
class Test {
#x;
constructor(x = 1){
this.#x = x;
}
get x(){
return this.#x;
}
set x(value) {
this.#x += value;
}
}
上面代码中，#x就是私有属性，在Test类之外是读取不到这个属性的。由于井号#是属性名的一部分，使用时必须带有#一起使用，所以**#x和x是两个不同的属性**。
这种写法不仅可以写私有属性，还可以用来写私有方法。
class Xiaoxu {
#a;
#b;
constructor(a, b){
this.#a = a;
this.#b = b;
}
#sum(){
return this.#a + this.#b;
}
print(){
console.log(this.#sum());
}
}
let x = new Xiaoxu(3, 7);
x.print(); //10
// SyntaxError: Private field '#sum'
// must be declared in an enclosing class
x.#sum();
上面示例中，#sum()就是一个私有方法。
另外，私有属性也可以设置 getter 和 setter 方法。
class Counter {
#value = 0;
constructor() {
console.log(this.#x);
}
get #x(){return this.#value;}
set #x(value){
this.#value = value;
}
}
let c = new Counter() // 0
上面代码中，#x是一个私有属性，它的读写都通过get #x()和set #x()操作另一个私有属性#value来完成。
私有属性不限于从this引用，只要是在类的内部，实例也可以引用私有属性。
class Xiaoxu {
#privateValue = 99;
static getPrivateValue(x){
return x.#privateValue;
}
}
l(Xiaoxu.getPrivateValue(new Xiaoxu())) //99
上面代码允许从Xiaoxu类的实例上面引用私有属性。
私有属性和私有方法前面，也可以加上static关键字，表示这是一个静态的私有属性或私有方法。
class Xiaoxu {
static names = "xiaoxu";
static #number = 9;
static #Compute(){
return Xiaoxu.#number;
}
static fetch(){
return Xiaoxu.#Compute();
}
}
l(Xiaoxu.names) //xiaoxu
l(Xiaoxu.fetch()) //9
// SyntaxError: Private field '#number'
// must be declared in an enclosing class
Xiaoxu.#number
// SyntaxError: Private field '#Compute'
// must be declared in an enclosing class
Xiaoxu.#Compute()
上面代码中，#number是私有属性，#Compute()是私有方法，只能在Xiaoxu这个类的内部调用，外部调用就会报错。
– 总结：不论私有属性或私有方法，还是在私有属性或私有方法前增加static关键字，类的外部均不可使用该属性，或者调用该方法。
in 运算符
前面说过，直接访问某个类不存在的私有属性会报错，但是访问不存在的公开属性不会报错。这个特性可以用来判断，某个对象是否为类的实例。
class Xiaoxu {
#m;
static isXiaoxu (obj){
try {
obj.#m;
return true;
} catch {
return false;
}
}
}
l(Xiaoxu.isXiaoxu(new Xiaoxu())) //true
上面示例中，类Xiaoxu的静态方法isXiaoxu()就用来判断，某个对象是否为Xiaoxu的实例。它采用的方法就是，访问该对象的私有属性#m。如果不报错，就会返回true；如果报错，就说明该对象不是当前类的实例，从而catch部分返回false。
因此，try…catch结构可以用来判断某个私有属性是否存在。但是，这样的写法很麻烦，代码可读性很差，ES2022 改进了in运算符，使它也可以用来判断私有属性。
class Xiaoxu {
#m;
static isXiaoxu (obj){
//SyntaxError: Unexpected identifier
if(#m in obj){
// 说明私有属性#m存在
return true;
} else {
// 说明私有属性#m不存在
return false;
}
}
}
Xiaoxu.isXiaoxu(new Xiaoxu())
上述代码执行时却抛出了预期之外的错误，在node14.16.0版本下node命令执行该js文件会报错：SyntaxError: Unexpected identifier，低版本node不支持ES2022该语法，需要升级到较高的node版本。
注意：查看node版本如下：
node -v
实际版本：
v14.16.0
那么通过nvm安装node版本管理即可，参考如下node：nvm下载使用与node版本管理：
https://blog.csdn.net/a232884c/article/details/137613961
下载安装完成后，查看nvm安装node情况：
nvm list
结果：
No installations recognized.
这里选择安装18.2.0版本的node：
nvm install v18.2.0
安装nvm后记得重启已打开的vscode，即可使用如下nvm命令切换node版本：
nvm use 18.2.0
切换成高版本的Node后，重新执行如下代码成功：
class Xiaoxu {
#m;
static isXiaoxu (obj){
if(#m in obj){
// 说明私有属性#m存在
return true;
} else {
// 说明私有属性#m不存在
return false;
}
}
}
// 18.2.0Node执行私有属性#的in表达式： true
l("18.2.0Node执行私有属性#的in表达式：", Xiaoxu.isXiaoxu(new Xiaoxu()))
上面示例中，in运算符判断某个对象是否有私有属性#m。它不会报错，而是返回一个布尔值。
– 总结：可以通过 私有属性 in Object的方式判断该对象是否存在该私有属性。
这种用法的in，也可以跟this一起配合使用：
class A {
#c = 1;
mrk() {
console.log(#c in this);
}
}
new A().mrk(); //true
注意，判断私有属性时，in只能用在类的内部。另外，判断所针对的私有属性，一定要先声明，否则会报错。
class A {
mrk() {
console.log(#c in this);
}
}
// SyntaxError: Private field '#c'
// must be declared in an enclosing class
new A().mrk();
– 总结：in判断私有属性时，必须在类的内部使用，且该私有属性必须先声明，否则使用in判断对象是否具有该私有属性将会报错。
子类从父类继承的私有属性，也可以使用in运算符来判断。
class People {
#age = 0;
static test(obj) {
console.log(#age in obj);
}
}
class Xiaoxu extends People {};
People.test(new Xiaoxu()) // true
上面示例中，Xiaoxu从父类继承了私有属性#age，in运算符也有效。
– 总结：子类从父类继承的私有属性，也可以通过in判断子类具有该继承的私有属性。 而Java中，私有属性private仅属性所定义的当前类可以使用。
注意，in运算符对于Object.create()、Object.setPrototypeOf形成的继承，是无效的，因为这种继承不会传递私有属性。
class People {
#age = 0;
static test(obj) {
console.log(#age in obj);
}
}
const p = new People();
const o1 = Object.create(p);
console.log("first********************")
People.test(o1); // false
People.test(o1.__proto__); // true
l(o1.__proto__) // People {}
l(typeof o1.__proto__) // object
l(o1.__proto__ === People) //false
console.log("second********************")
const o2 = {};
Object.setPrototypeOf(o2, p);
People.test(o2) // false
People.test(o2.__proto__) // true
上面示例中，对于修改原型链形成的继承，子类都取不到父类的私有属性，所以in运算符无效。
– 总结：私有方法和私有属性在命名的前缀加上#号，不论是否有static关键字，外部类均不可使用私有属性或私有方法，私有属性可以通过私有属性 in Object来判断对象是否具有该私有属性，子类从父类继承的私有属性，也可以通过in判断子类具有该继承的私有属性。
（11）静态块
静态属性的一个问题是，如果它有初始化逻辑，这个逻辑要么写在类的外部，要么写在constructor()方法里面。
class C {
static x = 999;
static y;
static z;
}
function doLog(number) {
console.log(`日志打印编号：${number}`)
return {"apple":number};
}
const obj = null;
try {
// 日志打印编号：999
obj = doLog(C.x);
console.log("执行成功: ",obj)
C.y = obj.y;
C.z = obj.z;
} catch (e) {
// 报错啦: TypeError: Assignment to constant variable.
console.log("报错啦: ", e)
C.y = 10;
C.z = 12;
}
// Object is: null
console.log("Object is: ", obj)
上面示例中，静态属性y和z的值依赖于静态属性x的运算结果，这段初始化逻辑写在类的外部（上例的try…catch代码块）。另一种方法是写到类的constructor()方法里面。这两种方法都不是很理想，前者是将类的内部逻辑写到了外部，后者则是每次新建实例都会运行一次。
为了解决这个问题，ES2022 引入了静态块（static block），允许在类的内部设置一个代码块，在类生成时运行且只运行一次，主要作用是对静态属性进行初始化。以后，新建类的实例时，这个块就不运行了。
Java的静态块，也是类生成时仅运行一次，且后续再次新建类实例时不再运行，明显和JavaScript的区别在于，Javascript的静态块中支持使用this指代当前类，而Java中不能在静态块中使用this。
class C {
static x = 999;
static y;
static z;
static {
const obj = null;
try {
// 日志打印编号：999
obj = doLog(C.x);
console.log("执行成功: ",obj)
C.y = obj.y;
C.z = obj.z;
} catch (e) {
// 静态块报错啦: TypeError: Assignment to
// constant variable.
console.log("静态块报错啦: ", e)
C.y = 10;
C.z = 12;
}
// Object is: null
console.log("Object is: ", obj)
}
}
function doLog(number) {
console.log(`日志打印编号：${number}`)
return {"apple":number};
}
new C();
// 多次初始化实例对象，静态块只会执行一次
new C();
上面代码中，类的内部有一个 static 代码块，这就是静态块。它的好处是将静态属性y和z的初始化逻辑，写入了类的内部，而且只运行一次。
每个类允许有多个静态块，每个静态块中只能访问之前声明的静态属性。另外，静态块的内部不能有return语句。
静态块内部可以使用类名或this，指代当前类。
class C {
static x = 6;
static {
console.log(this.x); // 6
// 或者
console.log(C.x); // 6
}
}
上述类在通过node命令执行时，无需新建类C的实例对象，也会执行static静态块中的内容，且this.x和C.x都能获取静态属性x。
let getX;
class C {
#x = 1;
static {
getX = obj => obj.#x;
}
}
console.log(getX(new C())); // 1
上面示例中，#x是类的私有属性，如果类外部的getX()方法希望获取这个属性，以前是要写在类的constructor()方法里面，这样的话，每次新建实例都会定义一次getX()方法。现在可以写在静态块里面，这样的话，只在类生成时定义一次。
– 总结：类的静态块，在类生成时运行且只运行一次，主要作用是对静态属性进行初始化，以后新建类的实例也不会再次运行。静态块的内部不能有return语句，静态块内部可以使用类名或this，均指代当前类（包括this）。
（12）类的注意点
严格模式
类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。
不存在提升
类不存在变量提升（hoist），这一点与 ES5 完全不同。
// ReferenceError: Cannot access 'Xiaoxu' before initialization
new Xiaoxu();
class Xiaoxu {}
上面代码中，Xiaoxu类使用在前，定义在后，这样会报错，因为 ES6 不会把类的声明提升到代码头部。这种规定的原因与下文要提到的继承有关，必须保证子类在父类之后定义。
{
let People = class {};
class Xiaoxu extends People {
}
}
上面的代码不会报错，因为Xiaoxu继承People的时候，People已经有定义了。但是，如果存在class的提升，上面代码就会报错，因为class会被提升到代码头部，而定义People的那一行没有提升，导致Xiaoxu继承People的时候，People还没有定义。
name 属性
由于本质上，ES6 的类只是 ES5 的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性。
class Xiaoxu {}
l(Xiaoxu.name) // "Xiaoxu"
name属性总是返回紧跟在class关键字后面的类名。
Generator 方法
如果某个方法之前加上星号（*），就表示该方法是一个 Generator 函数。
class Xiaoxu {
constructor(...args) {
this.args = args;
}
* [Symbol.iterator]() {
for (let arg of this.args) {
yield arg;
}
}
}
for (let x of new Xiaoxu('hello', 'world')) {
console.log(x);
}
// hello
// world
上面代码中，Xiaoxu类的Symbol.iterator方法前有一个星号，表示该方法是一个Generator函数（生成器，python中也有生成器的概念，非常类似）。Symbol.iterator方法返回一个Xiaoxu类的默认遍历器，for…of循环会自动调用这个遍历器。
this 的指向
类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。
class Logger {
printName(name = 'here') {
this.print(`Hello ${name}`);
}
print(text) {
console.log(text);
}
}
const logger = new Logger();
const { printName } = logger;
// TypeError: Cannot read properties of undefined (reading 'print')
printName();
上面代码中，printName方法中的this，默认指向Logger类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境（由于 class 内部是严格模式，所以 this 实际指向的是undefined），从而导致找不到print方法而报错。
一个比较简单的解决方法是，在构造方法中绑定this，这样就不会找不到print方法了。
class Logger {
constructor() {
// bind 用于绑定this，同时bind方法返回结果的是绑定this后的方法
console.log(this)
console.log(typeof this)
this.printName = this.printName.bind(this);
}
printName(name = 'here') {
this.print(`Hello ${name}`);
}
print(text) {
console.log(text);
}
}
const logger = new Logger();
const { printName } = logger;
printName();
// Logger {}
// object
// Hello here
回顾下call、apply和bind方法的区别，参考：
https://blog.csdn.net/a232884c/article/details/137677444
bind返回的函数对象会修改this指向，同时，这里绑定this的方式，在React中使用类组件时，也可以通过该方式来为类组件中方法绑定this对象（因为类中的严格模式导致方法中this指向undefined）。
– 总结：类的内部采用严格模式，通过结构赋值获取的方法在外部调用时，this实际指向为undefined，需要在构造方法中绑定this，从而支持对类方法结构赋值后在外部进行使用。
另一种解决方法是使用箭头函数。
const {log:l} = console;
class Obj {
constructor() {
this.getThis = () => this;
}
}
const myObj = new Obj();
l(myObj.getThis() === myObj) // true
箭头函数的this指向的是上下文中的调用对象，以上述栗子来说，因为是myObj实例对象调用的getThis()方法，所以这里返回的this，就是调用者myObj实例对象，故而(myObj.getThis() === myObj)返回true。
因为箭头函数内部的this总是指向定义时所在的对象，上面代码中，箭头函数位于构造函数内部，它的定义生效的时候，是在构造函数执行的时候。这时箭头函数所在的运行环境，肯定是实例对象，所以this会总是指向实例对象。
class Obj {
constructor() {
this.getThis = () => this;
}
}
const myObj = new Obj();
l(myObj.getThis() === myObj) // true
class SonObj extends Obj {
}
const son = new SonObj();
l(son.getThis() === myObj) // false
l(son.getThis() === son) // true
还有一种解决方法是使用Proxy，获取方法的时候，自动绑定this。
function getProxy(target) {
const cache = new WeakMap();
const handler = {
get (target, key) {
// 利用js反射获取target对象对应key的对应值
const value = Reflect.get(target, key);
if(typeof value !== 'function') {
return value;
}
if(!cache.has(value)) {
cache.set(value, value.bind(target));
}
return cache.get(value);
}
};
const proxy = new Proxy(target, handler);
return proxy;
}
class OrginalClazz {
names = "xiaoxu";
goods = "香蕉";
wrap(number, names) {
console.log(`编号：${number}， 名称：${names}`)
this.print();
}
print() {
console.log(this.goods)
}
}
const org = new OrginalClazz();
org.wrap(1, "小徐");
// 编号：1， 名称：小徐
// 香蕉
// 因为没有绑定this，通过解构赋值拿到的wrap函数执行报错
// const {wrap} = org;
// wrap(3, "xu") //TypeError: Cannot read properties of undefined (reading 'print')
// 生成代理对象，代理对象的逻辑是自动为对象绑定对象本身this
const proxyOrg = getProxy(org)
proxyOrg.wrap(2, "小李")
// 编号：2， 名称：小李
// 香蕉
// 代理对象自动通过bind绑定自身this，所以解构赋值获取代理对象的函数，this是对象本身，并非undefined
const {wrap} = proxyOrg;
wrap(4, "li")
// 编号：4， 名称：li
// 香蕉
另外，上述针对代理对象解构赋值的函数this是绑定了的，但是原对象org是没有代理过的，再次执行解构赋值函数调用，依然会报错：
// 代理对象自动通过bind绑定自身this，所以解构赋值获取代理对象的函数，this是对象本身，并非undefined
const {wrap} = proxyOrg;
wrap(4, "li")
// 编号：4， 名称：li
// 香蕉
// 仅代理对象的函数是绑定了this了，即便再次使用原对象的解构赋值的函数调用，依然报错！
const {wrap: w} = org;
// TypeError: Cannot read properties of undefined (reading 'print')
w(5, "xuli")
– 总结：类的内部使用默认严格模式，方法中的this未绑定时指向undefined。this的绑定方式支持3种：一、类构造方法中通过bind(this)方法为方法绑定this；二、箭头函数；三、Proxy代理为类方法绑定this，本质使用bind(this)来代理方法。
（13）new.target 属性
new是从构造函数生成实例对象的命令。ES6 为new命令引入了一个new.target属性，该属性一般用在构造函数之中，返回new命令作用于的那个构造函数。如果构造函数不是通过new命令或Reflect.construct()调用的，new.target会返回undefined，因此这个属性可以用来确定构造函数是怎么调用的。
function Person(name) {
if (new.target !== undefined) {
this.name = name;
} else {
throw new Error('必须使用 new 命令生成实例');
}
}
// 另一种写法
function Person(name) {
if (new.target === Person) {
console.log("new Target：", new.target)
this.name = name;
} else {
throw new Error('必须使用 new 命令生成实例!!');
}
}
// new Target： [Function: Person]
var person = new Person('小徐'); // 正确
// new Target： [Function: Person]
let p = Reflect.construct(Person.prototype.constructor, [])
l("类型：", typeof p) // 类型： object
l("类型：", p.__proto__ === Person.prototype) // 类型： true
// Error: 必须使用 new 命令生成实例!!
var notAPerson = Person.call(person, '小徐'); // 报错
Class 内部调用new.target，返回当前 Class。
class Rectangle {
constructor(length, width) {
console.log(new.target === Rectangle);
this.length = length;
this.width = width;
}
}
var obj = new Rectangle(3, 4); // 输出 true
需要注意的是，子类继承父类时，new.target会返回子类。
class Rectangle {
constructor(length, width) {
console.log(new.target === Rectangle);
console.log(new.target === Square);
// ...
}
}
class Square extends Rectangle {
constructor(length, width) {
super(length, width);
}
}
var obj = new Square(3);
// false
// true
上面代码中，new.target会返回子类。
利用这个特点，可以写出不能独立使用、必须继承后才能使用的类。
class Shape {
constructor() {
if (new.target === Shape) {
throw new Error('本类不能实例化');
}
}
}
class Rectangle extends Shape {
constructor(length, width) {
super();
// ...
}
}
var x = new Shape(); // 报错 Error: 本类不能实例化
var y = new Rectangle(3, 4); // 正确
上面代码中，Shape类不能被实例化，只能用于继承。
注意，在函数外部，使用new.target会报错。
– 总结：ES6新增了new.target属性，该属性一般在构造函数中使用，若构造函数不是通过new命令或Reflect.construct()调用的，则new.target会返回undefined，可使用该属性来确定构造函数是如何调用的。
扫一扫
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
