2021-07-15 函数柯里化

1. 柯里化 主要体现在函数里面返回函数
2. 柯里化 参数的复用
3. 柯里化 延迟执行

function url(protocol,hostname,pathname){
    return `${protocol}${hostname}${pathname}`
}

var url1 = url('https://','www.baidu.com','/index')

console.log(typeof url1) //https://www.baidu.com/index   string

//将上面的函数改成柯里化函数

function url_crring(protocol){
    return function(hostname,pathname){
        return `${protocol}${hostname}${pathname}` 
    }
}

var url1 = url_crring('https://')

const url2 = url1('ymscq.cn','/demo')
const url3 = url1('taobao.com','/index')
const url4 = url1('bilibili','/test')


console.log(url2,url3,url4) //复用了 https

/*
    柯里化函数用来做浏览器的兼容

    ele:元素
    type：触发事件的类型
    listener：传入的函数
    useCaptrue：事件冒泡还是事件捕获
*/


const whichEvent = (function(){
    if(window.addEventListener){
        return function(ele,type,listener,useCapture){
            ele.addEventListener(type,function(e){
                listener.call(ele,e)
            },useCapture)
        }
    }else if(window.attachEvent){
        return function(ele,type,listener){
            ele.attachEvent('on'+type,function(e){
                listener.call(ele,e)
            })
        }
    }
})()

function add(){

    //let arg = arguments;
    let arg = Array.prototype.slice.call(arguments);  //只能用slice

    let inner  = function(){
        arg.push(...arguments)
        return inner; //递归
    }

    inner.toString = function(){
        return arg.reduce(function(pre,cur){
            return pre + cur
        });
    }

    return inner;
}

const result1 = add(1)(2)(3)(4)

• 箭头函数，参数复用

const List1 = [
    {mid:'haha'},
    {mid:'hehe'},
    {mid:'xixi'},
    {mid:'eeee'}
]

const List2 = [
    {add:'a'},
    {add:'o'},
    {add:'e'}
]

const curring = name => element => element[name]

const  name_mid = curring('mid')
const name_add  = curring('add')

console.log(List1.map(name_mid))
console.log(List2.map(name_add))