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 与嵌套函数之间的名称参数有一些冲突。

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

Answer 1

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

编辑 2：引用范围链并删除 "parameters" 范围，因为没有这样的东西

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

一个函数可以访问 2 个东西：

局部作用域：变量定义在接收到的函数和参数中。如果已定义，它们将用于代替父作用域中可用的变量。
父作用域：变量定义在函数最初定义的作用域中（经常被错误地称为"global"上下文）。参见 Scope chains*

* 函数的作用域对于在其内部定义的函数是全局的，因此父作用域包括所有上层父作用域，直到到达全局作用域。

这里有一个片段，您可以使用它来查看许多不同案例中的几个，这些案例展示了 context 如何成为变量的 "name" 的一切：


    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

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

Javascript how to avoid variable name conflicts in Functions?

javascript

dropzone

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

编辑 2：引用 范围链 并删除 "parameters" 范围，因为没有这样的东西

编辑 2：引用范围链并删除 "parameters" 范围，因为没有这样的东西