Function prototypes

Question

I have a function called Observable. As per all functions, I can call certain methods on the function, that even though they do not exist directly on the function, JS moves 'down the prototypical chain' and gets the method on the function. Example of such methods is 'toString()'

function Observable(forEachy) {
  this._forEachy = forEachy;
}
console.log(Observable.toString()) // "function Observable(forEach) {this._forEach = forEach;}"

Now, when I set Observable.prototype to a new object and define some methods in that object, and call those methods on Observable, it throws an error.

Observable.prototype = {
  forEachy: function (onNext) {
    return onNext();
  }
}
    console.log(Observable.forEachy(()=>"Hi, John")) // error: Observable.forEachy is not a function

But I can call those methods on the prototype and it works just fine.

console.log(Observable.prototype.forEachy(()=>"Hi, John")); // "Hi, John"

Setting a new instance to Observable just works fine.

const abc = new Observable("HI");

console.log(abc.forEachy(()=>"Hello world")); // "Hello world"

Please, why is that?

Also, apart from passing in the argument received in the constructor to the newly created object, what else does the statement this._forEachy = forEachy do?

const abc = new Observable("HI");
console.log(abc._forEachy) // "HI"

Observable.prototype= Object.prototype; Observable.prototype.forEachy = (func)=>func(); console.log(Observable.forEach(()=>"Hi, Jane")) <-- This doesn't work either. — Alf Moh
– Alf Moh, Commented Jun 15, 2018 at 7:45
(1) forEachy is not the same as forEach (2) .forEachy is not a direct member of Observable. It is a member of Observable's prototype. (3) Whoever instantiates from Observable will get all inherit from it's prototype indeed. — Adelin
– Adelin, Commented Jun 15, 2018 at 7:46
@Adelin No, that's absolutely not the "correct usage". If you do that you will be adding new prototype methods to all objects. — JLRishe
– JLRishe, Commented Jun 15, 2018 at 7:49
@AlfMoh The prototype determines what methods/properties are available on instances of a type (created using new MyType(). Changing the prototype does not add new properties to MyType. — JLRishe
– JLRishe, Commented Jun 15, 2018 at 7:51

Bartłomiej Gładys · Accepted Answer · 2018-06-15 07:57:49Z

1

Your example works as expected. You should consider getting more information about Prototypes in JavaScript.

When you declare something as Function.prototype = function(){}, it works similar to methods in OOP programming. In oop you can't call Class.method(), can you? You have to first create an instance to call this method. However, keep in mind that there is a lot of differences between OOP and prototype inheritance. In reality, your "prototype" is not the abstraction. It's the existing object :)

Though, if you want to follow this way, you can create class and define static method:

class Observable {
  static forEachy(){
    // your code here
  }
}

and then:

Observable.forEachy()

edited Jun 15, 2018 at 7:57

answered Jun 15, 2018 at 7:44

Bartłomiej Gładys

4,6151 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Function prototypes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related