如何绕过 javascript 变量范围

Question

好的，所以我的网页上有 div，单击时会分配一个变量。当单击另一个按钮将它们包含在我发送的电子邮件中时，我需要稍后访问这些变量。我的 var mailbody 可以工作，因为我认为它是一个局部变量。但是，如果我用 frameColour 替换它，那么它将无法工作，因为它不是全局的。我该如何解决这个问题？

$('#purple').click (function() {
            $(".border").css("fill", "#763d81");
            var frameColour = "purple";
    });

$("#button").click (function() {
    var mailbody = "hello world.";
    window.open('mailto:sales@beauxcadeaux.co.uk?subject=My Frame&body=' + mailbody);
});

Answer 1

如果您需要 frameColour 在其他功能中可用，则必须将其范围向上移动；为了防止将其添加到全局范围，您可以将相关函数包装在另一个函数中，即：

jQuery(function($) {
    var frameColour;

    $('#purple').click (function() {
        $(".border").css("fill", "#763d81");
        frameColour = "purple";
    });

    $("#button").click (function() {
        var mailbody = "hello world.";
        // you can use frameColour here
        window.open('mailto:sales@beauxcadeaux.co.uk?subject=My Frame&body=' + mail body);
    }); 
});

Answer 2

只需在 "click scope" 之前声明即可。

var frameColour;

$('#purple').click (function() {
            $(".border").css("fill", "#763d81");
             frameColour = "purple";
    });

$("#button").click (function() {
    var mailbody = "hello world.";
    window.open('mailto:sales@beauxcadeaux.co.uk?subject=My Frame&body=' + mailbody);
});

Answer 3

尝试在函数外删除它。

var frameColour    
$('#purple').click (function() {
        $(".border").css("fill", "#763d81");
        frameColour = "purple";
});

$("#button").click (function() {
    var mailbody = "hello world.";
    window.open('mailto:sales@beauxcadeaux.co.uk?subject=MyFrame&body=' + mailbody);
});

Answer 4

在更高范围内定义变量，然后从函数内部更改值。

var frameColour;
$('#purple').click (function() {
            $(".border").css("fill", "#763d81");
            frameColour = "purple";
});

$("#button").click (function() {
    var mailbody = "hello world.";
    window.open('mailto:sales@beauxcadeaux.co.uk?subject=My Frame&body=' + mailbody);
});

Answer 5

您可以通过在函数范围之外声明变量来创建全局变量：

var global_frameColour = "purple";  

$('#purple').click (function() {
   $(".border").css("fill", "#763d81");
   global_frameColour = "purple";
});

$("#button").click (function() {
    var mailbody = "hello world.";

    mailbody += global_frameColour;
    window.open('mailto:sales@beauxcadeaux.co.uk?subject=My Frame&body=' + mailbody);
});

如果您不想让您的变量成为全局变量，您可以创建一个自动执行的包装器。此处声明的任何变量（使用 var 关键字）将仅限于匿名函数。见下文

(function (){ // declare an anonymous function

    var scoped_frameColour = "purple";  

    $('#purple').click (function() {
      $(".border").css("fill", "#763d81");
      scoped_frameColour = "purple";
    });

    $("#button").click (function() {
      var mailbody = "hello world.";

      mailbody += scoped_frameColour;
      window.open('mailto:sales@beauxcadeaux.co.uk?subject=My Frame&body=' + mailbody);
   });

})(); // this line is important as it executes the anon function

console.log(scoped_frameColour); // undefined; out of scope

如何绕过 javascript 变量范围

How to get around javascript variable scope

javascript

scope