JQuery plugin scope problems

Question

I feel a little ignorant here, but I figure some education won't hurt me.

I have simplified my code to outline the issues - the problem is that when foo() is called from within the init method, it cannot access the supposed globals, a, b, c and settings. These are defined outside the method scope, so why are they not accessable?

For instance, settings is clearly defined just before the foo call, so why can foo not see settings?

(function(jQuery) {

a = new Date(); 
var b;
var c = 1;
settings = 0; // Here or not - same issue

var methods = {
    init : function(settings) {

        c = $(this);            

        settings = jQuery.extend({
                id: Math.floor(Math.random()*1001),
                x: 3;
                etc: 2        
            }, settings || {});            

        m = 1;

        foo();            
    }
};

function foo() 
{
    x = settings.x; // settings is not defined
    var n = c.m;

    return x;
}

jQuery.fn.bar= function(method) {

    if (methods[method]) // If we have a method that exists
    {
        return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } 
    else if ( typeof method === 'object' || ! method ) // Otherwise if we get passed an object (settings) or nothing, run the init.
    {
        return methods.init.apply( this, arguments );
    } 
    else 
    {
        $.error( 'Method ' +  method + ' does not exist' ); // Otherwise we have an error.
    }                

};
})(jQuery);

Any ideas?

it's not critical but you don't have a var= assignment where you declare settings at the top of the page — totallyNotLizards
– totallyNotLizards, Commented Sep 2, 2011 at 10:01
In your example is "settings" not defined, or is "settings.x" not defined? In foo() settings should equal 0, but settings.x should be undefined...can you confirm? — Timbo
– Timbo, Commented Sep 2, 2011 at 10:06
@Timbo - I confirm... settings = 0, settings.x is undefined. What is up with the scope? — Antony Carthy
– Antony Carthy, Commented Sep 2, 2011 at 10:12

Paul · Accepted Answer · 2011-09-02 10:08:20Z

3

You are creating a local copy of settings when you define it as an argument to your init function:

// Here there is a global settings
init : function(settings) {
    // Here there is a local settings
    // Changes made to it won't affect the global

So when foo is called settings is still 0, and you are accessing Number(0).x which is undefined.

Just removing the local copy of settings will solve your problem:

init : function(s) {

And change settings || {} to s || {}

edited Sep 2, 2011 at 10:08

answered Sep 2, 2011 at 10:03

Paul

142k28 gold badges285 silver badges272 bronze badges

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

1 Comment

Antony Carthy Over a year ago

100% - makes sense now that I look at it. I didn't notice that I was overriding it.

James Kyburz · Accepted Answer · 2011-09-02 10:03:41Z

0

it's because the init function takes in a parameter settings which is local to init

if foo is to access the settings variable init sets then it should call foo

foo(settings);

function foo(settings)

or

if you wan't a closure to fix your problem then init should take another parameter name, and then set the value of settings.

answered Sep 2, 2011 at 10:03

James Kyburz

14.5k1 gold badge34 silver badges33 bronze badges

Collectives™ on Stack Overflow

JQuery plugin scope problems

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related