Can't access function attribute inside decoration function-CodePudding

In the following code I am trying to add decorators to a function. For certain reasons I would like to display the function attribute "name". However, I have no access to it as soon as I am in the individual functions. Also, I'm not sure why the functions are called from the bottom up. What are the reasons for all of the points mentioned and how can I avoid them?

let rectangleArea = (length, width) => {
  return length * width;
}

const countParams = (fn) => {
  return (...params) => {
    console.log('countParams', fn.name)
    if (params.length !== fn.length) {
      throw new Error(`Incorrect number of parameters for ${fn.name}!`);
    }
    return fn(...params);
  }
}

const requireIntegers = (fn) => {
  return (...params) => {
    console.log('requireIntegers', fn.name)
    params.forEach(param => {
      if (!Number.isInteger(param)) {
        throw new TypeError(`Params must be integers at ${fn.name}!`); //Can't access fn.name
      }
    });
    return fn(...params);
  }
}

//Why running from bottom to top?
rectangleArea = countParams(rectangleArea);
rectangleArea = requireIntegers(rectangleArea);

console.log(rectangleArea(20, 30, "hey"));

CodePudding user response：

It's not from bottom to top, it's the order you set.

With your decorators, you basically just did this:

requireIntegers(countParams(rectangleArea(20, 30, "hey"))).

Which means first it executes requireIntegers by passing it as input everything else (countParams(rectangleArea(20, 30, "hey"))).

Then you see the console log and the error as params.forEach scans the params and finds 'hey' which is not a number.

CodePudding user response：

The first time you make a decorated function for a given function, that returned function does not have a name -- it is anonymous. So when you then pass that decorated function to be decorated again, fn will be that anonymous function.

To solve this, assign the name of the fn function also to the returned decorated function. That way the name will stick even when you decorate that function again, and again...

Here is a helper function that will assign the name property to a given function:

const setName = (deco, value) => {
  Object.defineProperty(deco, "name", {value, writable: false});
  return deco;
}

let rectangleArea = (length, width) => {
  return length * width;
}

const countParams = (fn) => {
  return setName((...params) => {
    console.log('countParams', fn.name)
    if (params.length !== fn.length) {
      throw new Error(`Incorrect number of parameters for ${fn.name}!`);
    }
    return fn(...params);
  }, fn.name);
}

const requireIntegers = (fn) => {
  return setName((...params) => {
    console.log('requireIntegers', fn.name)
    params.forEach(param => {
      if (!Number.isInteger(param)) {
        throw new TypeError(`Params must be integers at ${fn.name}!`); //Can't access fn.name
      }
    });
    return fn(...params);
  }, fn.name);
}

rectangleArea = countParams(rectangleArea);
rectangleArea = requireIntegers(rectangleArea);

console.log(rectangleArea(20, 30, "hey"));

Why the functions are called from the bottom up.

Because in your decorator the last step is to call fn.

That fn might be an already decorated function, and so it is normal that earlier decorations of the function run later.

It is like wrapping a birthday present several times, each time with a different color of wrapping paper. When your friend unpacks it, they will get to see the colors of wrapping paper in the reverse order from the order in which you had applied them.