ES6中的类

1、Class

类是一种可选(而不是必须)的设计模式,而且在 JavaScript 这样的 [[Prototype]] 语言中实现类是很别扭的。大致解决了以下问题:

  1. 不再引用杂乱的 .prototype 了
  2. Button 声 明 时 直 接" 继 承 " 了 Widget, 不 再 需 要 通 过 Object.create(...) 来 替换 .prototype 对象,也不需要设置 .proto 或者 Object.setPrototypeOf(...)。
  3. 可以通过 super(...) 来实现相对多态,这样任何方法都可以引用原型链上层的同名方法。这可以解决第 4 章提到过的那个问题:构造函数不属于类,所以无法互相引用------super() 可以完美解决构造函数的问题。
  4. class 字面语法不能声明属性(只能声明方法)。看起来这是一种限制,但是它会排除掉许多不好的情况,如果没有这种限制的话,原型链末端的"实例"可能会意外地获取其他地方的属性(这些属性隐式被所有"实例"所"共享")。所以,class 语法实际上可以帮助你避免犯错。
  5. 可以通过 extends 很自然地扩展对象(子)类型,甚至是内置的对象(子)类型,比如Array 或 RegExp。没有 class ...extends 语法时,想实现这一点是非常困难的,基本上只有框架的作者才能搞清楚这一点。但是现在可以轻而易举地做到!

2、Class陷阱

class 语法并没有解决所有的问题,在 JavaScript 中使用"类"设计模式仍然存在许多深层问题。

你可能会认为 ES6 的 class 语法是向 JavaScript 中引入了一种新的"类"机制,其实不是这样。class 基本上只是现有 [[Prototype]](委托!)机制的一种语法糖。

也就是说,class 并不会像传统面向类的语言一样在声明时静态复制所有行为。如果你(有意或无意)修改或者替换了父"类"中的一个方法,那子"类"和所有实例都会受到影响,因为它们在定义时并没有进行复制,只是使用基于 [[Prototype]] 的实时委托。

js 复制代码
class C {
	constructor() {
		this.num = Math.random();
	}
    rand() {
        console.log( "Random: " + this.num );
    }
}
var c1 = new C();
c1.rand(); // "Random: 0.4324299..."
C.prototype.rand = function() {
	console.log( "Random: " + Math.round( this.num * 1000 ));
};
var c2 = new C();
c2.rand(); // "Random: 867"
c1.rand(); // "Random: 432" ------噢!

但是他依然存在一些问题:

  1. class 语法无法定义类成员属性(只能定义方法),如果为了跟踪实例之间共享状态必须要这么做,那你只能使用 .prototype 语法,但是这种方法最大的问题是,它违背了class语法的本意,在实现中暴露(泄露了.prototype
  2. class 语法仍然面临意外屏蔽的问题
  3. super 并不是动态绑定的,它会在声明时"静态"绑定。所以super可能不会绑定到合适的对象,需要使用toMethod(...)来手动绑定super(类似于bind(...))
js 复制代码
// 意外屏蔽问题
class C {
    constructor(id) {
        // 噢,郁闷,我们的 id 属性屏蔽了 id() 方法
        this.id = id;
    }
    id() {
    	console.log( "Id: " + id );
    }
}
var c1 = new C( "c1" );
c1.id(); // TypeError -- c1.id 现在是字符串 "c1"
js 复制代码
// 动态绑定问题
class P {
	foo() { console.log( "P.foo" ); }
}
class C extends P {
	foo() {
		super();
	}
}
var c1 = new C();
c1.foo(); // "P.foo"
var D = {
	foo: function() { console.log( "D.foo" ); }
};
var E = {
	foo: C.prototype.foo
};
// 把 E 委托到 D
Object.setPrototypeOf( E, D );
E.foo(); // "P.foo"

3、静态大于动态吗

通过上面的这些特性可以看出,ES6 的 class 最大的问题在于,(像传统的类一样)它的语法有时会让你认为,定义了一个 class 后,它就变成了一个(未来会被实例化的)东西的静态定义。你会彻底忽略 C 是一个对象,是一个具体的可以直接交互的东西。但是 JavaScript 最强大的特性之一就是它的动态性,任何对象的定义都可以修改(除非你把它设置成不可变)

4、总结

class 很好地伪装成 JavaScript 中类和继承设计模式的解决方案,但是它实际上起到了反作用:它隐藏了许多问题并且带来了更多更细小但是危险的问题。

class 加深了过去 20 年中对于 JavaScript 中"类"的误解,在某些方面,它产生的问题比解决的多,而且让本来优雅简洁的 [[Prototype]] 机制变得非常别扭。

相关推荐
开心工作室_kaic3 分钟前
ssm102“魅力”繁峙宣传网站的设计与实现+vue(论文+源码)_kaic
前端·javascript·vue.js
放逐者-保持本心,方可放逐3 分钟前
vue3 中那些常用 靠copy 的内置函数
前端·javascript·vue.js·前端框架
IT古董4 分钟前
【前端】vue 如何完全销毁一个组件
前端·javascript·vue.js
Henry_Wu0016 分钟前
从swagger直接转 vue的api
前端·javascript·vue.js
奋飞安全7 分钟前
初试js反混淆
开发语言·javascript·ecmascript
SameX15 分钟前
初识 HarmonyOS Next 的分布式管理:设备发现与认证
前端·harmonyos
M_emory_42 分钟前
解决 git clone 出现:Failed to connect to 127.0.0.1 port 1080: Connection refused 错误
前端·vue.js·git
Ciito1 小时前
vue项目使用eslint+prettier管理项目格式化
前端·javascript·vue.js
成都被卷死的程序员1 小时前
响应式网页设计--html
前端·html
mon_star°2 小时前
将答题成绩排行榜数据通过前端生成excel的方式实现导出下载功能
前端·excel