从外部访问匿名函数内部的变量

access variable inside anonymous function from outside

本文关键字：内部 变量 函数 访问 从外部      更新时间：2023-09-26

jquery ui对话框小部件被封装在一个匿名函数中（就像所有其他小部件一样）。

在这个函数中，有一个声明为sizeRelatedOptions的变量。我需要从包装闭包的外部为该对象添加一个键。实现这一目标的最佳方式是什么？

(function( $, undefined ) {
    var sizeRelatedOptions = {
        buttons: true,
        height: true,
        //etc
    }
    $.widget( "ui.dialog", {
        //widget code
    });
}( jQuery ) );

编辑#1：以上代码是jQuery ui 的源代码

编辑#2：我现在明白了，我不能简单地访问那个变量。所以我必须解决这个问题。因此，这里有一些关于我为什么需要这个的更多信息：

我正在扩展jQueryui的对话框小部件，以添加另一个按钮窗格。为了在将窗格添加到小部件后使小部件自行调整大小，我想在sizeRelatedOption中添加一个选项。（这就是这个问题最初的内容。）因为对话框小部件的_options功能会检查选项是否作为键存在于sizeRelatedOption中。在这种情况下，它调用_size函数来调整小部件的大小。

希望我能把自己说清楚一点。

如果不直接修改源代码，你就无法做到这一点，但这不是你应该考虑的选项，因为这是一种非常糟糕的做法，原因有很多。

变量对该作用域是私有的，除非对象使其可以公开访问，否则您的代码必须在声明变量访问它的作用域的相同作用域或子作用域中运行。

但是，如果您试图更改一些配置选项，那么小部件已经为此提供了一个API。

例如，

$('#dialog').dialog({
    height: 500,
    width: 500
});

编辑：如果你能给我们更多关于你为什么要努力实现这一目标的细节，我们可能会给你其他选择。

将窗口对象传递给函数，然后可以为其附加方法和属性。

(function( $, window, undefined ) {
    window.sizeRelatedOptions = {
        buttons: true,
        height: true,
        //etc
    }
    $.widget( "ui.dialog", {
        //widget code
    });
}( jQuery, window ) );

您应该在全局作用域中声明此变量。您可以使用$.extend为现有对象添加属性。

window.sizeRelatedOptions  = {};
(function( $, undefined ) {
    $.extend(sizeRelatedOptions ,  {
        buttons: true,
        height: true,
        //etc
    });
    $.widget( "ui.dialog", {
        //widget code
    });
}( jQuery ) );

var accessor = (function( $, undefined ) {
    var sizeRelatedOptions = {
        buttons: true,
        height: true,
        //etc
    }
    $.widget( "ui.dialog", {
        //widget code
    });
    return {
       getSizeRelatedOptions: function () { return sizeRelatedOptions; }
    }
}( jQuery ) );
accessor.getSizeRelatedOptions();

我认为如果不修改小部件的源代码，这是不可能的。

您可以将其设置为全局变量：

var window.sizeRelatedOptions = { // now it's a global

不过，最好让匿名函数返回变量：

var myvar = (function( $, undefined ) {
  var sizeRelatedOptions = {
    buttons: true,
    height: true,
    //etc
  };
  var returnvar = sizeRelatedOptions; // in case sizeRelatedOptions is modified
  $.widget( "ui.dialog", {
      //widget code
  });
  return returnvar;
}( jQuery ) ); // now myvar contains the same data
相关文章：