What different between assigning property on Object and Object.prototype?

Question

What different between assigning property on Object and Object.prototype? for example

Object.test =function(){};

and

Object.prototype.test =function(){}

Possible duplicate of [How does JavaScript .prototype work?](https://stackoverflow.com/questions/572897/how-does-javascript-prototype-work) — Randy Casburn, Mar 10 '19 at 20:40
then remove `Object.prototype` from the title and from the question itself. Then you might as well delete the question. With more understanding you will understand that JS Objects are intrinsically linked to their prototype. — Randy Casburn, Mar 10 '19 at 20:46
Word of caution: extending Object will cause all other objects to inherit from it and will mess with iterating with `for in` loops. Ideally you'd check hasOwnProperty() within the loop, but if you run a lot of dependencies, it's just asking for trouble. — Ultimater, Mar 10 '19 at 20:50
Are you really assigning to `Object`, or is that just a stand-in identifier for some other object? — Bergi, Mar 10 '19 at 21:46
Given that `Object !== Object.prototype`, the observable difference is quite obvious. What are you really asking for here? Do you understand how prototypes work? — Bergi, Mar 10 '19 at 21:47

score 2 · Answer 1 · answered Mar 10 '19 at 20:43

The first gives Object a static method that can be invoked directly from the class, without an instance. For example:

Object.test =function(){
  console.log('Object test running');
};

Object.test();

Assigning a function to the prototype, on the other hand, allows for instances to run the method:

Object.prototype.test = function() {
  console.log('test running on object ', this);
};

// don't use the object constructor, this is just an example:
const obj = new Object();
obj.test();

It might make a bit more sense if you didn't use the built-in Object, which everything inherits from:

function Foo() {}
Foo.checkIfFoo = function(arg) {
  return arg instanceof Foo;
};

const f = new Foo();
console.log(Foo.checkIfFoo(f));

Here, foo.checkIfFoo is a helper function on Foo that checks if a passed object is an instance of Foo or not - no instance is required to run checkIfFoo. Functions on the prototype, on the other hand, require an instance to run:

function Foo() {
  this.info = 'A Foo instance';
}
Foo.prototype.checkInfo = function() {
  console.log(this.info);
};

const f = new Foo();
f.checkInfo();

Note that in ES6+, you can put a function directly on the class with the static keyword:

// roughly equivalent to the snippet with checkIfFoo above
class Foo {
  static checkIfFoo(arg) {
    return arg instanceof Foo;
  }
}
const f = new Foo();
console.log(Foo.checkIfFoo(f));

Whereas a standard method lacks the static keyword:

// roughly equivalent to the snippet with checkInfo above
class Foo {
  constructor() {
    this.info = 'A Foo instance';
  }
  checkInfo() {
    console.log(this.info);
  }
}
const f = new Foo();
f.checkInfo();

What different between assigning property on Object and Object.prototype?

1 Answers1