JavaScript中局部变量与全局变量的交互-CSDN博客

在JavaScript中，当需要在函数内部根据状态改变按钮行为时，遇到了局部变量改变全局变量的问题。通过示例代码展示了如何创建一个changeState()函数，并探讨了由于变量作用域导致的状态无法正确更新的问题。提出将状态变量改为对象属性来解决这个问题，虽然这增加了变量声明的复杂性，但提高了代码复用效率。期待更多关于此问题的优化建议。

<body>
       <button class="bt1">按钮1</button>
       <button class="bt2">按钮2</button>
       <button class="bt3">按钮3</button>
 </body>

这里是三个按钮，点击按钮1会做一些事，再次点击又会做另外一些事（比如打开关闭）

由于在同一个按钮上绑定时间，这个时候就需要有个标志，用于判断当前状态（是开还是关？）

代码可以这么写：

<pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'Consolas';font-size:16pt;">

$(document).ready(function(){ var state1 = 1, state2 = 1, state3 = 1; $(".bt1").click(function(){ if(state1 == 1){ //doSomething state1 = 0; }else{ //doSomething state1 = 1; } }); $(".bt2").click(function(){ if(state2 == 1){ //doSomething state2 = 0; }else{ //doSomething state2 = 1; } }); $(".bt3").click(function(){ if(state3 == 1){ //doSomething state3 = 0; }else{ //doSomething state3 = 1; } });});

这么写功能上是没有问题，但是显然代码冗余量太大

于是想着写个函数封装一下重复代码，每次写的时候调用一下函数就行了

var state1 = 1,
    state2 = 1,
    state3 = 1;
$(document).ready(function(){
    $(".bt1").click(function(){
        changeState(state1);
    });
});

function changeState(state){
    if(state == 1){
        //doSomething
        state = 0;
        console.log(state);
    }else{
        //doSomething
        state = 1;
        console.log(state);
    }
}

但是并不是我想的那样，全局变量state1的值并不会被改变，原来这是因为state1只是把值“1”传递进去了

函数changeState（）；中的state是另外的局部变量，这里只是改变了state的值，state1值并不会改变

所以无论你怎么点，都只会输出“0”，永远不会输出‘1’，因为你传值进去永远都是1

问题就是局部变量改变全局变量了

下面是我想到的一种方法：

把状态变量声明为对象，对象里包含键值对，传参时传递对象，这样就不是只传值，而是传址（暂且这么称呼）

（虽然JS里面都是传值，没有传址概念）

var state1 = {
    state : 1
};
$(document).ready(function(){
    $(".bt1").click(function(){
        changeState(state1);
    });
});

function changeState(state){
    if(state.state == 1){
        //doSomething
        state.state = 0;
        console.log(state.state);
    }else{
        //doSomething
        state.state = 1;
        console.log(state.state);
    }
}

这样就可以达到想要的效果

但是这样声明变量又会变得比较麻烦，不过相对于大量使用同一代码片又要高效