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. 利用Docker Hub上的Nginx部署Web应用

    Docker Hub上提供了很多镜像,如Nginx,我们不需要自己从ubuntu开始装Nginx再做发布,只需要先下载镜像到本地 docker pull nginx 在/opt下新建文件夹API,将需 ...

  2. 从Mono 4.0观C# 6.0部分新特性

    Struct的默认构造函数 struct Complex { public Int32 Re { get; set; } public Int32 Im { get; set; } public Co ...

  3. Asp.Net Web API 2第十三课——ASP.NET Web API中的JSON和XML序列化

    前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html 本文描述ASP.NET W ...

  4. VS下的Resharper插件报错“Can not resolve symbol”的解决办法

    今天准备写代码的时候,发现代码中大片的红色,就像下面的图片一样.但是编译一下,也可以重新生成,运行也没有问题.于是就看了下svn上是不是有人改了哪里,发现也没有问题.于是又清理了下解决方案,再次生成, ...

  5. 作业七:团队项目——Alpha版本冲刺阶段-01

    昨天进展:准备开发环境,安装软件. 今天安排:软件框架设计. 小组一共三人,陈芝航因家里有事,与我们进行了QQ视屏会议.

  6. 面试求职中需要了解的Java多线程知识

    Java中多线程的实现方式 在java的历史版本中,有两种创建多线程程序的方法 1) 通过创建Thread类的子类来实现(Thread类提供了主线程调用其它线程并行运行的机制) 主要步骤: 自定义类继 ...

  7. Redis教程(七):Key操作命令详解

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/134.html?1455807040 一.概述: 在该系列的前几篇博客中, ...

  8. paip.gui控件tabs控件加载内容的原理以及easyui最佳实现

    paip.gui控件tabs控件加载内容的原理以及easyui最佳实现 //////////////tabs控件的加载 同form窗体一样,俩个方式 两个方式:一个是url,简单的文本可以使用这个,不 ...

  9. paip.c3p0 nullpointexcept 配置文件根路径读取bug 解决

    paip.c3p0 nullpointexcept 配置文件根路径读取bug 解决 windows ok linux犯错误... 查看loging, 初始化的时候儿jdbcurl,user,pwd都是 ...

  10. javaweb回顾第五篇浅谈会话

    1:什么是会话 通俗来说就是客户和服务器的一次私密谈话,客户发送请求以后服务器能够识别请求是来自同一个客户,他们是1对1的关系. 了解会话以后我们就要去考虑如何去实现这些问题下面一一进行解析 2:会话 ...