What is the element called on which you call an prototype function?

Question

I have made a prototype styled function in jQuery, example:

// Check if $Example's width/height is completely in a container:
$('#Example').elementWithinBounderiesOf( $('#Container') );

Within these functions, I can use this or $(this) as the object we called the function on, I understand and get this, but:

How do we name/call/label/refer-to the element on which we called the function on?

I need this for documentation purposes:

// elementWithinBounderiesOf($container) - Check if [NAME NEEDED] fits within $container
// Input:  [NAME NEEDED] - the object we're gonna check if it fits in $container
//         $container - the container which should contain the [NAME NEEDED]
// Output: Boolean true/false wether or not the [NAME NEEDED] fits within $container

$.fn.elementWithinBounderiesOf = function ($container) {
   // $(this) is in this example $('#Example'), but could be any other object
   // How do we call this selected object *here, within the function*?
   // The name for object-on-which-we-activated-the-function (but that's quite a long name)
}

Note 1: This is an example, I do not need a name specific for this case.
Note 2: I do not need to know how to pass a variable in the function, or a reference, or whatever-functionallity, I'm only looking for that name for object on which the function is activated

I'm unclear what you mean. Given your example code, `$Example` would have to be a variable defined previously which holds a jQuery object. What relevance does scope have? — Rory McCrossan, Feb 12 '16 at 10:22
`$Example.elementWithinBounderiesOf( $(this).parent() );` should do the task if I understand the fact... — Bhojendra Rauniyar, Feb 12 '16 at 10:23
I've updated my question, I hope this clearifies it a bit better. I find it difficult to phraze as I don't know what it's called, so I can't use the proper term to clearify — Martijn, Feb 12 '16 at 10:25
Sorry @john-slegers, was working on an edit myself, I believe redid what you did now :) — Martijn, Feb 12 '16 at 10:30
Thanks for the downvote, care to tell me why? Did my best to make a proper question about this. — Martijn, Feb 12 '16 at 10:31
@Martijn : All I did was reduce the indentation to 2 characters (for readability's sake) and adding a space between th function name and the `{` (which is common practice). I'm kind of a "readability Nazi", I guess... Oh, and I did not downvote your question. So I can't comment on that... — John Slegers, Feb 12 '16 at 10:33
I *readabilinazied* the spaces again, should be as you did it :) And the downvote part wasn't towards you, but to whoever did do that :) — Martijn, Feb 12 '16 at 10:38
Do you mean you wish to get the "#Example" text inside your function? — gothical, Feb 12 '16 at 10:43
Nope, that would be `this.id`. I'm just looking for that name for `object on which the function is activated` — Martijn, Feb 12 '16 at 10:46
You can't use this.id. You'll need to use $(this).attr("id"); as this refers to the pointer to the function call not the object that called it. eg: https://jsfiddle.net/fpvhxwk7/ although I still don't understand what you're asking. — gothical, Feb 12 '16 at 10:54

score 1 · Answer 1 · edited May 23 '17 at 12:23

1

Both, this and $(this), refere to the element on that the method is called, so in your case $('#Example'). this referes to the jQuery object, and $(this) to the jQuery wrapper around the same.

If you want preserve a context in prototype, look at this question: Preserving a reference to "this" in JavaScript prototype functions

For preserving the context, the bind method is really useful, it's now part of the recently released ECMAScript 5th Edition Specification, the implementation of this function is simple (only 8 lines long):

// The .bind method from Prototype.js 
if (!Function.prototype.bind) { // check if native implementation available
  Function.prototype.bind = function(){ 
    var fn = this, args = Array.prototype.slice.call(arguments),
        object = args.shift(); 
    return function(){ 
      return fn.apply(object, 
        args.concat(Array.prototype.slice.call(arguments))); 
    }; 
  };
}

MyClass.prototype.myfunc = function() {

  this.element.click((function() {
    // ...
  }).bind(this));
};

edited May 23 '17 at 12:23

Community

1
1

answered Feb 12 '16 at 10:33

bpoiss

13,673
3
35
49

Thanks for your answer. I know that `$(this)` is the object on which we call the function. But I'm looking for the same of `object-on-which-we-called-the-function` – Martijn Feb 12 '16 at 10:34
`this` does **not** refer to the DOM object. It refers to the jQuery object. Since a jQuery object be be a wrapper around zero or more DOM objects, there isn't a sensible way for `this` to refer to a single DOM object in that context. – Quentin Feb 12 '16 at 10:39
I'm sorry, but this answer still doesn't answer my question. I get how the functions work, how I use the `this`s and such. I'm only looking for a name – Martijn Feb 12 '16 at 11:11

score 0 · Answer 2 · answered Feb 12 '16 at 10:49

0

I call it the jQuery object, or the jQuery-wrapped element to be really clear. These are the terms used in the jQuery docs.

answered Feb 12 '16 at 10:49

Josh Harrison

5,927
1
30
44

score -1 · Answer 3 · answered Feb 12 '16 at 10:37

As shown by this test case:

$.fn.example = function example () {
    alert(this === myobject);
};

var myobject = $("div");
myobject.example();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

this is the jQuery object upon which the method was called.

Since $(some_jquery_object) creates a new jQuery object with the same members as the one passed in as an argument, $(this) will be a different, but identical, jQuery object.

What is the element called on which you call an prototype function?

3 Answers3