undefined reference to object method in it's property on jQuery plugin

Question

I have problem in line #27 (fiddle: https://jsfiddle.net/hh82p4fj/1/)

Why my property points to undefined while it's in the same closure?

"use strict";

function callself(instance, callback) { // saves 'this' state for reuse inside another function
    return function () {
        var argumentsList = [this], i;

        for (i = 0; i < arguments.length; i = i + 1) {
            argumentsList.push(arguments[i]);
        }

        return callback.apply(instance, argumentsList);
    };
}

var Namespace = function () {
    var settings = { handler: this.method };

    this.initialize = function () {
        $.fn.myPlugin = callself(this, function (that, userInput) {
            /* this = Namespace
               that = jQuery element
               userInput = provided in line 30 as parameter
            */
            console.log(this);
            console.log(that);
            console.log(userInput);
            console.log(settings.handler); // why why it's undefined?
        });

        $('body').myPlugin('someData');
    };

    this.method = function () { console.info('method'); }; // this method should be returned as reference in line 27, but it can not reah 'this` - don't know why
};
new Namespace().initialize();

callself is needed there, to preserve both jQuery this context ando ryginal object closure.

place this.method = function () {... before var settings= beacuse this.method is undefined when you defining settings — befzz
– befzz, Commented Jun 15, 2015 at 9:25
@Ultra fiddle is not mine :D mine comment is correct. tested. — befzz
– befzz, Commented Jun 15, 2015 at 9:35

Arun P Johny · Accepted Answer · 2015-06-15 09:24:24Z

4

The problem is the order of initialization.

You are using this.method at the be genning of the script when this.method = function(){} is not yet executed so the value of this.method is undefined when the setting object is created.

var Namespace = function () {
    //this should be set before `this.method` is referred
    this.method = function () {
        console.info('method');
    };

    var settings = {
        handler: this.method
    };

    this.initialize = function () {
        $.fn.myPlugin = callself(this, function (that, userInput) {
            /* this = Namespace
               that = jQuery element
               userInput = provided in line 30 as parameter
            */
            console.log(this);
            console.log(that);
            console.log(userInput);
            console.log(settings.handler); // why why it's undefined?
        });

        $('body').myPlugin('someData');
    };

};

answered Jun 15, 2015 at 9:24

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

Szymon Toda Over a year ago

I thought am passing a reference filled when this.initialize is executed (where it's existing).

befzz · Accepted Answer · 2015-06-15 10:42:20Z

var settings = { handler: this.method };

You assigned to settings.handler not a reference to this.method
but value of this.method (which is undefined at execution moment)

this.method must be an object to get referenced.

this.method = {}; //empty object
var settings = { handler: this.method };

this.method =>_ref {}
settings.handler =>_ref {}

this.method = {}; //empty object
var settings = { handler: this.method };
this.method = funtion(){}`// reference will be replaced

this.method =>_ref funtion(){}
settings.handler =>_ref {}

this.method = {}; //empty object
var settings = { handler: this.method };
this.method.use = function(){}

this.method =>_ref {use: function(){}}
settings.handler =>_ref {use: function(){}}

function Namespace(){
  
    var settings = {};

    this.initialize = function(){
        document.write(settings.handler())
    };

    settings.handler = function(){return 'Handled!'};
}
new Namespace().initialize()

Collectives™ on Stack Overflow

undefined reference to object method in it's property on jQuery plugin

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