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. HTTP02--Http请求头及缓存知识

    一.常用工具 Linux下:curl命令,I参数可以查看http head信息. Firefox:Firebug.HttpFox 二.常见Http Head信息 三.浏览器缓存机制 使用ctrl+F5 ...

  2. CentOS7 安装 mongodb

    https://docs.mongodb.com/manual/tutorial/install-mongodb-enterprise-on-red-hat/

  3. 【ASP.NET Web API教程】6.4 模型验证

    本文是Web API系列教程的第6.4小节 6.4 Model Validation 6.4 模型验证 摘自:http://www.asp.net/web-api/overview/formats-a ...

  4. node-webkit教程(15)当图片加载失败的时候

    在node-webkit教程(14)禁用缓存中,简单讲了当前禁用缓存的几种方法. 在实际开发过程中,我遇到了一个因为缓存引起的诡异的问题.应用场景如下: 在一个编辑器里,不停的向画布上添加svg或者其 ...

  5. [MFC] MFC 用mciSendString加载WAV资源文件

    @ - @     FIRDST:为什么不用路径加载? 因为mciSendString函数不支持加载资源文件里的WAV资源,如果按路径加载,那么你的WAV就暴露在exe之外,无法实现音频资源的很好保护 ...

  6. 清爽绿色格调图文box通用样式

    今天是端午节,小菜献上一款剽窃的box样式,祝大家端午快乐! 此box样式以绿色为主要色调,清新自然,适合大多数设计场景. 此box算是比较高级的了,box中的列表是图文列表,可以显示一张小图片,然后 ...

  7. LeadTools Android 入门教学——运行第一个Android Demo

    LeadTools 有很多Windows平台下的Demo,非常全面,但是目前开发手机应用的趋势也越来越明显,LeadTools也给大家提供了10个Android的Demo,这篇文章将会教你如何运行第一 ...

  8. ASP.NET 5系列教程 (二):Hello World

    本篇文章内容比较基础,主要是向大家展示如何创建一个 ASP.NET 5 工程,主要包含内容如下: 创建ASP.NET 5 工程 添加 Todo 控制器 安装 K Version Manager 执行 ...

  9. [BTS] EXCEPTION OBJECT_UNKNOWN RAISED

    Today, I generate a RFC schema, an error throwed by WCF-SAP adapter wazard. Microsoft.Adapters.SAP.R ...

  10. [jQuery学习系列一]1-选择器与DOM对象

    前言: 好久没有更新博客了, 最近想复习下 之前学过的JS的相关内容, 也算是自己的一种总结. 知识长时间不用就会忘记, 多学多记多用!! 下面的程序都可以在下面的网站进行在线调试: http://w ...