Question

我不知道如何访问插件＆＃39;选项＆＃39;对于fadeOut完成后匿名函数中的这个特定实例。

在匿名函数中，这个＆＃39;表示jquery元素，如何访问＆＃39; options.name＆＃34;？

这是插件＆＃39; plugin.js＆＃39;：

(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));

这是＆＃39; index.html＆＃39;：

<!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>

由于

Answer 1

两种方法，改变lambda函数的范围（使用bind），或创建对变量的独立引用并将其带入closure：

1：使用Bind

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

引用：

创建一个新函数，在调用时，将其关键字设置为提供的值，在任何前面有给定的参数序列在调用新函数时提供。

OR

2：关闭

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

引用：

闭包是指独立（自由）变量的函数。在简而言之，来自闭包的父函数的变量仍然存在约束来自父母的范围。

另见What is the scope of variables in JavaScript?。

访问匿名函数中的对象实例变量范围

1 个答案: