Javascript array notation on object

Question

I'd like to know how this works behind the scenes: https://learn.jquery.com/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object/

How does JQuery set up foo[0] to execute the get function. I had a look at the source code but all I found was this:

get: function( num ) {
    return num != null ?

        // Return just the one element from the set
        ( num < 0 ? this[ num + this.length ] : this[ num ] ) :

        // Return all the elements in a clean array
        slice.call( this );
},

How can I my own object so that accessing an array index calls a function like this?

I'd like to do the same thing:

myObj[0];

acts identically to

myObj.get(0);

Looking a JQuery this must be possible as it doesn't just set this[0] = 'whatever' for each index manually, it executes the .get function somehow. Is there a way to say whenever an array lookup is made, to execute a function?

Rory McCrossan · Accepted Answer · 2016-07-01 11:16:36Z

4

It's because in jQuery 0 is the key of the property in the object which holds the DOMElement. This means that you're actually accessing an object by key, not an array by index. The get() method is just a wrapper for that accessor. Here's a working example:

var obj = {
    '0': 'hello!',
    get: function(key) {
    	return this[key];
    }
};

console.log(obj[0]);
console.log(obj.get(0));

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

answered Jul 1, 2016 at 11:16

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mitya · Accepted Answer · 2016-07-01 13:54:31Z

3

How does JQuery set up foo[0] to execute the get function

It's the other way round. get(0) simply calls [0].

jQuery creates an array-like stack of element objects, so it follows that, to extraxt one, you can use array syntax, e.g. [0].

edited Jul 1, 2016 at 13:54

answered Jul 1, 2016 at 11:17

Mitya

34.7k15 gold badges70 silver badges125 bronze badges

Comments

Tom B · Accepted Answer · 2016-07-01 12:44:42Z

0

After realising the JQuery method would not work for me as I wanted to execute code on the call I found a solution using Proxy objects:

var p = new Proxy(Obj, {
   get(target, name, receiver) {
    console.log(name);
    return name;
   }
});

p[0]will print 0 and allow executing code inside the function. I'm not sure if this will work in all browsers but this is for a node project.

answered Jul 1, 2016 at 12:44

Tom B

2,9432 gold badges27 silver badges34 bronze badges

Collectives™ on Stack Overflow

Javascript array notation on object

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related