Javascript prototype function returning NAN

Question

I am following the notes on ES6 from this link and created a small code snippets to play around.

class Bar{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
}
let bar = new Bar(12,10);
Bar.prototype.foo =function(){
    return this.x + this.y;
}
bar.foo() // 22 correct

I am so happy until i do this.

let baz = bar.foo
baz(); // NaN

Why baz() is printing NaN ?

Because `baz()` doesn't call the function on `bar` (or any object with `x` and `y` properties) — Bergi, Dec 22 '17 at 14:18
Please suggest me any modification on question text. It looks like too generic — John Doe, Dec 22 '17 at 15:01
Possible duplicate of [How does the “this” keyword work?](https://stackoverflow.com/q/3127429/218196) — Felix Kling, Dec 22 '17 at 17:46

score 3 · Answer 1 · answered Dec 22 '17 at 13:50

You took a seperate function from an object and you miss this. To make that work, you need to bind the object to the function.

class Bar{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
}
let bar = new Bar(12,10);
Bar.prototype.foo =function(){
    return this.x + this.y;
}
console.log(bar.foo()) // 22 correct

let baz = bar.foo.bind(bar); // bind innstance

console.log(baz()); // 22

score 2 · Accepted Answer · answered Dec 22 '17 at 13:48

When you affect bar.foo to baz, the function loses its context (this). So no more this.x and this.y. Check with breakpoints, you will see that both are undefined.

So adding two undefined together produces a NaN.

Try with this too check in your browser :

class Bar{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
}
let bar = new Bar(12,10);
Bar.prototype.foo =function(){
    debugger;
    return this.x + this.y;
}

Try to call it with defining its context. 3 ways to do it :

let baz = bar.foo.bind(bar);
baz();

bar.foo.call(bar);

bar.foo.apply(bar);

Javascript prototype function returning NAN

2 Answers2