JavaScript 从 ES6 开始支持 class 了, 如何在现在的 class 上实现 mixin 呢? 很多人推荐这种搞法

Object.assign(MyClass.prototype, MyMixin);

这个做法很丑, 不能令人满意。

我找到了一个更有趣的做法,和 dart 比较接近:

"Real" Mixins with JavaScript Classes

他最终的做法是这样的:

class MyClass extends mix(MyBaseClass).with(Mixin1, Mixin2) {
/* ... */
}

Mixin1 Mixin2 的定义是

let Mixin1 = (superclass) => class extends superclass {
foo() {
console.log('foo from Mixin1');
if (super.foo) super.foo();
}
}; let Mixin2 = (superclass) => class extends superclass {
foo() {
console.log('foo from Mixin2');
if (super.foo) super.foo();
}
}; class S {
foo() {
console.log('foo from S');
}
} class C extends Mixin1(Mixin2(S)) {
foo() {
console.log('foo from C');
super.foo();
}
} new C().foo();

要点是 class 在 js 里性质和 function 相似, 都具有闭包性, 因此可以通过函数构造出来.

说到这个前两天根据我们需要什么样的 ORM 框架 - Inshua - 博客园的思考, 正好试验了这个特征:

function nvarchar(n){
return class{
constructor(){
this.size = n;
}
}
}
var t = nvarchar(200);
var c = new t();

看起来效果还可以, 但是 JavaScript 变量不支持类型, 所以目前还无法发挥它的实力.

Flow 和 TypeScript 能给 JavaScript 添加类型, 但都没有很好的往这个方向走. Dart 就不用考虑了, class 不能定义在 function 里, 也不能作为值使用. 可能裁剪的 TypeScript 是比较适当的选择, 但是我不想使用这种生成 js 的套盒语言.

JavaScript 的 Mixin 问题的更多相关文章

  1. javascript模式——Mixin

    Mixin是一种扩展收集功能的方式,能提高代码的复用率. 在javascript中,原型可以继承于其它对象的原型,并且可以为任意数量的实例定义属性.可以利用这一点来促进函数的复用. 下面一段代码就是将 ...

  2. 【javascript】javascript设计模式mixin模式

    概述: Mixin是JavaScript中用的最普遍的模式,几乎所有流行类库都会有Mixin的实现.任意一个对象的全部或部分属性拷贝到另一个对象上. 一 .混合对象 二 .混合类

  3. Erlang入门(一)

    读erlang.org上面的Erlang Course四天教程1.数字类型,需要注意两点1)B#Val表示以B进制存储的数字Val,比如 7> 2#101.5 二进制存储的101就是10进制的5 ...

  4. vue.js过度&动画、混入&插件

    1.vue  过度动画 1.过度 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件. 语法格式: < ...

  5. 从mixin到new和prototype:Javascript原型机制详解

    从mixin到new和prototype:Javascript原型机制详解   这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...

  6. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  7. JavaScript面向对象之我见

    序言 在JavaScript的大世界里讨论面向对象,都要提到两点:1.JavaScript是一门基于原型的面向对象语言 2.模拟类语言的面向对象方式.对于为什么要模拟类语言的面向对象,我个人认为:某些 ...

  8. ES6新特性:使用新方法定义javascript的Class

    ES6中定义类的方式, 就是ES3和ES5中定义类的语法糖,虽然也有些区别,但是整体定义类的方式更加简洁,类的继承更加方便, 如果想对ES6中的继承更加熟悉, 最好了解ES5中原型继承的方式, 博客园 ...

  9. javascript中的对象,原型,原型链和面向对象

    一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...

  10. JavaScript的面向对象编程(OOP)(三)——聚合

    之前写过了类和原型,这里再说聚合,在写关于聚合之前,对与继承我再总结一下.JavaScript中关于继承的方式一共有三种,之前写了两种,但是没有说明,这里补充说明一下. 1.类式继承:通过在函数对象内 ...

随机推荐

  1. `operator++(int)` 和 `operator++()`

    operator++(int) 和 operator++() 是 C++ 中重载的两个不同的自增运算符函数,它们分别用于后置自增和前置自增.它们的区别在于调用方式以及自增行为的不同. 1. 前置自增运 ...

  2. 1.1 HELLO 窗口

    跟着教程,开始第一步创建窗口吧!这一节不涉及太多知识. 本节会出现一些名词,我们现在只需要知道它们大概是干什么的就行. ● GLFW:一个专门针对OpenGL的C语言库,通过它提供的接口,我们就可以渲 ...

  3. 2021年6月国产数据库排行榜:OceanBase、PolarDB会师TiDB、openGauss,入局开源阵营,逐鹿生态建设

    "首夏犹清和,芳草亦未歇",时至六月,百花齐放.百家争鸣的国产数据库市场依旧延续着如骄阳般火热的态势.不过从最新一期的 国产数据库流行度排行榜 Top 10 中不难发现,一个词足以 ...

  4. 墨天轮国产数据库沙龙 | 许力:阿里云原生Lindorm TSDB数据库,驱动工业IT&OT超融合数字化系统升级

    分享嘉宾:许力 阿里云Lindorm 数据库产品经理 整理:墨天轮 导读 大家好,我是阿里云Lindorm 数据库产品经理许力,今天非常有荣幸给大家介绍阿里云 Lindorm 数据库面向工业场景的最佳 ...

  5. Android复习(六)核心组件—>Activity 任何和返回栈、进程和应用生命周期、Parcelable和Bundle

    了解任务和返回堆栈 任务是用户在执行某项工作时与之互动的一系列 Activity 的集合.这些 Activity 按照每个 Activity 打开的顺序排列在一个返回堆栈中.例如,电子邮件应用可能有一 ...

  6. CNI 基准测试:Cilium 网络性能分析

    原文链接:https://cilium.io/blog/2021/05/11/cni-benchmark 作者:Thomas Graf 译者:罗煜.张亮,均来自KubeSphere 团队 Thomas ...

  7. KubeSphere 社区双周报 | FluentBit 新增 tcp 输入插件 | 2023.09.29-10.12

    KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...

  8. 云原生爱好者周刊:野心很大的云原生数据库 SurrealDB

    开源项目推荐 SurrealDB SurrealDB 是一个开源的端到端云原生数据库,同时支持 Table.Document 和 Graph 等多种数据模型,对外提供 SurrealQL.GraphQ ...

  9. php运行redis测试

    在今天将官方的redis教程看完之后,想自己来一个测试. 按照官方给出的代码: 1 <?php 2 //连接本地的 Redis 服务 3 $redis = new Redis(); 4 $red ...

  10. SpringBoot数据访问,配置数据源

    配置文件目录 配置数据源jdbc版本 JDBC(.tomcat.jdbc.pool.DataSource作为数据源) <?xml version="1.0" encoding ...