Skip to content Skip to sidebar Skip to footer

Can A "=>" Function Lose Context?

I have an ES6 'arrow' function which is used as a (Knockout) subscription handler: this.foo = 'test' callback = () => console.log(this.foo) bar.subscribe(callback); According t

Solution 1:

First off, thanks everyone for your help. It turns out this is just some sort of screwy Chrome developer tools bug.

Here's my original (not simpified) code:

this.snapshot_profile = ko.observable('1');
this.foo = 5;
this.snapshot_profile.subscribe((value) => {
    console.log(this.foo);
    debugger// rest of the method
});

As it turns out, the console.log will correctly return 5. However, if you pause on the debugger line and hover over this, you will see that it is not an instance of my class, but rather a ko.subscription. If I "inspect" this in the console, it will look like this:

callback: (value)dispose: ()disposeCallback: ()target: observable()__proto__: ko.subscription

not like an instance of my class. However (strangely) the console.log line will correctly log 5.

All of the above can be "fixed" by binding the function, either directly or through Knockout's binding mechanism. This is what confused me: in the debugger binding/not binding the arrow function actually did change things!

But, it looks like it really didn't change anything meaningful; it just exposed a bug in Chrome's debugger.

Post a Comment for "Can A "=>" Function Lose Context?"