为什么这个javascript装饰功能不起作用？

Question

I am looking at decorate function. For example, decorate function can make sum() function to return a double sum. But the following code doesn't work as desired, I changed the 'f' to 'sum', please see comment on relevant line, why I cannot change this?

<script>
function doublingDecorator(f) {        

  return function() {

    return 2*sum.apply(this, arguments); // the original code is: return 2*f.apply(this,arguments) I changed to sum, then doesn't work.
  } 
}

// Usage:

function sum(a, b) {
  return a + b
}


var sum =  doublingDecorator(sum);          // sum gets decoration


alert (sum(3,4)); //return 14
</script>

Answer 1

f in doublingDecorator is not used. Instead you reference sum , which you also redefine. This causes an infinite loop.

function doublingDecorator(f) {        
  return function() {
    return 2*f.apply(this, arguments);
          // ^-- f instead of sum!
  } 
}
function sum(a, b) {
  return a + b
}
var sum = doublingDecorator(sum); // note: sum is already declared here, redeclaring is technically wrong.
console.log(sum (3,4)); // 14

Answer 2

Two things:

• You changed the inner f.apply to sum.apply .
• You redefine sum .

That's why it's breaking. Your change makes it a recursive call that never ends (infinite recursion) because sum calls itself over and over again. This is because you reference sum inside, which you have also redefined.

Eventually the recursion ends up exceeding the maximum call-stack size.

I recommend leaving f.apply as it is. Then your code should work. Another option is to not redefine sum . So do this instead:

var newSum = doublingOperator(sum);
console.log(newSum(3, 4)); //returns 14