access object instance variables scope within anonymous function

Question

I don't know how to access the plugin 'options' for this specific instance within the anonymous function after fadeOut completes.

Within the anonymous function 'this' represents the jquery element, how do I access 'options.name"?

This is the plugin 'plugin.js':

(function ($, window, document, undefined) {

    'use strict';

    var plugin = 'box',
        defaults = {
            wight: 26,
            color: 'white'
        };

    function Plugin(element, options) {
        this.plugin = plugin;

        this.element = element;

        this.options = $.extend({}, defaults, options);

        $(this.element).fadeOut(1000, function () {
            console.log(this.options.name);          // <- how do I access options.name?
        });
    }

    Plugin.prototype = {
        f: function () {
            console.log(this.options.name);
        }
    };

    $.fn[plugin] = function (argument) {
        var method = argument,
            options = argument;

        return this.each(function () {
            if (!$.data(this, 'plugin_' + plugin)) {
                $.data(this, 'plugin_' + plugin, new Plugin(this, options));
            } else if ($.isFunction(Plugin.prototype[method])) {
                $.data(this, 'plugin_' + plugin)[method](Array.prototype.slice.call(arguments, 1));
            } else {
                console.error('unknown method ' + method);
            }
        });
    };
}(jQuery, window, document));

This is 'index.html':

<!DOCTYPE html>
<html class="no-overflow">
    <head>
        <meta charset="UTF-8">

        <title>Table example</title>

        <!-- jqwidgets styles -->
        <style type="text/css">

        </style>

        <!-- jquery framework -->
        <script type="text/javascript" src="../lib-scripts/jquery-1.10.2.min.js"></script>
        <!-- script -->
        <script type="text/javascript" src="plugin.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#id-a').box({ name: 'aaaa' });
                $('#id-b').box({ name: 'bbbb' });
                $('#id-a').box('f');
                $('#id-b').box('f');
            });
        </script>
    </head>

    <body>
        <div id="id-a"></div>
        <div id="id-b"></div>
    </body>
</html>

Thanks

score 3 · Accepted Answer · edited May 23 '17 at 11:45

Two ways, change the scope of the lambda function (with bind), or create an independent reference to the variable and bring it into the closure:

1: With Bind

$(this.element).fadeOut(1000, function () {
    console.log(this.options.name);          // <- how do I access options.name?
}.bind(this));

Quote:

Creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

OR

2: As a Closure

var that = this;
$(this.element).fadeOut(1000, function () {
    console.log(that.options.name);          // <- how do I access options.name?
});

Quote:

Closures are functions that refer to independent (free) variables. In short, variables from the parent function of the closure remain bound from the parent's scope.

See also What is the scope of variables in JavaScript?.

access object instance variables scope within anonymous function

1 Answers1