MIxin原理的实现

逃离我推掉我的手 2022-12-15 14:05 229阅读 0赞

Mixin 指的是多个对象合成一个新的对象，新对象具有各个组成成员的接口。它的最简单实现如下

const a = {
      a: 'a'
    };
    const b = {
      b: 'b'
    };
    const c = {...a, ...b}; // {a: 'a', b: 'b'}

下面是一个更完备的实现，将多个类的接口“混入”（mix in）另一个类。

function mix(...mixins) {
      class Mix {
        constructor() {
          for (let mixin of mixins) {
            copyProperties(this, new mixin()); // 拷贝实例属性
          }
        }
      }
    
      for (let mixin of mixins) {
        copyProperties(Mix, mixin); // 拷贝静态属性
        copyProperties(Mix.prototype, mixin.prototype); // 拷贝原型属性
      }
    
      return Mix;
    }
    
    function copyProperties(target, source) {
      for (let key of Reflect.ownKeys(source)) {
        if ( key !== 'constructor'
          && key !== 'prototype'
          && key !== 'name'
        ) {
          let desc = Object.getOwnPropertyDescriptor(source, key);
          Object.defineProperty(target, key, desc);
        }
      }
    }

上面代码的`mix`函数，可以将多个对象合成为一个类。使用的时候，只要继承这个类即可。

class DistributedEdit extends mix(Loggable, Serializable) {
      // ...
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue的mixins的使用

ixins就是混入。一个混入对象可以包含任意组件选项。同一个生命周期，混入对象会比组件的先执行。一个混入自身以一个对象的形式存在，如`var mixin...

淡淡的烟草味﹌/ 2024年04月17日 15:50/ 0 赞/ 92 阅读

相关 16-mixin

mixin 一、mixin 混入/混合 mixin 可以把多个组件公用的配置提取成一个混入对象。示例：定义一个混合 mixin.js export c

我不是女神ヾ/ 2023年10月08日 18:07/ 0 赞/ 30 阅读

相关 React Mixin 的使用

> update: Mixin 只适用于 ES5。如果你的项目里面用的是 ES6 ，可以采用[高阶组件][Link 1]点击预览来实现 Mixin 的功能。我使用 `Rea

逃离我推掉我的手/ 2023年07月03日 14:30/ 0 赞/ 18 阅读

相关 Vue--原理--mixin

原文网址：[Vue--原理--mixin\_IT利刃出鞘的博客-CSDN博客][Vue--_--mixin_IT_-CSDN] 其他网址 > [Vue-源码详解mixi

痛定思痛。/ 2022年12月27日 02:28/ 0 赞/ 182 阅读

相关 MIxin原理的实现

Mixin 指的是多个对象合成一个新的对象，新对象具有各个组成成员的接口。它的最简单实现如下 const a = { a: 'a' };

逃离我推掉我的手/ 2022年12月15日 14:05/ 0 赞/ 230 阅读

相关 mixin

mixin文件里的index.js导出 export default{ mounted() {

ゝ一纸荒年。/ 2022年12月13日 11:18/ 0 赞/ 156 阅读

相关 dart mixins_Dart中的Mixins简介

dart mixins Some of the best reasons for using object-oriented programming (OOP) are it

素颜马尾好姑娘i/ 2022年11月27日 04:26/ 0 赞/ 201 阅读

相关 SASS Mixin实现响应式布局

前端开发whqet,csdn,王海庆,whqet,前端开发专家好的，今天我们来研读下css大牛[Chris Coyier][]的利用SASS实现响应式布局的解决方案(Sim

喜欢ヅ旅行/ 2022年08月26日 08:02/ 0 赞/ 254 阅读

相关 Sass mixin

为了有效的维护和开发项目，代码的重复利用就显得尤为重要。在Sass中，除了`@import`和`@extend`可以使你的代码更加具有重复利用性，`@mixin`指令也同样能提

﹏ヽ暗。殇╰゛Y/ 2022年06月17日 05:53/ 0 赞/ 208 阅读

相关在小程序中实现 Mixins 方案

摘要：小程序开发技巧作者：[jrainlau][] 原文：[在小程序中实现 Mixins 方案][Mixins] [Fundebug][]经授权转载，版权归

女爷i/ 2021年12月21日 05:29/ 0 赞/ 181 阅读