jQuery UI Dialog无法访问dialog()方法外部定义变量问题求助

问题根因 #

你遇到的变量未定义问题主要是三个原因导致的：

1. 语法不完整打断了作用域识别：$('form').map() 语句缺少闭合的右括号，编译/运行时会错误识别变量的作用域范围
2. 回调函数的this绑定覆盖了词法作用域：jQuery UI Dialog的按钮回调默认将this绑定到Dialog DOM元素，普通函数声明不会继承外层闭包的作用域变量，导致无法访问外部定义的三个数组常量
3. 额外注意：你的postBackModel只声明了类型未初始化，直接赋值属性也会抛出未定义错误

解决办法 #

你可以任选以下任意一种方案修复：

方案1：使用箭头函数绑定外层词法作用域（最简便） #

将Save按钮的回调改为箭头函数，箭头函数会自动继承外层的作用域，不需要修改其他逻辑，Cancel回调如果需要用this指向Dialog元素可以保持普通函数写法不变。

方案2：将变量挂载到Dialog的data属性上 #

如果你需要保持回调的普通函数写法，可以在初始化Dialog之前把三个数组存入Dialog的data缓存，在回调内部主动读取即可。

修正后的完整代码 #

const oldAnswers: Array<IUserAnswer> = new Array<IUserAnswer>();
const newAnswers: Array<IUserAnswer> = new Array<IUserAnswer>();
const updatedAnswers: Array<IUserAnswer> = new Array<IUserAnswer>();

$('form').map(function(){  
    //.....省略修改上述变量的代码
}); // 补全闭合括号

$("#dialog").dialog({
  resizable: true,
  height: "auto",
  width: 400,
  modal: true,
  buttons: {
    // 改为箭头函数继承外层作用域
    "Save": () => {
      let thisUrl: string = $('#submit').attr('formAction') as string;
      // 初始化postBackModel，避免属性赋值报错，如果AjaxPostbackModel是类则改为new AjaxPostbackModel()写法
      const postBackModel: AjaxPostbackModel = {
        NewAnswers: newAnswers,
        OldAnswers: oldAnswers,
        UpdatedAnswers: updatedAnswers
      };
      // 后续发起ajax请求逻辑
      alert('待办：发送ajax postBackModel到 ' + thisUrl);
      $("#dialog").dialog("close");
    },
    Cancel: function () {
      $(this).dialog("close");
    }
  }
});

内容的提问来源于stack exchange，提问作者user266909