zoukankan      html  css  js  c++  java
  • JavaScript——之对象参数的引用传递

    今天碰到一个问题,怎样把参数变更影响到函数外部,如:

    <script>
        var myname = "wood";
        A(myname);
        document.write(myname);
    
        function A(n) {
            n = "Yao";
        }
    </script>

    输出结果还是wood,说明当myname传入A函数后,在函数体内,相当于有一个myname的副本,这个副本的值等于myname,之后在函数体内对其做的操作是在这个副本上进行的。

    但情况有所不同,当传入的参数是数组对象时,在函数体内对参数所做的更改会反映到原变量上。

    <script>
        var myname = ["wood"];
        A(myname);
        document.write(myname[0]);
    
        function A(n) {
            n[0] = "Yao";
        }
    </script>

    可以看出,上面代码中已经把friut数组的第一个元素更改了。

    下面是关于对象的例子:

    <script>
        var myname = {name1:"wood"};
        A(myname);
        document.write(myname.name1);
    
        function A(n) {
            n.name1 = "Yao";
        }
    </script>

    可以很明显地看到函数体内对参数的改动影响到了原来的变量,这与通常情况下的传参有质的区别了。需要特别注意。

    But,当在函数体内对传入的数组或对象赋值时,这个更改不会反映到函数体外的原变量身上!

    请看:

    <script>
        var myname = {name1:"wood"};
        A(myname);
        document.write(myname.name1);
    
        function A(n) {
            n = {name1:"Yao"};
        }
    </script>

    按照上面函数内部的更改会反映到原变量的理论,你肯定觉得执行完A()后myname变量的name1属性的值已经变成'Yao'了吧。但结果让人有点难以接受。

    原因在于,当在函数体内使用赋值操作时,系统就创建了一个变量名为p的变量。这个p是函数内部的变量,对它进行赋值当然只在函数体内起作用,外面的myname还是原来的myname。

    这一步与原来代码的操作差别仅在于在函数体内是对参数赋新值呢还是对参数的属性或数组的元素进行更改


    下面我们用传递对象的方式,重新实现一个时钟数字格式化输出的例子:

    <script>
        var mytime = self.setInterval(function() {
            getTime();
        }, 1000);
        //alert("ok");
        function getTime() {
            var timer = new Date();
            var t = {
                    h: timer.getHours(),
                    m: timer.getMinutes(),
                    s: timer.getSeconds()
                }
                //将时间对象t,传入函数checkTime(),直接在checkTime()中改变对象中的值。
                //而无需再去接收返回值再赋值
            checkTime(t);
            document.getElementById("timer").innerHTML = t.h + ":" + t.m + ":" + t.s;
        }
    
        function checkTime(i) {
            if (i.h < 10) {
                i.h = "0" + i.h;
            }
            if (i.m < 10) {
                i.m = "0" + i.m;
            }
            if (i.s < 10) {
                i.s = "0" + i.s;
            }
        }
    </script>

    例子使用setInterval()函数定时调用刷新事件,也可以用setTimeout()在getTime()中递归调用来实现。

  • 相关阅读:
    前端框架framework和库library的一点区别和记录
    DButils实现数据库表下划线转bean中驼峰格式
    layui内部使用jQuery
    Object...与Object[]使用的一点区别和记录
    SSM框架整合系列——第一步
    $.ajax的async设置true和false的区别一点笔记
    idea使用破解版mybatis plugin插件失败,idea打不开的解决方案
    ECharts在柱状图的柱子上方显示数量的方法
    Echarts使用Ajax异步获得数据的前端json格式转化问题
    Ajax的post表单,不在url后接一大串参数键值对的方法
  • 原文地址:https://www.cnblogs.com/woodk/p/5128302.html
Copyright © 2011-2022 走看看