4

I'm trying not to duplicate questions obviously as I have seen some questions/answers regarding Douglas Crockford's Javascript the Good parts book

I understand most of this code

Function.prototype.method = function (name, func) {
this.prototype[name] = func;
return this;
};

Function.method('inherits', function (Parent) {
this.prototype = new Parent( );
return this;
});

var Mammal = function (name) {
this.name = name;
}.method('get_name', function () {
return this.name;
}).method('says', function() {
return this.saying || '';
});

var Cat = function (name) {
this.name = name;
this.saying = 'meow';
}.inherits(Mammal)

var myCat = new Cat('bagsley');
myCat.get_name();

what I'm having trouble getting is the this.prototype[name] why isn't it written as this.prototype.name; I know returning this allows chaining and the syntax here looks very similar to jQuery but I still don't get the prototype[name] part

Any help is apprecaited thanks

James Daly
  • 1,357
  • 16
  • 26

2 Answers2

3

There is a difference between obj.name and obj[name].

This...

obj.name = 123;

...will assign the value 123 to the "name" property (of the object).

On the other hand, this...

obj[ name ] = 123;

...will assign the value 123 to those property which name is equal to the value of the name variable/argument.

So:

var name = 'foo';

obj.name = 123;
obj[ name ] = 456;

// And now:
obj.name; // 123
obj.foo; // 456
Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
  • i plugged this into firebug and it worked as to prove your point but obviously I would never run this code var name = 'frank' Function.prototype.method = function (name, func) { this.prototype.frank = func; return this; }; Function.method('frank', function (Parent) { this.prototype = new Parent( ); return this; }); var Mammal = function (name) { this.name = name; }.method('frank', function () { return this.name; }) var Cat = function (name) { this.name = name; this.saying = 'meow'; }.frank(Mammal) var myCat = new Cat('bagsley'); myCat.frank(); – James Daly May 12 '12 at 22:42
  • @user974959 Hm, I didn't quite get your last comment. Do you have another question? – Šime Vidas May 12 '12 at 23:19
  • no question just putting your answer to practice meaning this would work ... var name = 'frank' Function.prototype.method = function (name, func) { this.prototype.frank = func; return this; }; – James Daly May 13 '12 at 00:34
  • @user974959 I don't understand that code. Why did you hard-code `this.prototype.frank`? The `method` method will not work properly if it's defined like that. It has to be `this.prototype[name]`, so that the argument value is used for the name... – Šime Vidas May 13 '12 at 00:48
  • it could if every method's name was 'frank' however it's not intended to work that way obviously was just illustrating the difference and why it's preferable to use brackets instead of .notation - just putting what I learned to practice basically – James Daly May 13 '12 at 01:23
2

prototype[name] allows name to be a variable containing any string, and it will access the property of prototype named by the string. prototype.name would look for the property literally called "name".

The [] syntax allows you to:

  1. Have variable property names - especially useful when looping through properties with for..in
  2. Use symbols in property names that are otherwise disallowed (eg. obj['foo-bar'], arr[123])
  3. Have closer resemblance to the associative arrays of other languages such as PHP.
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592