I see many time, and almost in all jquery library the following syntax.
There is a function
var myTest = function () {
name : "eyal"
}
and then they call the function with this syntax…
myTest({
someFunc : function () {
alert("test");
}
});
what this is mean ?
Thanks In Advance
[off-topic]
Hi @psykick1. Welcome to the forums. A word to the wise… When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.
I have done it for you this time. 
[/off-topic]
Well noted.
Thank you very much.
Hi @psykick1, this is actually no valid syntax – where did you see this?
Here an object literal is getting passed to myTest() as its first (and only) argument. This object has a property someFunc which is again another function, making someFunc() a method of this object. Passing objects to functions is often used as “option bags” to bundle multiple parameters, especially if the function accepts a lot of them. Consider:
function myTest(someFunc, someValue) {
alert(someFunc(someValue))
}
function greet (name) {
return 'Hello ' + name + '!'
}
myTest(greet, 'world') // alerts "Hello world!"
Here, myTest() could be rewritten to accept a single object instead of two separate arguments:
function myTest (options) {
var func = options.someFunc
var value = options.someValue
alert(func(value))
}
myTest({
someFunc: function greet (name) {
return 'Hello ' + name + '!'
},
someValue: 'world'
}) // alerts "Hello world!"
Hello , thank you very much ,
Still , confused …
I see this syntax in JQuery resources ,
Following to our explaination , I didnt see that with this syntac they passing and arguments to a function…
look like that they adding properties to the current function .
please take a look:
There is a function
jQuery.extend = jQuery.fn.extend = function() {
var src, copyIsArray, copy, name, options, clone,
target = arguments[ 0 ] || {},
i = 1,
length = arguments.length,
deep = false;
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target;
// skip the boolean and the target
target = arguments[ i ] || {};
i++;
}
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
target = {};
}
// extend jQuery itself if only one argument is passed
if ( i === length ) {
target = this;
i--;
}
for ( ; i < length; i++ ) {
// Only deal with non-null/undefined values
if ( ( options = arguments[ i ] ) != null ) {
// Extend the base object
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
// Prevent never-ending loop
if ( name === "__proto__" || target === copy ) {
continue;
}
// Recurse if we're merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
( copyIsArray = jQuery.isArray( copy ) ) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && jQuery.isArray( src ) ? src : [];
} else {
clone = src && jQuery.isPlainObject( src ) ? src : {};
}
// Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy );
// Don't bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// Return the modified object
return target;
};
And then they calling that function in this way:
jQuery.extend( {
// Unique for each copy of jQuery on the page
expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
// Assume jQuery is ready without the ready module
isReady: true,
error: function( msg ) {
throw new Error( msg );
},
noop: function() {},
// See test/unit/core.js for details concerning isFunction.
// Since version 1.3, DOM methods and functions like alert
// aren't supported. They return false on IE (#2968).
isFunction: function( obj ) {
return jQuery.type( obj ) === "function";
},
isArray: Array.isArray || function( obj ) {
return jQuery.type( obj ) === "array";
},
isWindow: function( obj ) {
/* jshint eqeqeq: false */
return obj != null && obj == obj.window;
},
isNumeric: function( obj ) {
// parseFloat NaNs numeric-cast false positives (null|true|false|"")
// ...but misinterprets leading-number strings, particularly hex literals ("0x...")
// subtraction forces infinities to NaN
// adding 1 corrects loss of precision from parseFloat (#15100)
var realStringObj = obj && obj.toString();
return !jQuery.isArray( obj ) && ( realStringObj - parseFloat( realStringObj ) + 1 ) >= 0;
},
isEmptyObject: function( obj ) {
var name;
for ( name in obj ) {
return false;
}
return true;
},
isPlainObject: function( obj ) {
var key;
// Must be an Object.
// Because of IE, we also have to check the presence of the constructor property.
// Make sure that DOM nodes and window objects don't pass through, as well
if ( !obj || jQuery.type( obj ) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
return false;
}
try {
// Not own constructor property must be Object
if ( obj.constructor &&
!hasOwn.call( obj, "constructor" ) &&
!hasOwn.call( obj.constructor.prototype, "isPrototypeOf" ) ) {
return false;
}
} catch ( e ) {
// IE8,9 Will throw exceptions on certain host objects #9897
return false;
}
// Support: IE<9
// Handle iteration over inherited properties before own properties.
if ( !support.ownFirst ) {
for ( key in obj ) {
return hasOwn.call( obj, key );
}
}
// Own properties are enumerated firstly, so to speed up,
// if last one is own, then all properties are own.
for ( key in obj ) {}
return key === undefined || hasOwn.call( obj, key );
},
type: function( obj ) {
if ( obj == null ) {
return obj + "";
}
return typeof obj === "object" || typeof obj === "function" ?
class2type[ toString.call( obj ) ] || "object" :
typeof obj;
},
// Workarounds based on findings by Jim Driscoll
// http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context
globalEval: function( data ) {
if ( data && jQuery.trim( data ) ) {
// We use execScript on Internet Explorer
// We use an anonymous function so that context is window
// rather than jQuery in Firefox
( window.execScript || function( data ) {
window[ "eval" ].call( window, data ); // jscs:ignore requireDotNotation
} )( data );
}
},
// Convert dashed to camelCase; used by the css and data modules
// Microsoft forgot to hump their vendor prefix (#9572)
camelCase: function( string ) {
return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
},
nodeName: function( elem, name ) {
return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
},
each: function( obj, callback ) {
var length, i = 0;
if ( isArrayLike( obj ) ) {
length = obj.length;
for ( ; i < length; i++ ) {
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
break;
}
}
} else {
for ( i in obj ) {
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
break;
}
}
}
return obj;
},
// Support: Android<4.1, IE<9
trim: function( text ) {
return text == null ?
"" :
( text + "" ).replace( rtrim, "" );
},
// results is for internal usage only
makeArray: function( arr, results ) {
var ret = results || [];
if ( arr != null ) {
if ( isArrayLike( Object( arr ) ) ) {
jQuery.merge( ret,
typeof arr === "string" ?
[ arr ] : arr
);
} else {
push.call( ret, arr );
}
}
return ret;
},
inArray: function( elem, arr, i ) {
var len;
if ( arr ) {
if ( indexOf ) {
return indexOf.call( arr, elem, i );
}
len = arr.length;
i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
for ( ; i < len; i++ ) {
// Skip accessing in sparse arrays
if ( i in arr && arr[ i ] === elem ) {
return i;
}
}
}
return -1;
},
merge: function( first, second ) {
var len = +second.length,
j = 0,
i = first.length;
while ( j < len ) {
first[ i++ ] = second[ j++ ];
}
// Support: IE<9
// Workaround casting of .length to NaN on otherwise arraylike objects (e.g., NodeLists)
if ( len !== len ) {
while ( second[ j ] !== undefined ) {
first[ i++ ] = second[ j++ ];
}
}
first.length = i;
return first;
},
grep: function( elems, callback, invert ) {
var callbackInverse,
matches = [],
i = 0,
length = elems.length,
callbackExpect = !invert;
// Go through the array, only saving the items
// that pass the validator function
for ( ; i < length; i++ ) {
callbackInverse = !callback( elems[ i ], i );
if ( callbackInverse !== callbackExpect ) {
matches.push( elems[ i ] );
}
}
return matches;
},
// arg is for internal usage only
map: function( elems, callback, arg ) {
var length, value,
i = 0,
ret = [];
// Go through the array, translating each of the items to their new values
if ( isArrayLike( elems ) ) {
length = elems.length;
for ( ; i < length; i++ ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) {
ret.push( value );
}
}
// Go through every key on the object,
} else {
for ( i in elems ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) {
ret.push( value );
}
}
}
// Flatten any nested arrays
return concat.apply( [], ret );
},
// A global GUID counter for objects
guid: 1,
// Bind a function to a context, optionally partially applying any
// arguments.
proxy: function( fn, context ) {
var args, proxy, tmp;
if ( typeof context === "string" ) {
tmp = fn[ context ];
context = fn;
fn = tmp;
}
// Quick check to determine if target is callable, in the spec
// this throws a TypeError, but we will just return undefined.
if ( !jQuery.isFunction( fn ) ) {
return undefined;
}
// Simulated bind
args = slice.call( arguments, 2 );
proxy = function() {
return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
};
// Set the guid of unique handler to the same of original handler, so it can be removed
proxy.guid = fn.guid = fn.guid || jQuery.guid++;
return proxy;
},
now: function() {
return +( new Date() );
},
// jQuery.support is not used in Core but other projects attach their
// properties to it so it needs to exist.
support: support
} );
and
Ah okay, well jQuery.extend() does indeed something different, it doesn’t expect specific properties on a given object but just merges two or more objects into the first one – see here for details. This can also be used to add properties to a function (functions are also objects in JS), or additional methods to jQuery itself.
Hello ,
Look at this, I tried it. but console throw error
someFunction = function () {
}
someFunction({
testfunction : function () {
name : "eyal"
}
});
var sf = new someFunction ();
sf.testfunction();
You’re passing an object to someFunction(), which however does not take any parameters so that object goes nowhere. Also, why the new – is someFunction() supposed to be a constructor? In this case, you’d have to assign testfunction to this (or generically merge the entire object into this).
Also note the syntax error inside testfunction:
Did you mean something like this?
var SomeConstructor = function (options) {
// Assign testFunction only:
this.testFunction = options.testFunction
// Or generically merge the entire object:
Object.assign(this, options)
}
var something = new SomeConstructor({
testFunction: function () {
return { name: 'eyal' }
}
})
console.log(something.testFunction()) // { name: 'eyal' }
Hi ,
First of , thank you very much for your help ,
As I see here , you passing the function to a constructor and then assign it to a this.variable that you prepare before, and then you able to use it in the instantiated object.
What am I still trying to understand, in the example that I sent to you of Jquery library,
They passing the function but to object doesn’t have any parameters.
its means this functions , not assing to any prepared this.variable.
And this is why the console throw to me the error “this is not a function”
How they passing / adding properties to the object with out passing it by argument?
Hope you understand my confusion
Thank you
Are you referring to this line?
It doesn’t take explicit parameters but later they’re getting the values from the arguments object; this doesn’t exactly improve readability, but is useful in such cases where a function is variadic or overloaded (as both is the case here). Nowadays the same can be achieved with rest parameters though, which is much clearer to read.
Ohh , Now its makes very sence, I didnt knew that in javascript you can “create”
new parameters for function , outside that function , this is what made me the confusion.
What now made me understand that javascript is realy realy complex language.
Will sleep on it, maybe tommorow I will wake up smarter…
HaHa,
Anyway, Thanks alot, you saved me.
Just to clarify, the arguments variable is very special in that it is only available inside a given function – similar to this. Anyway, glad I could help! :-)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.