将新方法添加到javascript中的对象有什么区别？

Question

There are two way to add the method to an object in javascript, What 's the differnce about the below ways?

1

var o = new Object(); o.method = function(){}

2

var o = new Object(); o.prototype.method = function(){}

Answer 1

The "prototype" is global. It can be used by all objects. You can even override or remove standard methods.

Answer 2

if you are defining a new method for an object, so its local and is used only with this instance of the object

on the other hand if you define it within the prototype scope then its global and the method is defined for all instances

Answer 3

There's a couple things that you have to get straight first about prototypes. What I write here is a rough overview. There a few other things that go into how prototypes work, but I'm trying to keep this simple and to the basics.

This blog post has some good details about what I'm saying: http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/

Only functions have .prototype properties. Instances have .constructor properties. In your example, 'o' is an instance of Object.

All constructors are functions.

Depending on the browser you're using, an instance will have a prototype property like:

.__proto__ 

This is what you normally think of as the .prototype property on a function. Most (all?) versions of IE do not provide "_ _ proto _ _" (extra spaces for SO formatting) properties on instances. Browsers that support ECMA5 have a method called getPrototypeOf() which returns the prototype of an instance.

Since constructors are functions, they have .prototype properties. So o.constructor.prototype is a good way to access the prototype in a friendly cross-browser way. There are caveats to this, as it can be overwritten. See the blog post for more info.

So the first thing we need to do is to re-write your code in such a way that the syntax is actually working like we are expecting. I'm changing the variable names to be a little clearer from this point on:

var foo = new Object(); //a new instance of Object
foo.foo_method = function(){ console.log('foo'); } //add a function called 'foo_method' to our instance

var bar = new Object(); // a new instance of Object
bar.constructor.prototype.bar_method = function(){ console.log('bar'); } //add a function called 'bar_method' to the Object prototype


foo.foo_method(); //logs "foo"
foo.bar_method(); //logs "bar"

bar.bar_method(); //logs "bar"

try{
    bar.foo_method(); 
}catch(err){
   console.log(err); //Uncaught TypeError: Object #<Object> has no method 'foo_method' or "TypeError"
}

//Alternate way to add methods to prototypes. Only works in non-IE browsers.
bar.__proto__.woohoo_method = function(){ console.log('woohoo'); }

foo.woohoo_method(); //logs "woohoo"
bar.woohoo_method(); //logs "woohoo"​​​​​