如何绕过javascript变量范围

How to get around javascript variable scope

本文关键字：范围 变量 javascript 何绕过      更新时间：2023-09-26

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

$('#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);
});

如果你需要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);
    }); 
});

只需在"单击范围"之前进行声明即可。 

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);
});
尝试在

函数之外进行delacare。

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);
});

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

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);
});
您可以通过在

函数作用域之外声明变量来创建全局变量：

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
相关文章：