如何在没有全局变量的情况下访问此变量

How do I access this variable without a global?

本文关键字：情况下 访问 变量 全局变量      更新时间：2023-09-26

我正在尝试弄清楚如何使这项工作。

function foo(a) {
  $('#this-button').show();
}
function buttonClicked() {
  //get access to var a
}

.HTML

<button id="this-button" onclick="buttonClicked();">

这是我所拥有的简化版本，但想法是相同的。

Foo接受一个变量，然后使按钮可见。 单击按钮时，我想使用 var a 做更多事情。

所以就像等到单击按钮继续该功能一样？

似乎想不通。

谢谢

使用 jQuery 绑定单击处理程序。您可以使用 jQuery.Proxy 将a绑定为参数：

function foo(a) {
    $('#this-button').show().click( $.proxy( buttonClicked, null, a ) );
}
function buttonClicked(a) {
    // Use a here
}

并从 html 属性中删除 JavaScript：

<button id="this-button" />

EDIT，如果你只想在单击按钮后执行一些代码，你可以做这样的事情：

function foo(a) {
    // Code up here executes before the button is clicked
    $('#this-button').show().unbind( 'click.foo' ).one( 'click.foo', function ( ) {
        console.log( a );
        // This code executes after the click, and has access to a
    } );
    // Code down here executes before the button is clicked
}

使用事件处理程序内容属性。这些用户可以访问：

  • 元素中定义的属性（如果有）
  • 元素 8 的表单所有者中定义的属性（如果有）
  • 文档中定义的属性
    • 全局
  • 对象中的属性（即全局变量）。

因此，您可以将变量添加为元素的属性：

function foo(a) {
  $('#this-button').show().prop('myProp', a);
}
function buttonClicked(a) {
  alert(a);
}
foo(123);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="this-button" onclick="buttonClicked(myProp)">Click me</button>

当然，使用事件处理程序 IDL 属性或事件侦听器会是更好的做法。

这就是全局的原因，要么创建具有可以使用闭包的函数的对象。

您始终可以访问全局范围：

window.a = a;

但这通常是不好的做法。您能否重组代码，以便两个地方都有可用的代码。

即

var a = {};  //set a
$("#button").click(function(){
    // a is available here
});
foo(a);

HTML

<button id="this-button">

.JS

   function foo(a) {
      $('#this-button').show();
      $('#this-button').click(buttonClicked);
    function buttonClicked() {
      //a can be accesed here
    }
    }

放置按钮在 foo 中单击方法以获取变量 a 的访问权限

有几种不同的方法可以给这只猫蒙皮，但一种方法是使用闭包来捕获a变量：

var myButton = document.getElementById('this-button');
function foo(a) {
    myButton.addEventListener("click", buttonClicked(a));
    ...
}
function buttonClicked(a) {
    return function() {
        console.log('buttonClicked', a);
    }
}
foo('Success!');

在这种情况下，函数buttonClicked返回一个函数，该函数在由foo函数运行时捕获a的值。然后将此生成的函数传递给event handler并在触发时运行。

请看这里的小提琴：https://jsfiddle.net/ToddT/ae5h1src/

你可以使用HTML5 localstorage...

function foo(a) {
  $('#this-button').show();
  localStorage.setItem("variable_a", a); // variable in localstorage =variable_a
}
function buttonClicked() {
  localStorage.getItem('variable_a');
  //get access to var a
}

HTML5本地存储允许您在客户端浏览器上存储数据，并且您可以通过getItem()访问它...更多信息： [W3学校]， [jenkov.com]

使用闭包。

    (function(){
      var dummy_a;
      function foo(a) {
        //$('#this-button').show();
           dummy_a = a;
      }
    
      function buttonClicked() {
        //get access to var a
        alert(dummy_a)
      }
        foo(2)
        buttonClicked()
    })();

相关文章：