Javascript无限关卡

Question

I recently saw some code that I just found out is called currying, I think. The code looks like this:

layer.components[0]("ADBE Propety1")("ADBE Property 2")("ADBE Property 3");

The part I am interested in duplicating is the multiple sets of parenthesis after components[0] . Currying is new to me (as of today) and closures can get complicated. So I need some help.

I would like to create a class where an instance of that class has children and I can get to the children by name like this:

let bins = new Bins(proj);
console.log(bins('Videos')('More')('NiteLite_90.mp4')); 
// Return: {name: 'NiteLite_90.mp4', children: []}

With the code below, I can get two levels deep (down to 'More'), but not anywhere past that. I want to be able to go infinite levels deep.

class Bins {
  constructor(proj) {
    this.bins = this._getBins(proj);
  }

  bin(name) {
    let bin = this.bins.filter(b => b.name === name)[0];
    if (bin) {
      return (name) => bin.children.filter(b => b.name === name)[0];
    } else {
      return null;
    }
  }

  _getBins(proj) {
    let { children } = proj;
    let childs = [];
    let self = this;
    children.forEach(child => {
      let obj = { name: child.name };
      if (child.children && child.children.length > 0) {
        obj.children = self._getChildren(child);
      }
      childs.push(obj);
    });
    return childs;
  }

  _getChildren(child) {
    let children = [];
    let self = this;
    child.children.forEach(c => {
      let obj = { name: c.name };
      if (c.children && c.children.length > 0) {
        obj.children = self._getChildren(c);
      }
      children.push(obj);
    });
    return children;
  }
}

let proj = {
  children: [
    {
      name: 'Videos',
      children: [
        {
          name: 'NiteLite_00.mp4',
          children: []
        },
        {
          name: 'More',
          children: [
            {
              name: 'NiteLite_90.mp4',
              chidlren: []
            }
          ]
        },
        {
          name: 'NiteLite_97.mp4',
          children: []
        }
      ]
    },
    {
      name: 'Sequences',
      children: [
        {
          name: 'Oregon Coast',
          children: []
        }
      ]
    },
    { name: 'Music', children: [] },
  ]
};
let bins = new Bins(proj);
console.log(bins.bin('Videos')('More')('NiteLite_90.mp4')); // I don't want to have to call `.bins` first

Could I get some help on setting this up? I have researched multiple other currying posts on here and seen several blogs about it, but I still don't get it and I want some specific help with my code.

Answer 1

You could have a recursive curry function to be able to go as deep as you want. But you have an additional problem: how do you know when to stop returning a function and to return the actual object?

If you call bins.bin('Video')('More') -- how do you know if you want to return the bin for the More object or a function that will search through children of More so you can find the 'NiteLite_90.mp4 bin?

Below is one possible solution that will give you both options:

class Bins {
  search(collection, name) {
    const bin = collection.find(b => b.name === name);
    if (bin) {
      // first create a function that will search through this bin's children
      const curry = (name) => this.search(bin.children, name);

      // but make the bin itself available through a `.bin` property on the function
      curry.bin = bin;

      // return this new function so it can be curried
      return curry;
    } else {
      return null;
    }
  }

  bin(name) {
    return this.search(this.bins, name);
  }

  // plus everything you already have in this class, except for the original
  // bin(name) function
}

Now you can go an unlimited number of levels deep, and have access to any intermediate bin as well via the .bin property:

let bins = new Bins(proj);

console.log(bins.bin('Videos').bin);
// { name: "Videos", children: [ ... ] }

console.log(bins.bin('Videos')('More').bin);
// { name: "More", children: [ ... ] }

console.log(bins.bin('Videos')('More')('NiteLite_90.mp4').bin);
// { name: "NiteLite_90.mp4" }

Like your original method, the search method can return null so take care when you're searching for a path that might not exist:

console.log(bins.bin('Videos')('DoesNotExist')('NiteLite_90.mp4').bin);
// Uncaught TypeError: bins.bin(...)(...) is not a function

console.log(bins.bin('Videos')('More')('DoesNotExist.mp4').bin);
// Uncaught TypeError: Cannot read property 'bin' of null

So you'll probably want to wrap such calls in a try/catch to be safe:

let bin;
try {
  bin = bins.bin('Videos')('DoesNotExist')('NiteLite_90.mp4').bin;
} catch (e) {
  console.error('Bin not found!');
}

if (bin) {
  // do whatever you want with the found bin
}

Answer 2

Just create a function, which returns itself:

class Foo{
  constructor(){
    function bar(){
      //Do something nice here
      return bar
    }
    this.bar=bar
  }
}

new Foo().bar(1)(2)(3)

Now, you can go infinitely deep...

new Foo().bar(1)(2)(3)(4)(5)(6)(7)(8)(9)(10)(11)(12)(13)(14)(15)(16)(17)(18)(19)(20) //Works perfectly 

Ok, but how to collect data of all calls?

This is where it start to get tricky.

1. You can store somthing after each call on the 'owner' object of the function:

class Foo{
  constructor(){
    function bar(arg){
      baz.push(arg)
      return bar
    }
    const baz=[]
    this.bar=bar
    this.baz=baz
  }
}

const foo=new Foo()
foo.bar(1)(2)(3)

console.log(foo.baz) //[1,2,3]

2. Or, pass some information between subsequent calls by bind ing this to the returned function, like this:

class Foo{
  constructor(){
    function bar(...args){
      console.log(this)
      return bar.bind(
        this //Bound array
        .concat(args)
      )
    }
    this.bar=bar.bind([])
  }
}

new Foo().bar(1)(2)(3)()
//[]
//[1]
//[1,2]
//[1,2,3]

Answer 3

Is this something you are looking for?

class Animal {
  constructor (name) {
    console.log(`Im a bear called ${name}`)
  }

  shout (voice) {
    return (sound) => `I am making a ${sound} sound with a ${voice} voice` ;
  }
}

const harry = new Animal('Harry')
const speakUp = harry.shout('low')('woof')

console.log(speakUp)

Small explanation

The whole idea of currying is that functions return functions. So whereas you normally would do something like:

const hello = (name, age, job) => (
  `My nam is ${name}, I am ${age} and I do ${job} for a living`
)

with currying you'd do something like:

const hello = (name, age, job) => (
  `My nam is ${name}, I am ${age} and I do ${job} for a living`
)

const helloWithCurrying = (name) => (age) => (job) => (
  `My nam is ${name}, I am ${age} and I do ${job} for a living`
)

console.log(hello('Rick', 26, 'coding'))
console.log(helloWithCurrying('Rick')(26)('coding'))

The benefit of currying really comes into play when you are having complex Higher Order Functions.