美文网首页我爱编程前端乱弹99日
前端乱弹99日之传值还是传引用

前端乱弹99日之传值还是传引用

作者: 业余马拉松选手 | 来源:发表于2018-05-27 22:34 被阅读9次

    最近工作稍有变化,从一个后端狗,在慢慢过渡成为一个“前端攻城狮”。目前进化不太完全,之前这个系列也是有一搭没一搭的,玩票性质更多,但今后就要靠这个吃饭了,那么就要更好的写些东西了呢

    但短时间内,自己的思考角度还是后端的思路,前端的基本功还是太弱,要学和要补的东西好多,一个30+的程序猿,一直在路上。

    好,言归正传,今天再“弹”一个略显老套的问题,传值还是传引用,从“谭老师”入门的“C程序员”们对此应该会更有感触吧,哈哈

    这里就先给个结论吧
    1、如果是原始类型,就是传值,即会拷贝值;
    2、如果是对象类型,就是传引用,对象的名称其实就是一个指针的名称;

    那么下面就结合例子来说说看

    首先要明确下,什么是原始类型:ECMAScript 有 5 种原始类型(primitive type),即 Undefined、Null、Boolean、Number 和 String。

    这里我们就以Number型来举例:

    var a = 100;
    var b = a;
    console.log(a);
    console.log(b);
    a = 99;
    console.log(a);
    console.log(b);
    

    输出的结果将是:

    100
    100
    99
    100

    其中 b = a这句话,实际是把a的值拷贝了一份,然后由b指向的。【在JavaScript里,其实都是对象哦~】

    如果按照我们一般的思维来看,这个逻辑还是蛮顺的,对吧?

    那么接着我们看下传引用的例子

    var a = {"id":"100"};
    var b = a;
    console.log(a);
    console.log(b);
    a.id = 99;
    console.log(a);
    console.log(b);
    

    这段代码的输出将是:

    {id: "100"}
    {id: "100"}
    {id: "99"}
    {id: "99"}
    

    这里,b = a这句话,是相当于让b也指向a所指向的内容【额,这句话是有点绕,如果不太理解的话,可以多读几遍,哈哈】

    所以,当我们通过a去修改指向对象的内容的时候,然后通过b去访问的看到也变化了,因为这里a和b就是指向同一个对象的,这种就被成为传引用。

    那么不仅是在两个变量之间有“赋值”传引用的做法,在函数中也有哦,请看下面这个例子:

    function changeObject(obj){
      obj.id = 101;
    }
    var a = {"id":"100"};
    var b = a;
    console.log(a);
    console.log(b);
    changeObject(a);
    console.log(a);
    console.log(b);
    

    这里,我们在函数changeObject里面是修改了传递参数对象里的值,在调用的时候,就是修改a所指向的对象,这里也是传引用的方式,所以调用了这个函数之后,b的值也改变了。

    至此,如果你有其他语言的基础来看,还是没有太奇怪的地方,那么最后我们看下这个例子

    var a = {"id":"100"};
    var b = a;
    console.log(a);
    console.log(b);
    a = {"id":"60"};
    console.log(a);
    console.log(b);
    

    上面这段代码的,结果如下:

    {id: "100"}
    {id: "100"}
    {id: "60"}
    {id: "100"}
    

    这段有时会让人困惑的点,不是说对象是传引用嘛?为什么这次修改了a的值,b并变化?这是因为在JavaScript里的=【赋值】符号,直接赋值给一个新的对象的时候,会重新开辟一段内存空间,也就是说,在执行了a = {"id":"60"};这句话之后,a和b已经是指向两端不同的内存区域了,这样来看,也就好理解了。

    嗯,今天又完成了个基本概念的学习和理解,要加快速度了呢!

    相关文章

      网友评论

        本文标题:前端乱弹99日之传值还是传引用

        本文链接:https://www.haomeiwen.com/subject/gxvijftx.html