What is the .call() function doing in this Javascript statement?

Question

I'm actively learning javascript, and I came across the following statement:

Object.prototype.toString.call([]); 

And I don't know what it means or what it does.

I have a vague understanding of .call , in that it allows you to call a method in the context of a different object (I think), but I am having a hard time understanding what role the .call() function is playing in the above statement. So I was wondering if anyone could explain what .call() is doing here?

Thanks!!

Answer 1

The call method sets the this value of the invoked function to the object passed as first argument, in your example, you are executing the Object.prototype.toString method on an Array object.

Array objects, have their own toString method ( Array.prototype.toString ) that shadows the one from Object.prototype , if you call [].toString(); the method on the Array.prototype will be invoked.

For example:

function test() {
  alert(this);
}
test.call("Hello"); // alerts "Hello"

Another example:

var alice = {
  firstName: 'Alice',
  lastName: 'Foo',
  getName: function () {
    return this.firstName + ' ' + this.lastName;
  }
};

var bob = {
  firstName: 'Bob',
  lastName: 'Bar',
};

alice.getName.call(bob); // "Bob Bar"

In the above example, we use the Alice's getName method on the Bob's object, the this value points to bob , so the method works just as if it were defined on the second object.

Now let's talk about the Object.prototype.toString method. All native objects in JavaScript contain an internal property called [[Class]] this property contains a string value that represents the specification defined classification of an object, the possible values for native objects are:

• "Object"
• "Array"
• "Function"
• "Date"
• "RegExp"
• "String"
• "Number"
• "Boolean"
• "Error" for error objects such as instances of ReferenceError , TypeError , SyntaxError , Error , etc
• "Math" for the global Math object
• "JSON" for the global JSON object defined on the ECMAScript 5th Ed. spec.
• "Arguments" for the arguments object (also introduced on the ES5 spec.)
• "null" (introduced just a couple of days ago in the ES5 errata )
• "undefined"

As I've said before that property is internal , there is no way to change it, the specification doesn't provide any operator or built-in function to do it, and the only way you can access its value is through the Object.prototype.toString method.

This method returns a string formed by:

"[object " + this.[[Class]] + "]"

_{Only for expository purposes because [[Class]] cannot be accessed directly.}

For example:

Object.prototype.toString.call([]);       // "[object Array]"
Object.prototype.toString.call(/foo/);    // "[object RegExp]"
Object.prototype.toString.call({});       // "[object Object]"
Object.prototype.toString.call(new Date); // "[object Date]"
// etc...

This is really useful to detect the kind of an object in a safe way, for detecting array objects, it's the most widely used technique:

function isArray(obj) {
  return Object.prototype.toString.call(obj) == '[object Array]';
}

It might be tempting to use the instanceof operator, but that way will lead to problems if you work on cross-frame environments, because an array object created on one frame, will not be instanceof the Array constructor of another.

The above method will work without any problems, because the object will contain the value of its [[Class]] internal property intact.

See also:

• instanceof considered harmful (or how to write a robust isArray )
• Object.prototype.toString
• Object Internal Properties and Methods

Answer 2

Because toString is mostly not invoked with a parameter, not toString('foo') , but bar.toString() . Which is where call comes in handy.

Different toString s

I say "mostly" because there are different toString s:

1. Object.prototype.toString returns a string representing object
2. Array.prototype.toString returns a string representing the specified array and its elements
3. Number.prototype.toString returns a string representing the specified Number object
4. String.prototype.toString returns a string representing the specified String object
5. Function.prototype.toString returns a string representing the source code of the function

Instance of Uses Separately

(new Object()).toString();                // "[object Object]"
["foo", "bar"].toString();                // "foo,bar"
(6).toString(2);                          // "110"
("meow").toString();                      // "meow"
(function(){return 'x';}).toString()      // "function (){return 'x';}"

Though all object prototypically inherit from Object , the latter ones don't inherit toString from Object 's toString , which means that they're all different things and have different uses. To tell the type of an object, Object.prototype.toString is the useful one, since it returns a type:

Every object has a toString() method that is automatically called when the object is to be represented as a text value or when an object is referred to in a manner in which a string is expected. By default, the toString() method is inherited by every object descended from Object. If this method is not overridden in a custom object, toString() returns "[object type]", where type is the object type.

Call

Note that among them the only one that takes parameter is Number.prototype.toString , and it's for specifying base of the outcome number. Therefore, in order to invoke Object.prototype.toString for arrays, numbers and other object that has their own toString method, you need call to specify this :

Object.prototype.toString.call(Math);         // [object Math]
Object.prototype.toString.call(new Date);     // [object Date]
Object.prototype.toString.call(new String);   // [object String]
Object.prototype.toString.call(Math);         // [object Math]

// Since JavaScript 1.8.5
Object.prototype.toString.call(undefined);    // [object Undefined]
Object.prototype.toString.call(null);         // [object Null]