Do arrow functions have specific implications when it comes to the context of Angular Components?

Question

Do arrow functions have specific implications when it comes to the context of Angular Components?

The topic of arrow functions is commonly discussed, but I've been unable to find an answer to the following scenario.

Let's consider this example from an Angular 4 Directive:

export class MouseParallaxDirective implements AfterViewInit {

constructor(private element: ElementRef) {
}

ngAfterViewInit() {
    // In this case, `this` refers to the angular component object
    let movementStrength = 25;
    let height = movementStrength / window.innerHeight;
    let width = movementStrength / window.innerWidth;
    let parallaxElement = this.element.nativeElement;

    window.onmousemove = (e) => {
        // Here, `this` should refer to the same object as per function scope preservation by arrow function
        let pageX = e.pageX - (window.innerWidth / 2);
        let pageY = e.pageY - (window.innerHeight / 2);
        let newvalueX = width * pageX * -1 - 25;
        let newvalueY = height * pageY * -1 - 50;
        parallaxElement.style.backgroundPosition = newvalueX + "px " + newvalueY + "px";
    };

}
}

Shouldn't both instances of this point to the identical object when using an arrow function to maintain the outer scope?

angular typescript ecmascript-6 arrow-functions

Answer 1

Answer №1

When the ngAfterViewInit method is called from within the MouseParallaxDirective class, it follows the prototype pattern, meaning that this refers to the specific instance of the class.

The context of this is determined dynamically, prompting us to question, "What is the object calling this function?"

There are four rules for understanding the context of this:

If a function exists in the global scope, then this will point to the window object (only in non-strict mode).
When a function is preceded by an object's name and dot notation, like myObj.myFunc()
The object before the dot becomes this (myObj === this in this scenario).
Usage of .call, .apply, or .bind explicitly defines this. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#The_bind_method
In the case of using a constructor function (with the keyword new), this points to the specific instance generated and returned by the said constructor function.

With the introduction of ES2015, Arrow functions operate differently, no longer defining this dynamically.

this now maintains the value of the enclosing LEXICAL context's this...

An important note is that arrow functions should not be used when adding functions to a prototype, as they prevent proper usage of this. For instance, avoid implementing the following pattern:

Array.prototype.mySort = () => {// this is not referenced to the array}

In your scenario, the anonymous arrow function within window.onmousemove relates to the class instance due to its lexical context.

Answer 2

When the ngAfterViewInit method is called from within the MouseParallaxDirective class, it follows the prototype pattern, meaning that this refers to the specific instance of the class.

The context of this is determined dynamically, prompting us to question, "What is the object calling this function?"

There are four rules for understanding the context of this:

If a function exists in the global scope, then this will point to the window object (only in non-strict mode).
When a function is preceded by an object's name and dot notation, like myObj.myFunc()
The object before the dot becomes this (myObj === this in this scenario).
Usage of .call, .apply, or .bind explicitly defines this. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#The_bind_method
In the case of using a constructor function (with the keyword new), this points to the specific instance generated and returned by the said constructor function.

With the introduction of ES2015, Arrow functions operate differently, no longer defining this dynamically.

this now maintains the value of the enclosing LEXICAL context's this...

An important note is that arrow functions should not be used when adding functions to a prototype, as they prevent proper usage of this. For instance, avoid implementing the following pattern:

Array.prototype.mySort = () => {// this is not referenced to the array}

In your scenario, the anonymous arrow function within window.onmousemove relates to the class instance due to its lexical context.

Answer 3

Answer №2

The onmousemove method is associated with the window object, so within this function, the reference to this will point to the window object.

Similarly, the ngAfterViewInit function is defined within the scope of the MouseParallaxDirective component, meaning that in this case, this refers to that specific component.

Therefore, the two instances of this cannot be referencing the same object in this scenario.

However, it is still possible to access variables from the outer scope, as demonstrated by being able to access a variable declared within the component inside the onmousemove function.

https://i.sstatic.net/P5XWh.jpg

In order to access the component’s scope, a new variable named _this is created.

Scopes:

https://i.sstatic.net/8Q9Jk.jpg

Demo:

https://stackblitz.com/edit/angular-5u6zid?file=app/mouseParallaxDirective/MouseParallaxDirective.component.ts

Answer 4

The onmousemove method is associated with the window object, so within this function, the reference to this will point to the window object.

Similarly, the ngAfterViewInit function is defined within the scope of the MouseParallaxDirective component, meaning that in this case, this refers to that specific component.

Therefore, the two instances of this cannot be referencing the same object in this scenario.

However, it is still possible to access variables from the outer scope, as demonstrated by being able to access a variable declared within the component inside the onmousemove function.

https://i.sstatic.net/P5XWh.jpg

In order to access the component’s scope, a new variable named _this is created.

Scopes:

https://i.sstatic.net/8Q9Jk.jpg

Demo:

https://stackblitz.com/edit/angular-5u6zid?file=app/mouseParallaxDirective/MouseParallaxDirective.component.ts

Do arrow functions have specific implications when it comes to the context of Angular Components?

Answer №1

Answer №2

Similar questions

Angular2 Routing error. Index 1 in the requested path is undefined

Discover the steps to implement user authentication with a combination of username, password, and token in an Angular 4

I am facing an issue with the Angular2 Modal Form where it only displays the data but does

Is there a way to insert data from one table into a MySQL Table in Drizzle and update the entry if it already exists?

angular2 and ionic2 encounter issues when handling requests with observable and promises

Having trouble loading extensive amounts of data into a select element within an Angular application

Styling array of arrays

The latest update of WebStorm in 2016.3 has brought to light an error related to the experimental support for decorators, which may undergo changes in forthcoming

Developing collaborative functions in Angular

Error encountered when trying to match routes in two separate Angular applications within an Express app: "Cannot find any routes that match

Steps for TS to infer types on interfaces

Tips for finding the displayRows paragraph within the MUI table pagination, nestled between the preceding and succeeding page buttons

Identifying the Click Event Within an ngx Bootstrap Modal

Make sure to load Meteor.user() prior to initializing Angular 2

Explaining the distinction between include and rootDir in tsconfig.json

Angular 6 offers a versatile multi-select dropdown feature

Error message in Angular2 for production build with webpack: "Unable to load app/app.component.html"

Prevent the "Ok" button from showing on the keyboard in an Ionic 2 form

Compiling Typescript upon saving in Sublime Text 3

Is there a way to ensure that Tailwind CSS loads before rendering components in NextJS?