Can I not access attributes of 'this' when passing `this` through a function?

Question

NOTE: This entire question was based off a scenario where the issue was a syntax error; there was actually NO issue with passing 'this'. The question should be closed.

For example, the following works:

$('.base-icons').click(function () {
   selectedIcon($(this).attr("src").split(/\/(\/*)/));
});

var selectedIcon = function(myObj) {
   console.log(myObj);
};

And prints the shortened string as expected. The follow does not work:

$('.base-icons').click(function () {
   selectedIcon(this);
});

var selectedIcon = function(myObj) {
   console.log($(myObj).attr("src").split(/\/(\/*)/)[6]);
};

as it prints undefined. Why? Thank you.

@JeremyBanks Are you sure? http://stackoverflow.com/a/261682/5137782 — 8protons, Mar 21 '16 at 18:30
_"For example, the following works:`selectedIcon($(this).attr("src").split(/\/(\/!*)/)[6]) var selectedIcon = function(myObj) { console.log(myObj) }`"_ Can you create a stacksnippets to demonstrate ? — guest271314, Mar 21 '16 at 18:31
@JeremyBanks : Wouldn't the definition be automatically hoisted? — PM 77-1, Mar 21 '16 at 18:32
@PM77-1 https://jsfiddle.net/guv0dcbz/ , https://jsfiddle.net/guv0dcbz/2/ — guest271314, Mar 21 '16 at 18:34
@PM77-1 The definition (`var selectedIcon`) would be hoisted, but the assignment (`selectedIcon = function...`) would not be, so he'd be calling `undefined()`. — Jeremy, Mar 21 '16 at 18:34
@8protons The click event doesn't occur until after the assignment has occurred, and the click callback function already had a closure over the hoisted definition so it can call changeMe without issue. You're trying to use it immediately (before assignment) in the question, rather than waiting for a later event. — Jeremy, Mar 21 '16 at 18:44
The first scenario **does not actually work** as you claim, and for that reason you question may be closed. Please try running it as-is -- it produces an error. The question you linked is talking about a function definition block (`function x(){}`), but you're using a function expression assignment statement (`var x = function(){}`) which has different hoisting behaviour. Please provide a full example, preferably as an executable Stack Snippet. — Jeremy, Mar 21 '16 at 18:52
@8protons The timing of that code is entirely different than the code you've posted above, because of the use of events. It is a different question than the one you've posted above. Please update your question to actually demonstrate that scenario if that's the one you're asking about. — Jeremy, Mar 21 '16 at 18:55
@8protons The code in the fiddle acts differently than the code above since you wrapped it in a click handler... Also having the same function declared twice means the second instance will overwrite the first. — epascarello, Mar 21 '16 at 18:59
@8protons IT IS TRUE! The problem you have is you can not have two functions with the same name!!!!!! Both clicks are calling the SAME method. Rename the seconds and magically the error goes away. T — epascarello, Mar 21 '16 at 19:03
Really!!! Let me change your fiddle and watch the magic. https://jsfiddle.net/j1t9mvur/ — epascarello, Mar 21 '16 at 19:04
NO.... when you call it onclick it is defined before it is executed. When you have the code like you have it in your question above it is being executed before it is defined. Your fiddle is like apples to oranges. Two different things. — epascarello, Mar 21 '16 at 19:07
And because you did not show it, you got the answers/comments above. — epascarello, Mar 21 '16 at 19:09
Your updated code blocks both have syntax errors. Please actually test your examples before inviting dozens of other people to test them for you. — Jeremy, Mar 21 '16 at 19:15
this is **NOT** the appropriate way to edit questions, you should flag for a moderator to remove if you want it removed. — , Apr 19 '16 at 19:08
@JarrodRoberson You're right. I had made that one edit in anger and frustration with some comments. Since then, I have learned to not take it personally and that people are just trying to help. Thank you so much for taking the time to check this out and editing it! — 8protons, Apr 19 '16 at 19:10

guest271314 · Accepted Answer · 2016-03-21T19:10:00.053

1

For example, the following works:
selectedIcon($(this).attr("src").split(/\/(\/!*)/)[6])

var selectedIcon = function(myObj) {
   console.log(myObj)
}
And prints the shortened string as expected. The follow does not work:
selectedIcon(this)

var selectedIcon = function(myObj) {
   console.log($(myObj).attr("src").split(/\/(\/!*)/)[6])
}
as it prints undefined. Why? Thank you.

selectedIcon is undefined when called at javascript at Question, resulting in a TypeError

Both examples at Question should return an error.

Uncaught TypeError: selectedIcon is not a function

window.onerror = function(e) {
  console.info(e);
  alert(e);
}

selectedIcon("abc");

var selectedIcon = function (myObj) {
   alert(myObj)
}

edited Mar 21 '16 at 19:10

answered Mar 21 '16 at 19:04

guest271314

1
15
104
177

Why doesn't this return an error? I am calling these functions before they are defined. https://jsfiddle.net/j1t9mvur/9/ – 8protons Mar 21 '16 at 19:47
@8protons _"Why doesn't this return an error? I am calling these functions before they are defined."_ Because you are not calling the functions before they are defined at https://jsfiddle.net/j1t9mvur/9/ . For example, if you call `.click()` chained to `.click(handler)` an error will be logged at `console` https://jsfiddle.net/j1t9mvur/10/ – guest271314 Mar 21 '16 at 19:49
Is it because the jQuery click happens after definition? – 8protons Mar 21 '16 at 19:50
@8protons Yes, see https://jsfiddle.net/j1t9mvur/10/ where `.click()` event is triggered using `.click()` http://api.jquery.com/click/#click before the following functions are defined – guest271314 Mar 21 '16 at 19:51

score 0 · Answer 2 · answered Mar 21 '16 at 20:41

0

Yes, you can access attributes of this when passing this through a function.

answered Mar 21 '16 at 20:41

8protons

3,591
5
32
67

score 0 · Answer 3 · answered Mar 21 '16 at 20:48

0

You can access the attributes of this like this.

$(this).attr("href");

answered Mar 21 '16 at 20:48

Gardezi

2,692
2
32
62

Can I not access attributes of 'this' when passing `this` through a function?

3 Answers3