前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js函数名和函数体内变量名重复引发的问题

js函数名和函数体内变量名重复引发的问题

作者头像
十月梦想
发布2018-08-29 11:32:05
2K0
发布2018-08-29 11:32:05
举报
文章被收录于专栏:十月梦想十月梦想

废话不说先看下面实例代码

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>less语言变量和混合</title>
        <link rel="stylesheet/less" href="style.less" />
        <script src="https://cdn.bootcss.com/less.js/3.0.4/less.min.js"></script>
    </head>
    <body>
        <p>
            <img src="" alt="" id="one"/>
            <p>NO.1:十月梦想</p>
        </p>
        <p>
            <img src="" alt="" id="two"/>
            <p>NO.2:pony马</p>
        </p>
        <p>
            <img src="" alt="" id="three"/>
            <p>NO.3:88888</p>
        </p>
        <h2    >列表文字详情</h2>
        <h1>less变量和混合</h1>
        <script type="text/javascript">
            var qlogo=function(num){
                    qlogo='http://q2.qlogo.cn/headimg_dl?bs='+num+'&dst_uin='+num+'&dst_uin='+num+'&;dst_uin='+num+'&spec=100&url_enc=0&referer=bu_interface&term_type=PC'
                    return qlogo;
                }
                var one=document.getElementById('one');
                var two=document.getElementById('two');
                var three=document.getElementById('three');
                one.src=qlogo(123456);
                three.src=qlogo(6688330);
                two.setAttribute('src',qlogo(10001));
                three.src=qlogo(88888);
        </script>
    </body>
</html>

在上述代码执行过程中,发现这个qlogo函数只能执行一次,多次执行则提示qlogo不是一个函数

经过一番之后,查找问题,下面详见问题发生原因解析!

  第一次正常执行没有问题,且看第二次问题分析,第二次qlogo被执行的调用了参数

代码语言:javascript
复制
three.src=qlogo(6688330)

此时函数体应该是这个样子

代码语言:javascript
复制
可以console.log(qlogo)  //打印结果http://q2.qlogo.cn/headimg_dl?bs=123456&dst_uin=123456&dst_uin=123456&;dst_uin=123456&spec=100&url_enc=0&referer=bu_interface&term_type=PC

所以下次qlogo进行传参是无效的,qlogo,此时qlogo的函数已经是一个具体的url地址

切记在函数名和函数体内的变量一定要区别开,不要遇到不知所措的坑,博主踩坑完毕!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-5-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 废话不说先看下面实例代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档