1403148 - Value of this changes halfway through function

Status: RESOLVED INVALID

(Core :: General, defect)

Description

[Fabio Lolli]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

Steps to reproduce:

I found this bug both on my current 'standard' firefox version (55.0.3) and in Firefox Developer Edition.

I instantied an ES6 class, and on the blur event of an input, I call UpdateDropQuantity of said object, setting this scope as the object itself.
When the function is called after the blur event, halfway through the values of this changes into Window.
I don't think this is due to a coding mistake, I tried on a couple of script runners, and Chrome, and it's working as intended.

Quick explanation of what happens (after this paragraph you can find the code):
blur event of an input calls UpdateDropQuantity on my object.
Inside UpdateDropQuantity, this is scoped to the object.
UpdateDropQuantity calls a 'private' function _ApplyNewUnallocatedQuantity, with .call(this), to set the scope of this to the current object.
Inside _ApplyNewUnallocatedQuantity, a new let variable currUnallocatedQuantity is set to this.GetUnallocatedQuantity().
After the execution of this line of code, this no longer is the current object, but Window.


This is a simplified version of the code for the class:

window.DropCatalogueAllocations = (function () {

    let _currentDropQty = new WeakMap();
    let _currentAllocatedQty = new WeakMap();
    let _$currentUnallocatedQty = new WeakMap();

    function _ApplyNewUnallocatedQuantity() {
        //this is the current object
        let currUnallocatedQuantity = this.GetUnallocatedQuantity();
        //this is now Window 
        if (typeof _$currentUnallocatedQty.get(this) !== 'undefined') {
            _$currentUnallocatedQty.get(this).val(currUnallocatedQuantity);
            if (currUnallocatedQuantity < 0) {
                _$currentUnallocatedQty.get(this).addClass('over-available');
            } else {
                _$currentUnallocatedQty.get(this).removeClass('over-available');
            }
        }
    }
	
    class DropCatalogueAllocations {
        constructor(currentDropQty) {
            _currentDropQty.set(this, currentDropQty);
            _currentAllocatedQty.set(this, 0);
        }
        GetUnallocatedQuantity() {
            return _currentDropQty.get(this) - _currentAllocatedQty.get(this);
        }
        UpdateDropQuantity() {
            _ApplyNewUnallocatedQuantity.call(this);
        }
    }

    return DropCatalogueAllocations;
}());


Actual results:

Inside _ApplyNewUnallocatedQuantity the value of this changes after calling this.GetUnallocatedQuantity()


Expected results:

The value of this should not have changed.

Comment 1

[Fabio Lolli]

This is not a blocking issue as I can just assign this to a new variable before the first line executes, and then use that variable instead of this - but still, it could lead to lots of bugs

Comment 2

[Fabio Lolli]

Not sure what was happening, my guess is probably a rougue promise was resolving during execution and possibly changing the value of this. After chaining properly, this does not occur anymore.
Sorry for the useless report :)

Comment 3

[Firefox Bug Husbandry Bot]

Moving from Core::Untriaged to Core::General https://bugzilla.mozilla.org/show_bug.cgi?id=1407598