Question

I’m very confused with JavaScript methods defined in objects and the this keyword.

In the below example, the toString() method is invoked when Mammal object instantiated:

function Mammal(name){ 
  this.name=name;
  this.toString = function(){
    return '[Mammal "'+this.name+'"]';
  }
}

var someAnimal = new Mammal('Mr. Biggles');
alert('someAnimal is '+someAnimal);

Despite the fact that the toString() method is not invoked on the object someAnimal like this:

alert('someAnimal is '+someAnimal.toString());

It still returns 'someAnimal is [Mammal "Mr. Biggles"]'. That doesn’t make sense to me because the toString() function is not being called anywhere.

Then to add even more confusion, if I change the toString() method to a method I make up such as random():

function Mammal(name){ 
  this.name=name;
  this.random = function(){
    return Math.floor(Math.random() * 15);
  }
} 

var someAnimal = new Mammal('Mr. Biggles');
alert(someAnimal); 

It completely ignores the random method (despite the fact that it is defined the same way was the toString() method was) and returns: [object object]

Another issue I’m having trouble understanding with inheritance is the value of this. For example, in the below example

function person(w,h){
  width.width = w;
  width.height = h;
}

function man(w,h,s) { 
  person.call(this, w, h); 
  this.sex = s;
}

this keyword is being sent to the person object clearly. However, does this refer to the subclass man or the superclass person when the person object receives it?

Thanks for clearing up any of the confusion I have with inheritance and object literals in JavaScript.

Answer 1

The behavior you are experiencing with the toString method is caused because when you do a string concatenation, the object is converted implicitly to String (by the ToPrimitive internal operation, using hint type “String”).

That method invokes another internal operation, [[DefaultValue]](hint).

If the hint type is String, that operation explicitly gets the toString property and invokes it.

If your object doesn’t explicitly define a toString method, the method will still be resolved higher in the prototype chain, "[object Object]" is the result of the Object.prototype.toString method.

For example:

var obj = {
  toString:function () {
    return "hello";
  }
};

alert(obj + ' world');
// will alert "hello world"

Now, about the this value:

The way you are constructing your objects is also known as constructor chaining, the this value will refer to a new object that inherits from the constructor’s prototype that you called with the new operator.

The invocation of the other constructor with call will just make that all the property assignments made to the this value inside the called function, are actually made on the new object from the first constructor, that doesn’t really affect the prototype chain, for example:

function Person(w,h){
  this.width = w;
  this.height = h;
}

function Man(w,h,s) { 
  Person.call(this, w, h); // will just apply the width and height assignments
  this.sex = s;
}

var person = new Person(1,2);
person instanceof Person; // true
person instanceof Man; // false

var man = new Man(1,2,3);
person instanceof Person; // false
person instanceof Man; // true

Edit: To clarify more, when you invoke Person.call(this, ...); it just calls that function to make the assignments of properties of the this value (this.width and this.height on your example) on that function, to the object passed as the first argument of call, a simplified example:

function Test () {
  this.foo = 1;
  this.bar = 2;
  this.baz = 3;
}

var obj = { foo: 0 }; // a simple object
Test.call(obj);
// now obj looks like this: {foo: 1, bar: 2,baz: 3}