[Javascript] Functor Basic Intro
Well, this stuff will be a little bit strange if you deal with it first time.
Container Object:
- Just a wrapper / contianer for values
- No Method
- No Nouns
- var _Container = function(val){
- this.val = val;
- }
- var Container = function(x){
- return new _Container(x);
- }
- console.log(Container()) // _Container( {val: 3})
Every time we use Container, it will just add the value to the Container object and assign value to prop val.
map function on Container:
This map is not the map what you think it is....
The map you think is the method on the Array.
Here the map is the one get into the Container, grep the value, then apply function on this value. The return value is still Container.
- _Container.prototype.map = function(f){
- return Container(f(this.val))
- }
- var res = Container("flamethrower").map(function(s){ return _.capitalize(s) })
- console.log(res) //_Container( {val: "Flamethrower"} )
So in the example, map function goes into the Container, get the value "flamethrower", and apply the function '_.capitialize' to the value and return the new value to the Container.
Or you can write like this:
- var capitalize = _.capitalize;
- var res = Container("flamethrower").map(capitalize);
More examples:
- Container([,,]).map(reverse).map(first)
- //=> Container(3)
- Container("flamethrower").map(length).map(add())
- //=> Container(13)
So "Container"... what you feel about it? It is nothing... you don't need to care about it. Just every time you call map on it, the return value will still inside the Container, so that you can chain map on it.
Curry map:
Define a global map function, which use Ramda curry method:
- var map = R.curry(function(f, obj) {
- return obj.map(f)
- })
Later we will pass Container as obj, and on our Container, we already defined map function, so we can use here as 'obj.map'.
So, again, here 'obj.map' --> Means, goes into the obj, grep the value and apply function f.
So now what we can do:
- Container().map(add()) // Container(4)
- map(add(), Container()) // Container(4), or map(add(1))(Container(3)), since map is curry method
More exmaples:
- map(R.compose(R.head, R.reverse), Container("dog"))
- //=> Container(“g”)
So all what we have seen so far, we give a name call "Functor".
Functor
“An object or data structure you can map over”
function: map
- // Exercise 1
- // ==========
- // Use _.add(x,y) and map(f,x) to make a function that increments a value inside a functor
- console.log("--------Start exercise 1--------")
- //map(): Go inside the object and run the function on the value of the object
- //map(): Here map is curry function, so take the function as first arguement and object as second arguement.
- //map(_.add(1), Identity(2)) --> Identity(3)
- var ex1 = map(_.add());
- assertDeepEqual(Identity(), ex1(Identity()))
- console.log("exercise 1...ok!")
- // Exercise 2
- // ==========
- // Use _.head to get the first element of the list
- var xs = Identity(['do', 'ray', 'me', 'fa', 'so', 'la', 'ti', 'do'])
- console.log("--------Start exercise 2--------")
- var ex2 = map(_.head)
- assertDeepEqual(Identity('do'), ex2(xs))
- console.log("exercise 2...ok!")
[Javascript] Functor Basic Intro的更多相关文章
- [Javascript] Functor law
Functor laws: 1. Identity: map(id) == id 2. Composition: compose(map(f), map(g)) == map(compose(f,g) ...
- 浅析Javascript
Javascript是一种脚本语言,从出生就被唾弃,一开始人们使用它只是为了解决诸如页面数据校验之类的问题.它基于prototype的面向对象实现一度被认为很丑很难用,甚至很多身处一线Web开发者都不 ...
- JavaScript Web Application summary
Widget/ HTML DOM (CORE) (local dom) DOM, BOM, Event(Framework, UI, Widget) function(closure) DATA (c ...
- 跨域资源共享(CORS)问题解决方案
CORS:Cross-Origin Resource Sharing(跨域资源共享) CORS被浏览器支持的版本情况如下:Chrome 3+.IE 8+.Firefox 3.5+.Opera 12+. ...
- svg-高斯模糊+swiper伦播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 使用 libevent 和 libev 提高网络应用性能
使用 libevent 和 libev 提高网络应用性能 Martin C. Brown, 作家, Freelance 简介: 构建现代的服务器应用程序需要以某种方法同时接收数百.数千甚至数万个事件, ...
- 模态框zeroModal快速引入
最基本快速接入 <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...
- Js-函数式编程
前言 JavaScript是一门多范式语言,即可使用OOP(面向对象),也可以使用FP(函数式),由于笔者最近在学习React相关的技术栈,想进一步深入了解其思想,所以学习了一些FP相关的知识点,本文 ...
- JS代码风格自动规整工具Prettier
问题背景 通常使用 ESLint做代码风格检查检查, 和部分代码质量检查. 但是使用ESLint在入库时候, 会产生很多的代码修正工作, 需要开发者一个一个的修改. 如果很多,并且时间紧迫,甚是尴尬. ...
随机推荐
- Swing Note
2. Swing容器: 内容窗格.分层窗格.玻璃窗格和一个可选的菜单条.(这四个同时包含在根窗格里)(请分别向其中添加组件) ...
- 关于QT的系统总结
编译环境与开发流程 开发QT有两种IDE可以使用,一种是使用 VS + Qt 的插件,另一种就是使用QtCreator工具.前一种是微软的工具,用的都比较多容易上手,缺点是信号槽的支持不太好,需要手写 ...
- ( 转)基于.NET平台常用的框架整理
自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线,让我对这个平台产生了浓厚的兴趣,在工作和学习中也积累了一些开源的组件,就目前想到的先整理于此,如果再想到,就 ...
- ASP.NET MVC学习之Ajax(完结)
一.前言 通过上面的一番学习,大家一定收获不少.但是总归会有一个结束的时候,但是这个结束也意味着新的开始. 如果你是从事ASP.NET开发,并且也使用了第三方控件,那么一定会觉得ASP.NET开发aj ...
- JS编程常识
一.UI层的松耦合 松耦合就是要求各层遵循“最少知识原则”,或者说是各层各司其职,不要越权: HTML:结构层 CSS:表现层 JS:行为层 对于各层的职能,有一句比较贴切的解释:HTML是名词(n) ...
- Kali Linux Web 渗透测试视频教程— 第十六课-拒绝服务攻击
Kali Linux Web 渗透测试视频教程— 第十六课-拒绝服务攻击 文/玄魂 目录 Kali Linux Web 渗透测试视频教程— 第十六课-拒绝服务攻击................... ...
- AngularJs 基础(60分钟入门)
AngularJS 是一个创建富客户端应用的JavaScript MVC框架.你仍然需要具有服务端后台,但大多数的用户交互逻辑将放到客户端上处理.它可以创建单页的应用程序,一个页面的应用仅仅需要HTM ...
- ie下不显示图片
IE支持的图片是必须为RGB三原色的,保存图片时,必须“另存为web可用的格式...”
- echart.js的使用与API
---恢复内容开始--- echart.js的使用与API 1.echart.js的使用: 第一步:在head标签或body下创建一个script标签去引用echart.js,(该文件可以在echar ...
- listview可见再加载图片
对于,listView如果同时含有大量文字和图片,那么对于用户,如果不需要滑动到后面,那么此时去加载网络图片,显然是耗费流量的. 此时可以做一些优化: listView.getRefreshableV ...