函数加深理解（onclick为例）

最新推荐文章于 2023-12-28 10:27:55 发布

VoiceU

最新推荐文章于 2023-12-28 10:27:55 发布

阅读量401

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Voiceu/article/details/110232124

版权

	//让每个button点击时都显示对应的数字
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <script>
        var button = document.getElementsByTagName("button");
        for (var i = 0; i < button.length; i++) {
            var btn = button[i];
            btn.onclick = function () {
                alert('第' + (i + 1) + '个');
            };
        };
    </script>

上面错误的的代码会让每个button都返回第4个
因为，function在执行前，循环已经走完了，此时i=3，当点击button的时候，i+1返回4

知道错了，还要知道哪里错了，知道对了，也要知道和错了的代码的区别在哪

梳理错误代码流程如下
首先明确getElementsByTagName返回的是类数组，因为是elements，复数，必然不是一个对象

其次在当时所想的 var btn = button[i];该行，每次循环都会给btn重新复制，那么只会在最后一次赋值完成后，给一个定值给btn，无法达到点击不同button显示不同的效果，

但是正确的代码中同样是赋值，只是加了一个index属性就可以

难道我var的btn也是数组对象吗，因为自己试验的typeof btn返回的是object，无法得知是单个对象还是数组对象。很明显这种猜测是错误的，button[i]赋值到btn上，明显是一个对象，当时是没头绪，疯狂用排除法挨个试才会这样想，以此记录提醒自己

以下为正确代码

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <script>
        var button = document.getElementsByTagName("button");
        for (var i = 0; i < button.length; i++) {
            var btn = button[i];
            btn.index = i;
            btn.onclick = function () {
                alert('第' + (this.index + 1) + '个');
            };
        };
    </script>
</body>

两者之间就只是加了一个index属性，最后用index代替i
有两点需要注意，1、变量的作用域；2、对象的内存关系（堆栈），最好自己画图

对于第一点明确，此时i为全局变量，只有在函数中才会当做局部变量，此时在for条件中，也是全局变量，所以当for中执行完后，i=3，此时再点击button执行，那么在错误代码中，i+1=4;这点当时想的没错

对于第二点，当时误以为给btn添加function，点击的时候是运行的btn，所以每次覆盖btn后只会有最后一个生效，产生疑惑为什么1和2button还能点，（以为像var一个变量a，每次给a赋值新的值，最后输出的就是最后赋值的那个数）

最后在多方求证下得知是自己对于内存关系的知识，掌握不牢，

实际内存关系为
错误的代码：
在这里插入图片描述
正确的代码：

最终点击的时候运行的每一个加入了function的button[i]，而不是每次被改写的btn
因为index固定了数值，而i每次没有固定，所以才会有不同的效果

就跟以下代码的内存关系相似

    <script>
        var a = {
            name : '张三'
        }
        var b = a;
         b.name = '李四';
        
        alert(a.name)
    </script>

VoiceU

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
函数加深理解（onclick为例）

//让每个button点击时都显示对应的数字 <button>1</button> <button>2</button> <button>3</button> <script> var button = document.getElementsByTagName("button"); for (var i = 0; i < button.length; .
复制链接

扫一扫