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的更多相关文章

  1. [Javascript] Functor law

    Functor laws: 1. Identity: map(id) == id 2. Composition: compose(map(f), map(g)) == map(compose(f,g) ...

  2. 浅析Javascript

    Javascript是一种脚本语言,从出生就被唾弃,一开始人们使用它只是为了解决诸如页面数据校验之类的问题.它基于prototype的面向对象实现一度被认为很丑很难用,甚至很多身处一线Web开发者都不 ...

  3. JavaScript Web Application summary

    Widget/ HTML DOM (CORE) (local dom) DOM, BOM, Event(Framework, UI, Widget) function(closure) DATA (c ...

  4. 跨域资源共享(CORS)问题解决方案

    CORS:Cross-Origin Resource Sharing(跨域资源共享) CORS被浏览器支持的版本情况如下:Chrome 3+.IE 8+.Firefox 3.5+.Opera 12+. ...

  5. svg-高斯模糊+swiper伦播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 使用 libevent 和 libev 提高网络应用性能

    使用 libevent 和 libev 提高网络应用性能 Martin C. Brown, 作家, Freelance 简介: 构建现代的服务器应用程序需要以某种方法同时接收数百.数千甚至数万个事件, ...

  7. 模态框zeroModal快速引入

    最基本快速接入 <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...

  8. Js-函数式编程

    前言 JavaScript是一门多范式语言,即可使用OOP(面向对象),也可以使用FP(函数式),由于笔者最近在学习React相关的技术栈,想进一步深入了解其思想,所以学习了一些FP相关的知识点,本文 ...

  9. JS代码风格自动规整工具Prettier

    问题背景 通常使用 ESLint做代码风格检查检查, 和部分代码质量检查. 但是使用ESLint在入库时候, 会产生很多的代码修正工作, 需要开发者一个一个的修改. 如果很多,并且时间紧迫,甚是尴尬. ...

随机推荐

  1. bzoj 1977

    题意:求严格的次小生成树.点n<=100000,m<=300000 思路:很容易想到先做一边最小生成树,然后枚举每条非树边(u, v, w),然后其实就是把u,v路径上小于w的最大边替换成 ...

  2. react纯前端不依赖于打包工具的代码

    ####react最基础的语法和不依赖环境的纯前端免编译代码 参照:http://www.ruanyifeng.com/blog/2015/03/react.html 注意事项:1.必须放倒服务器上, ...

  3. 用c#开发微信 (22) 微信商城 - 微信支付 (c#源码)

    微信支付有几种支付模式:刷卡支付,扫码支付,公众号支付,APP支付.本文介绍用于在微信商城里的公众号支付. 1. 效果图 在商城里购买商品后,到支付页面: 点击上面的确认支付,转到下面微信支付页面: ...

  4. Dynamic CRM 2013学习笔记(二十四)页面保存前进行逻辑验证

    我们有时要验证下页面上的一些逻辑,比如开始时间不能晚于结束时间,不对时不让保存.我们可以在相关的字段事件上处理,但这如果要判断的字段比较多时,就比较麻烦了. 这时候我们就可以利用Form的OnSave ...

  5. Dynamic CRM 2013学习笔记(四十)流程3 - 对话(Dialog)用法图解

    我们将用对话来实现一个简单的满意度调查,下一个问题依赖于上一个问题.对话是同步的,不同于工作流既可以是同步也可以是异步的:对话可以跟用户互动:对话只能手动开始:对话只支持 .Net Framework ...

  6. 基本hibernate DEMO

    Hibernate常用API: 1Configuration: 负责加载主配置文件信息,同时也加载映射关系文件信息. 2SessionFactory 负责创建Session对象. 3Session 数 ...

  7. latex数字加粗后变宽

    latex的数字默认用的是Times New Roman字体,这个字体有个不优美之处就是加粗后会变宽,如下图所示: 平常倒是也无所谓.昨天在把实验数据整理进表格时,为了凸显每个数据集上各个实验方法的优 ...

  8. Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)

    目录 前言 formidable简介 创建项目并安装formidable 实现上传功能 运行结果 部分疑惑解析 写在之后 前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能---- ...

  9. paip.java swt 乱码问题解决

    paip.java swt 乱码问题解决 看累挂,Dfile.encoding是gbk的.. 作者Attilax  艾龙,  EMAIL:1466519819@qq.com  来源:attilax的专 ...

  10. MySQL分库分表总结参考

    单库单表 单库单表是最常见的数据库设计,例如,有一张用户(user)表放在数据库db中,所有的用户都可以在db库中的user表中查到. 单库多表 随着用户数量的增加,user表的数据量会越来越大,当数 ...