ES2015 中的函数式Mixin
原文链接:http://raganwald.com/2015/06/17/functional-mixins.html
在“原型即对象”中,我们看到可以对原型使用 Object.assign 来模拟 mixin,原型是 JavaScript 中类概念的基石。现在我们将回顾这个概念,并进一步探究如何将功能糅合进类。
首先,简单回顾一下:在 JavaScript 中,类是通过一个构造函数和它的原型来定义的,无论你是用 ES5 语法,还是使用 class 关键字。类的实例是通过 new 调用构造器的方式创建的。实例从构造器的 prototype 属性上继承共享的方法。
对象 mixin 模式
class Todo {constructor (name) {this.name = name || 'Untitled';this.done = false;}do () {this.done = true;return this;}undo () {this.done = false;return this;} }
const Coloured = {setColourRGB ({r, g, b}) {this.colourCode = {r, g, b};return this;},getColourRGB () {return this.colourCode;} };
Object.assign(Todo.prototype, Coloured);new Todo('test').setColourRGB({r: 1, g: 2, b: 3})//=> {"name":"test","done":false,"colourCode":{"r":1,"g":2,"b":3}}
const colourCode = Symbol("colourCode");const Coloured = {setColourRGB ({r, g, b}) {this[colourCode]= {r, g, b};return this;},getColourRGB () {return this[colourCode];} };
函数式 mixin
const Coloured = (target) =>Object.assign(target, {setColourRGB ({r, g, b}) {this.colourCode = {r, g, b};return this;},getColourRGB () {return this.colourCode;}});Coloured(Todo.prototype);
const FunctionalMixin = (behaviour) =>target => Object.assign(target, behaviour);
const Coloured = FunctionalMixin({setColourRGB ({r, g, b}) {this.colourCode = {r, g, b};return this;},getColourRGB () {return this.colourCode;} });
可枚举性
Coloured(Todo.prototype)const urgent = new Todo("finish blog post"); urgent.setColourRGB({r: 256, g: 0, b: 0});for (let property in urgent) console.log(property);// => namedonecolourCodesetColourRGBgetColourRGB
const FunctionalMixin = (behaviour) =>function (target) {for (let property of Reflect.ownKeys(behaviour))Object.defineProperty(target, property, { value: behaviour[property] })return target;}
mixin 的职责
class Todo {constructor (name) {this.name = name || Todo.DEFAULT_NAME;this.done = false;}do () {this.done = true;return this;}undo () {this.done = false;return this;} }Todo.DEFAULT_NAME = 'Untitled';// If we are sticklers for read-only constants, we could write: // Object.defineProperty(Todo, 'DEFAULT_NAME', {value: 'Untitled'});
const shared = Symbol("shared");function FunctionalMixin (behaviour) {const instanceKeys = Reflect.ownKeys(behaviour).filter(key => key !== shared);const sharedBehaviour = behaviour[shared] || {};const sharedKeys = Reflect.ownKeys(sharedBehaviour);function mixin (target) {for (let property of instanceKeys)Object.defineProperty(target, property, { value: behaviour[property] });return target;}for (let property of sharedKeys)Object.defineProperty(mixin, property, {value: sharedBehaviour[property],enumerable: sharedBehaviour.propertyIsEnumerable(property)});return mixin; }FunctionalMixin.shared = shared;
const Coloured = FunctionalMixin({setColourRGB ({r, g, b}) {this.colourCode = {r, g, b};return this;},getColourRGB () {return this.colourCode;},[FunctionalMixin.shared]: {RED: { r: 255, g: 0, b: 0 },GREEN: { r: 0, g: 255, b: 0 },BLUE: { r: 0, g: 0, b: 255 },} });Coloured(Todo.prototype)const urgent = new Todo("finish blog post"); urgent.setColourRGB(Coloured.RED);urgent.getColourRGB()//=> {"r":255,"g":0,"b":0}
mixin 本身的方法
urgent instanceof Todo//=> true urgent instanceof Coloured//=> false
Object.defineProperty(Coloured, Symbol.hasInstance, {value: (instance) => true}); urgent instanceof Coloured//=> true {} instanceof Coloured//=> true
const shared = Symbol("shared");function FunctionalMixin (behaviour) {const instanceKeys = Reflect.ownKeys(behaviour).filter(key => key !== shared);const sharedBehaviour = behaviour[shared] || {};const sharedKeys = Reflect.ownKeys(sharedBehaviour);const typeTag = Symbol("isA");function mixin (target) {for (let property of instanceKeys)Object.defineProperty(target, property, { value: behaviour[property] });target[typeTag] = true;return target;}for (let property of sharedKeys)Object.defineProperty(mixin, property, {value: sharedBehaviour[property],enumerable: sharedBehaviour.propertyIsEnumerable(property)});Object.defineProperty(mixin, Symbol.hasInstance, {value: (instance) => !!instance[typeTag]});return mixin; }FunctionalMixin.shared = shared;urgent instanceof Coloured//=> true {} instanceof Coloured//=> false
总结
转载于:https://www.cnblogs.com/averyby/p/10026365.html
ES2015 中的函数式Mixin相关推荐
- javascript函数式_JavaScript中的函数式编程—结合实际示例(第1部分)
javascript函数式 by rajaraodv 通过rajaraodv JavaScript中的函数式编程-结合实际示例(第1部分) (Functional Programming In Jav ...
- less 函数_Python中的函数式编程教程,学会用一行代码搞定所有内容
前言 在本文中,您将了解什么是函数范型,以及如何在Python中使用函数式编程.在Python中,函数式编程中的map和filter可以做与列表相同的事情.这打破了Python的禅宗规则之一,因此函数 ...
- 六、Go编程语言中的函数式编程
@Author:Runsen 任何编程语言都是众所周知的面向对象编程,还有日渐流行的函数式编程,当然Go也不例外,这也是本文的重点..我可以这么说,Go的功力深不深完全就是看函数式编程和面向对象编程. ...
- DMN中的函数式编程:感觉就像再次重读我的大学课程一样
在本文中,我想分享有关DMN中的递归支持的有趣见解,并重点介绍FEEL语言的特定属性如何使功能编程结构能够在DMN中建模. 我们将从一个基本的示例开始,以演示FEEL语言和DMN构造的"商业 ...
- javascript函数式_JavaScript中的函数式编程—结合实际示例(第2部分)
javascript函数式 by rajaraodv 通过rajaraodv JavaScript中的函数式编程-结合实际示例(第2部分) (Functional Programming In Jav ...
- C#中面向对象编程中的函数式编程
目录 介绍 面向对象编程中仿真的函数式编程技术 粒度不匹配 面向对象的函数式编程构造 相互关系函数式编程/面向对象程序设计 C#中的函数式编程集成 函数级别的代码抽象 操作组合 函数部分应用和局部套用 ...
- wpf绑定 dictionary 给定关键字不再字典中_为什么要在 JavaScript 中学习函数式编程?...
请忘掉你认为你知道的有关 JavaScript 的任何东西,以初学者心态来接触这份资料. 为帮助你这样做,我们打算从头开始复习 JavaScript 的基础知识, 就好像你以前从来没有看到过 Java ...
- 在 Python 中使用函数式编程的最佳实践!
在函数式编程中,如何使用 Python 编写出优秀的代码? 作者 | Amandine Lee 译者 | 弯月 责编 | 屠敏 出品 | CSDN(ID:CSDNNews) 简介 Python 是一种 ...
- python支持函数式编程吗_利用Fn.py库在Python中进行函数式编程
尽管Python事实上并不是一门纯函数式编程语言,但它本身是一门多范型语言,并给了你足够的自由利用函数式编程的便利.函数式风格有着各种理论与实际上的好处(你可以在Python的文档中找到这个列表): ...
最新文章
- 组合求解器 + 深度学习 =?这篇ICLR 2020论文告诉你答案
- C#使用Xamarin开发可移植移动应用(1.入门与Xamarin.Forms页面),附源码
- EF架构~LinqToEntity里实现left join的一对一与一对多
- python浅拷贝_Python中的浅拷贝和深拷贝
- ltp makefile 解析
- 软件工程概论个人总结
- linux同时挂载多个iso,Linux 挂载iso,并设置为源
- 属性子集选择的基本启发方法_2017.06.29数据挖掘基础概念第二.三章
- Java中swing使用ImageIcon类添加图片
- leapftp,小编悄悄告诉你leapftp是什么
- 详细了解一下股票量化交易接口股
- 现代 opengl 的驱动安装
- 变色龙(Floyd算法)
- Django中models模型(操作数据库)
- Input Leakage Current
- pdf转图片png的python函数变更
- Dev-C++常用快捷键
- 关于视频转码后只有声音没有画面的问题
- CentOS7设置共享目录
- TP5后端,VUE前端请求京东万象菜谱大全
热门文章
- LFS、BLFS、ALFS、HLFS的区别详解
- python就业班 miniweb框架_mini-web框架
- c语言volatile关键字的作用是什么?
- python+robotframework_python+robot framework接口自动化测试
- 判断单链表中的元素是否递增_检测单链表中是否有环(C语言)
- java按钮改变窗口大小_布局似乎有问题,JButton在调整窗口大小时显示出意外的行为。...
- 模拟视频光端机与数字光端机究竟有何区别
- 【渝粤教育】国家开放大学2018年春季 3896T人文英语1 参考试题
- 【渝粤教育】电大中专学前儿童科学教育1作业 题库
- 【渝粤教育】电大中专职业应用写作_1作业 题库