首页 > 编程语言 >JavaScript 的 Mixin 问题

JavaScript 的 Mixin 问题

时间:2024-04-19 16:26:39浏览次数:25  
标签:JavaScript Mixin2 Mixin1 问题 Mixin foo super class

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,Mixin2,Mixin1,问题,Mixin,foo,super,class
From: https://www.cnblogs.com/inshua/p/18146221

相关文章

  • WebFlux 中form data获取不到参数问题
    官网并不提供formdata以下方式获取@RequestMapping(path="/post",method=RequestMethod.POST,produces=MediaType.APPLICATION_JSON_VALUE)publicMono<Map<String,Object>>post(ServerWebExchangeexchange,@RequestBody(required=false)Str......
  • JavaScript技术
    JavaScript技术一、JavaScript的定义JavaScript是一种【基于对象】和【事件驱动】的【脚本语言】,在客户端执行,客户端主要实现数据的验证和页面的特效,大幅度提高网页的速度和交互的能力,在互联网中得到了广泛的运用。基于对象:js是基于面向对象的。事件驱动:使用的时候是结合......
  • L2-023 图着色问题
    原题链接题解说用k种颜色,没说用少于k种code#include<bits/stdc++.h>usingnamespacestd;vector<int>G[505];intvis[505]={0};intcolor[505]={0};intv,e,k,n;intsolve(){for(inti=1;i<=v;i++){for(autonext:G[i]){......
  • redis常见的应用问题以及解决方案
    缓存穿透问题描述:key对应的数据在数据源并不存在,每次针对此key的请求从缓存获取不到,请求都会压到数据源(数据库),从而可能压垮数据源。用一个不存在的用户id获取用户信息,不论缓存还是数据库都没有,若黑客利用此漏洞进行攻击可能压垮数据库。缓存穿透的条件:1.应用服务器压力变大2......
  • 记录在JavaScript中对事件循环的理解
    JavaScript事件循环通俗解释好的,用更通俗的话来说,事件循环就像是在一个大剧院里,有一个演员(JavaScript引擎)和两个重要的角色:一个是前台的表演者(调用栈),另一个是后台的候场区(事件队列)。前台表演者:这个演员在前台表演,一次只能表演一个节目(单线程执行)。当一个节目(函数)开始时,演员就上......
  • 记一次hadoop yarn环境无法提交任务的问题排查
    1.集群环境ambari-version:2.7.5HDP-version:3.02.问题描述hadoop-yarn的启动之后,运行一段时间,莫名其妙的出现新的任务无法提交上去,查看yarn的状态之后,发现yarn的状态都是正常的,并且所有的资源都是充足的,但是提交任务之后就会一直处于accept状态3.问题表现4.问题排查4.......
  • 前端如何使用Javascript实现一个简单的发布订阅模式
    在前端开发中,我们经常需要处理事件的订阅与发布,以实现组件之间的解耦和通信。本文将介绍如何使用JavaScript实现一个简单的发布订阅模式,通过分步写代码的方式,带领读者一步步完成实现过程。步骤一:定义EventEmitter类首先,我们需要定义一个名为EventEmitter的类,作为发布订阅......
  • obsidian和typora图片兼容问题
    1.打开obsidian的第三方插件-->插件市场找到CustomAttachmentLocation下载(当然这个也是需要一点魔法的)2.配置obsidian的文件与链接3.配置obsidian的CustomAttachmentLocation插件4.typora的文件路径配置一样即可最后对比,两个程序之间可以相互查看文件了......
  • 分页select的问题
    这是后端返回给前端的数据 这是数据要是前端接收后展示效果如下: 这并不是我想要的效果有两种解决方式: 第一种方式单一的解决某个类中的create_time和update_time,一般不采用此方式一般在配置类中重写方法,去扩展SpringMVC消息转换器,重写父类方法如下: 下面是账号的启......
  • java 编译问题
    背景我在maven中配置了私有仓库地址后,发现一些包还是会从外网拉,耗时很长。mirror配置为:<mirrors><id>mynexus</id><name>mynexusname</name><mirrorOf>central</mirrorOf><url>http://mynexus.aaa.com/nexus/repositry/test/</url><......