Passing `this` to .keyup()

Question

Problem:

I am trying to use this.str. Is there a way to pass in this to the .keyup() function?

function foo() {
    var str = "some text";
    $('#inputbox').keyup(function (e) {
       alert(str); //<-- This will output "some text"
       alert(this.str); //<-- This will output "undefined"
    });
}

`this` in that context refers to `$("#inputbox")`. Do you want to assign a property to the function itself? — Jack Bashford, Feb 19 '19 at 08:48

nick zoum · Answer 1 · 2019-02-19T09:38:38.983

1

You can store the this in a variable, It's common to name that variable _this or _self or _me.

Like so:

var str = "some text";
var _this = this;
$('#button').click(function() {
  console.log(str);
  console.log(_this.str);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Click Me</button>

You can also use arrow functions like so:

var str = "some text";
$('#button').click(() => {
  console.log(str);
  console.log(this.str);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Click Me</button>

You could also use some of the Function.prototype methods like apply or call to set this. But there isn't much sense in doing that in this case as you can see:

var str = "some text";
var _this = this;

$('#button').click(function() {
  onKeyUp.call(_this);
});

function onKeyUp() {
  console.log(str);
  console.log(this.str);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Click Me</button>

edited Feb 19 '19 at 09:38

answered Feb 19 '19 at 08:50

nick zoum

7,216
7
36
80

1

for me it did not work. – user123456 Feb 19 '19 at 09:24
@user123456 Converted the code to snippets, they will all seem to work fine – nick zoum Feb 19 '19 at 09:39
I am calling foo at ready function – user123456 Feb 19 '19 at 09:41
Have you set `this.str` ? Because if you've never set it, you can't expect to get a value from it, other than undefined – nick zoum Feb 19 '19 at 09:43
what you mean ? – user123456 Feb 19 '19 at 09:49
1

In my examples I don't need to set `this.str` because `var str` is in the global scope and in the global scope `var str` is the same `this.str`. That is only the case for the global scope. If you are not in the global scope you need to do `var str = this.str = "some text";` – nick zoum Feb 19 '19 at 09:51
@nickzooum, it worked now. – user123456 Feb 19 '19 at 09:54

cнŝdk · Answer 2 · 2019-02-19T09:59:43.883

1

In fact in JavaScript each function has its own scope, so inside the keyup callback this won't refer to foo but it will refer to the $("#inputbox"), which doesn't have a property called str, that's why you got undefined. This means that you can't access foo.str inside the keyup callback scope.

What you can do is to follow the Module pattern code style and to store the str of foo inside a variable then access it inside the keyup callback:

function foo() {
    var str = "some text";
    var _self = this;
    _self.str = str;
    $('#inputbox').keyup(function (e) {
       alert(str); //<-- This will output "some text"
       alert(_self.str); //<-- This will output "some text" too
    });
}

edited Feb 19 '19 at 09:59

answered Feb 19 '19 at 08:52

cнŝdk

31,391
7
56
78

I am still getting this as window object. – user123456 Feb 19 '19 at 09:33
@user123456 My bad, I forgot to reassign `str` to `_self` and yes indeed `this` in this case refers to the global `window` object. – cнŝdk Feb 19 '19 at 10:00

Passing `this` to .keyup()

2 Answers2