JS局部变量改变全局变量

来源：互联网发布：定格动画软件app 编辑：程序博客网时间：2024/06/05 00:07

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

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

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

有不对的地方还望指正

更好的办法还希望大家多多指教

1 0