Javascript如何避免函数中的变量名冲突？

Question

我在使用 dropzone 时发现了一些奇怪的东西：

这是我的掉落：

<script type="text/javascript">

var CountFiles = 0;


$(document).ready(function () {

    Dropzone.autoDiscover = false;

    var new_file;

    const Drop1 = new Dropzone("div#myPrincipalDropzone", {
        url: "/Article/UploadFiles",

        paramName: "file",
        maxFiles: 1,
        maxFilesize: 1200,
        maxFileHeight: 840,
        maxFileWidth: 840,
        acceptedFiles: ".png,.jpg",
        addRemoveLinks: true,
        parallelUploads: 1,
        renameFile: function (file) {
            let newname = new Date().getTime() + '_';
            console.log("Nombre en RenameFile:" + newname);
            file.name = newname;
            console.log("Asigno al file el nombre:" + file.name);
            new_file = new File([file], newname + file.name);
            console.log(new_file.name);
            return new_file;
        },

        init: function (new_file) {

我注意到我在 return 语句中的变量“new_file”的值为“123847123_Filename.ext” 但是，当我尝试使用该变量调用另一个方法或函数时，我收到 new_file 作为“Filename.ext”，失去了我的旧值。

在 google 上搜索我发现 javascript 与嵌套函数之间的名称参数有一些冲突。

有办法解决这个问题吗？我需要在多个函数/方法调用中使用我的旧值。

Answer 1

编辑 1：纠正上下文和范围之间的混淆

编辑 2：对 范围链 的引用并删除“参数”范围，因为没有这样的东西

嗯，之所以会这样，是因为Closures

一个函数可以访问两件事：

1. 局部范围：函数定义内的变量和接收的参数。如果已定义，它们将用于代替父作用域中可用的变量。
2. 父范围：变量定义在函数最初定义的范围内（通常被错误地称为“全局”上下文）。见Scope chains*

* 一个函数的作用域对于它内部定义的函数来说是全局的，因此父函数的作用域包括所有上父函数的作用域，直到你到达全局作用域。

这是一个 sn-p，您可以使用它来查看许多不同案例中的一些案例，这些案例展示了 context 在变量“名称”方面的作用：

    const x = 'GLOBAL X VALUE';
    function A() {
      // A is referring to X within its own context
      console.log(`The value of x in A is => ${this.x}`);
      console.log(`The value of y in A is => ${this.y}`);
    }

    function B() {
      // B is referring to x within the context in which it was defined
      console.log(`The value of x in B is => ${x}`);
    }

    function C() {
      // C is referring to x within the context in which it was defined
      // That's why it also prints the value of the "global" context even if you
      // call it within a context that has a value with the same name
      console.log(`The value of x in C is => ${x}`);
    }

    function D(x) {
      console.log(`The value of x in D is => ${x}`);
      C();
    }

    function F() {
      // A is going to have access to the context of F, but it will not have access
      // to the global context
      this.y = "the other value";
      A.bind(this)();
      console.log(`The value of x in F is => ${x}`);
    }

    function G(x) {
      this.x = "HMMMM";
      console.log(`The value of local x in G is => ${this.x}`);
      console.log(`The value of param x in G is => ${x}`);
    }

    A(); // the value of x and y will be undefined
    B(); // the value of x will be the global context
    D("Parameter x value"); // the value of x will be the one passed as a parameter
    F();
    G("Parameter x value"); // the parameter and the local context are two different things

this* it's dangerous to go alone, take this documentation