Getting the true reference of "this" in Typescript

Question

Getting the true reference of "this" in Typescript

I'm currently working through the tutorial on learn.knockoutjs.com and I've reached step 4 of the custom bindings tutorial. In the provided JavaScript code snippet, we have:

update: function(element, valueAccessor) {
    // Give the first x stars the "chosen" class, where x <= rating
    var observable = valueAccessor();
    $("span", element).each(function(index) {
        $(this).toggleClass("chosen", index < observable());
    });
}

I've converted this to TypeScript as follows:

update: (element, valueAccessor) => {
    var observable = valueAccessor();
    $("span", element).each(index => {
        $(this).toggleClass('chosen', index < observable())
    });
}

This results in creating a _this variable to maintain the scope of the "update" function instead of the inner "span" function.

update: function (element, valueAccessor) {
    var _this = this;
    var observable = valueAccessor();
    $("span", element).each(function (index) {
        $(_this).toggleClass('chosen', index < observable());
    });
}

The issue arises with $(_this). How can I ensure TypeScript provides me with the correct $(this)?

javascript typescript

Answer 1

Answer №1

Many find that using TypeScript's `(_this)` is more intuitive, as code like the following often leads to multiple duplicates on Stack Overflow:

  update: function() {
     $(elem).click(function(){
          this.save();
     });
  }

The `this` in JavaScript does not behave the same way it does in other languages - it has a separate binding for every function call.

TypeScript can help make the above code work as expected for many newcomers to JavaScript:

  update: function() {
     //this refers to the object with update and save methods
     $(elem).click( () => {
          this.save();  //this still refers to the object with update and save methods
     });
  }

There are ways to refer to what you want even when using fat arrows:

update: function() {
    $(elem).click( (event) => {
        $(event.currentTarget).hide() //equivalent to $(this).hide() with a normal function
        this.save(); //Remains intuitive for non-JavaScript developers
    });
}

Or with another example:

update: function() {
    $("span", element).each( (index, elem) => {
        $(elem).toggleClass('chosen', index < observable())
        this.save(); //still intuitve for non-JavaScript developers
    });
}

Of course, for experienced JavaScript developers accustomed to the behavior of `this`, it may not be as intuitive.

By the way, I am not entirely sure about the TypeScript syntax...

Answer 2

Many find that using TypeScript's `(_this)` is more intuitive, as code like the following often leads to multiple duplicates on Stack Overflow:

  update: function() {
     $(elem).click(function(){
          this.save();
     });
  }

The `this` in JavaScript does not behave the same way it does in other languages - it has a separate binding for every function call.

TypeScript can help make the above code work as expected for many newcomers to JavaScript:

  update: function() {
     //this refers to the object with update and save methods
     $(elem).click( () => {
          this.save();  //this still refers to the object with update and save methods
     });
  }

There are ways to refer to what you want even when using fat arrows:

update: function() {
    $(elem).click( (event) => {
        $(event.currentTarget).hide() //equivalent to $(this).hide() with a normal function
        this.save(); //Remains intuitive for non-JavaScript developers
    });
}

Or with another example:

update: function() {
    $("span", element).each( (index, elem) => {
        $(elem).toggleClass('chosen', index < observable())
        this.save(); //still intuitve for non-JavaScript developers
    });
}

Of course, for experienced JavaScript developers accustomed to the behavior of `this`, it may not be as intuitive.

By the way, I am not entirely sure about the TypeScript syntax...

Answer 3

Answer №2

The solution is straightforward. Avoid utilizing a lambda function in this case.

update: (element, valueAccessor) => {
    var observable = valueAccessor();
    $("span", element).each(function (index) {
        $(this).toggleClass('chosen', index < observable())
    });
}

It's worth noting that instead of using a lambda function, this code opts for

... element).each(function (index)...

.

I am unsure about the reason behind this decision, so it would be helpful if someone could provide an explanation.

Answer 4

The solution is straightforward. Avoid utilizing a lambda function in this case.

update: (element, valueAccessor) => {
    var observable = valueAccessor();
    $("span", element).each(function (index) {
        $(this).toggleClass('chosen', index < observable())
    });
}

It's worth noting that instead of using a lambda function, this code opts for

... element).each(function (index)...

.

I am unsure about the reason behind this decision, so it would be helpful if someone could provide an explanation.

Answer 5

Answer №3

Esailija's approach is the way to go: avoid using $(this) within the callback function. It will result in cleaner code if you use a named parameter instead.

Here's an example to illustrate how this can improve readability, using a simple jQuery plugin:

// Apply a random opacity to each element in a jQuery selection
jQuery.fn.randomOpacity = function() {
    return this.each( function() {
        $(this).css({ opacity: Math.random() });
    });
};

The code above can be quite confusing with this being used on consecutive lines and carrying different meanings.

To enhance clarity, opt for the named parameter:

// Apply a random opacity to each element in a jQuery selection
jQuery.fn.randomOpacity = function() {
    return this.each( function( i, element ) {
        $(element).css({ opacity: Math.random() });
    });
};

By incorporating the named parameter, the code becomes much more understandable.

Answer 6

Esailija's approach is the way to go: avoid using $(this) within the callback function. It will result in cleaner code if you use a named parameter instead.

Here's an example to illustrate how this can improve readability, using a simple jQuery plugin:

// Apply a random opacity to each element in a jQuery selection
jQuery.fn.randomOpacity = function() {
    return this.each( function() {
        $(this).css({ opacity: Math.random() });
    });
};

The code above can be quite confusing with this being used on consecutive lines and carrying different meanings.

To enhance clarity, opt for the named parameter:

// Apply a random opacity to each element in a jQuery selection
jQuery.fn.randomOpacity = function() {
    return this.each( function( i, element ) {
        $(element).css({ opacity: Math.random() });
    });
};

By incorporating the named parameter, the code becomes much more understandable.

Getting the true reference of "this" in Typescript

Answer №1

Answer №2

Answer №3

Similar questions

Guide to using Javascript to dynamically insert items into the shopping cart menu list

The initial request does not include the cookie

When extracting information from a table within a Vue.js and Vuetify.js function

Utilize the gsap ScrollTrigger in conjunction with React's useRef() and Typescript, encountering issues with type mism

Unexpected Error in Applying Color to Rows in EXTJS Grid

Guide on preventing radiobutton postback in ASP.NET based on specific conditions on the client side

A guide on incorporating AJAX with jQuery to fetch a JSON file

What is the reason that .every() is not recognized as a function?

Discord.js experiences limitations with storing multiple data in conjunction with TypeScript when using MySQL

Tips for sending a file via Ajax using the POST method?

Is there a way to remove the messages I've selected using checkboxes in jQuery?

The function mustAsync onSuccess is not present in this type (typescript)

Issue: The error message "undefined variable 'angular'" appears when attempting to access offline files stored on a network drive

Validating Cognito credentials on the server-side using Node.js

What is the best way to continuously call a URL using jQuery until the desired result is obtained?

Change the class of the div when the first div is selected

Modify the placeholder color for a disabled Input element to match the overall Mui theme design

Configure the right-to-left directionality for a particular widget only

The GET Request made for an Image in an Angular Component results in a 404 error message indicating

Retrieve the content from paragraph elements excluding any text enclosed within span tags using the Document.querySelector method