为什么在使用函数声明时传递函数引用失败？

Question

Following code fails:

array.map(String.prototype.toLowerCase)

Throws Uncaught TypeError: String.prototype.toLowerCase called on null or undefined . Indeed, this is not set, I got it.

But what's weird is that following code returns an array of empty strings without failing:

array.map((s) => String.prototype.toLowerCase(s))

Any idea why? Note that I know this is not the way of having an array of lowercased strings. I'm just wondering why these two approaches behave differently.

In other words, what is the difference between .map(String.prototype.toLowerCase) and .map((s) => String.prototype.toLowerCase(s)) ? I thought is was identical, but obviously, it behaves differently. Note that here, String.prototype.toLowerCase could be replaced by anything.

Answer 1

What is the difference between .map(String.prototype.toLowerCase) and .map((s) => String.prototype.toLowerCase(s))

For the first case when you get the function outside of an object (String.prototype.toLowerCase) you lose your context, so you context is null and map tries to call on null or undefined . With the first solution you can't get the desired result, because you need to pass a context to the toLowerCase function, which must be each item of the array , but you don't get that each item of array .

For the second case you need to pass context which is the item to the String.prototype.toLowerCase via call function.

 var array = ['ASD', 'BSD']; var lowered = array.map(item => String.prototype.toLowerCase.call(item)); console.log(lowered); 

Answer 2

The second approach array.map((s) => String.prototype.toLowerCase(s)) doesn't throw an error, because toLowerCase isn't taken out of context, ie the method still has String.prototype as its receiver.

String.prototype.toLowerCase(s)) returns an empty string, because the argument s is discarded. toLowerCase takes it value from its receiving object instead. The receiving object is String.protoype . To get the actual string the prototype must be converted to string. This happens with the String.prototype.toString method, which evaluates to "" . Hence String.prototype.toLowerCase(s)) evaluates to "" .

You can verify this behavior by changing the toString method:

 String.prototype.toString = () => "FOO"; console.log(String.prototype.toLowerCase()); // "foo" 

Answer 3

The diffrence between .map(String.prototype.toLowerCase) and .map((s) => String.prototype.toLowerCase(s)) is that .map((s) => String.prototype.toLowerCase(s)) takes an arrow function which is an anonymous function. According to definition of arrow function " An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. " An arrow function does not create its own this, the this value of the enclosing execution context is used. using .map(String.prototype.toLowerCase) will not work as you are not passing any execution context to it but it's looking for one to execute. For example in the below code

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

Please check this link https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 4

I think I got it finally:

• first one has this set to undefined , equivalent to:

.map((s) => String.prototype.toLowerCase.call(undefined, s))

• while second one has this set to String.prototype , equivalent to:

.map((s) => String.prototype.toLowerCase.call(String.prototype, s))

Now, the question is, why String.prototype.toLowerCase() is returning an empty string... But this deserves another question :)