在 javascript 的函数中更改对象的属性值不能正常工作

Question

我有两个模块，在第一个模块中我声明了一个对象，因为我知道原语在 java 脚本中通过值传递，对象通过引用传递。我想从请求中获取响应状态，并且我将对象传递为一个引用，这样我就可以修改它的属性。问题是它没有做任何事情。最终值将是相同的。

//this code is in a different module from the other one
var variableToBeChanged = { something : "Initial value" };
anotherModule.changeValue(variableToBeChanged);
alert(variableToBeChanged.something);

//and in the other module I have a $.ajax and I want to get the response status(ex. 200)

//the code is sth like this:

function AnotherModule(ajax){

  function changeValue(variableToBeChanged){
    ...
    ...
    ...
    $.ajax({
      ...
      ...
      ...
      success: function(data,xhr){
          variableTobechanged.something = xhr.status;
      }
    });
  }

}

最后它将显示：“初始值”而不是 200 或其他任何内容。 我在这里做错了什么？

Answer 1

在 javascript 中传递了对对象的引用副本。

这意味着对对象所做的任何更改都将在函数执行完成后对您可见。

由于 javascript 是异步的，因此 alert(variableToBeChanged.something) 这行代码会在你的函数返回之前执行。因此，您会看到 old value 。您必须使用回调或承诺同步工作。

请参考这个问题javascript pass object as reference。它很好地解释了这个概念。

Answer 2

ajax 调用是异步，因此在修改变量之前调用警报。您可以像这样在 ES6 中使用 promise 来确保它在 ajax 调用完成后执行。

    new Promise((resolve) =>{ 
             anotherModule.changeValue(variableToBeChanged);
             resolve();
        }).then((res) =>{
            alert(variableToBeChanged.something);
        }).catch((error) =>{
            alert(error);
    });