JavaScript深入之参数按值传递

更新日期: 2018-07-16阅读量: 1391标签: 参数

在《JavaScript高级程序设计》第三版 4.1.3,讲到传递参数:ECMAscript中所有函数的参数都是按值传递


按值传递

也就是,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样

var value = 1;
function foo(v) {
    v = 2;
    console.log(v); //2
}
foo(value);
console.log(value) // 1

当传递value给函数foo的时候,相当于拷贝一份value给foo假设拷贝的那份叫v,函数中修改的都是v,不会一项原来的value值


引用传递

按值传递里面的拷贝虽然好理解 但是当值是一个复杂的数据结构的时候,拷贝就会产生性能问题

所以还有另外的传递方式叫做按引用传递

所谓按引用传递,就是传递对象的引用,函数内部对参数的任何改变都会影响该对象的值,因为两者引用的是同一个对象

var obj = {
      value : 1
    };
    let foo = (o)=> {
      o.value = 2;
      console.log(o.value);
    }
    foo(obj)
    console.log(obj.value);

这里产生了一个疑问?红宝书都说了 ECMAScript 中所有函数的参数都是按值传递的,这怎么能按"引用传递"成功呢?


我们看第三个例子

var obj = {
    value: 1
};
function foo(o) {
    o = 2;
    console.log(o); //2
}
foo(obj);
console.log(obj.value) // 1

如果 JavaScript 采用的是引用传递,外层的值也会被修改呐,这怎么又没被改呢?所以真的不是引用传递吗?

这就要讲到其实还有第三种传递方式,叫按共享传递。而共享传递是指,在传递对象的时候,传递对象的引用的副本。

关键点:

运算符=就是创建或修改变量在内存中的指向.
初始化变量时为创建,重新赋值即为修改.

为了解释上面的共享传递 这里在看一个例子摸清楚内存中的分布

var a = {b: 1};// a = {b: 1}
var c = a;// c = {b: 1}
a = 2;// 重新赋值a
console.log(c);// {b: 1}
  1. 创建变量a指向对象{b:1}
  2. 创建变量c指向对象{b:1}
  3. a又重新指向常量2

但是这时候c依旧指向对象{b:1}

这样我们回头看第一个例子

var value = 1;
function foo() {
    var v = value; // 创建变量v指向value所指向的值
    v = 2;// v重新指向另外的值
    console.log(v); //2
}
foo(value);
console.log(value) // 1,value从始至终都未改变指向.

现在吧第一个例子修改成对象

var a = {b: 1};// a = {b: 1}
var c = a;// c = {b: 1}
a.b = 2;// 重新赋值对象a中的属性b
console.log(c);// {b: 2}
常量区
a,c[object]
b1

执行完a.b = 2后:

常量区
a,c[]object
b2

a,c从始至终都没有改变指向,变的是b而已

现在再看第二个例子

var obj = {
   value: 1
};
function foo() {
   var o = obj;
   o.value = 2;// 变量value改变了指向,而o并未改变
   console.log(o.value); //2
}
foo(obj);
console.log(obj.value) // 2

所以 js始终是按值传递,在这里称他为共享传递。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/927

目前为止全网最全的 SpringBoot 参数传递方案

开发这么多年,肯定还有不少小伙伴搞不清各种类型的参数是如何传递的,很多同学都是拿来即用,复制粘贴一把撸,遇到问题还是一脸懵逼。学习参数传递的正确姿势,先说怎么做,再说为什么

jquery ajax error函数和及其参数详细说明

一般error函数返回的参数有三个: function(jqXHR jqXHR, String textStatus, String errorThrown)。常见调用代码如下:这里对这三个参数做详细说明。

vue路由传参页面刷新参数丢失问题解决方案

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:

掌握JS函数中的几种参数形式

函数是一段结合在一起执行特定任务的代码,函数一般使用参数与外部进行交互。要编写简洁高效的JS代码,必须掌握函数参数。在本文中,会使用一些有趣的例子来解释 JS 必须有效地处理函数参数的所有特性。

Less参数混合

* 参数可以使用逗号或分号分隔。 (建议使用分号,因为逗号具有双重含义:可以将其解释为mixin参数分隔符或者是css列表分隔符);使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。

用正则表达式获取URL中的查询参数

url中的所有查询参数可以通过 window.location.search 字段获取,以字符串的形式返回。并有固定的格式 ?param1=value1&param2=value2···,所以可以正则表达式匹配。分析下需要匹配的格式:

调用函数时到底可以传多少个参数

以下通过一个例子来检查在调用函数时会有哪些变量和参数,在这里可以在浏览器的“无痕窗口”中直接运行这段代码(无痕窗口能避免浏览器插件影响运行)

JavaScript参数传递中值和引用的一种理解

值(value)和引用(reference)是各种编程语言老生常谈的话题,js也不例外。我将剖析一个例子的实际运行过程,跟大家分享我对js参数传递中的值和引用的理解。

Vue页面传参方式Query和Params

query需要和配合 path 属性使用,携带参数会拼接在请求路径后,效果同 Get 请求方式;params需要配合 name 属性使用,参数不会携带在访问路径后

vue中监听路由参数的变化

在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新。getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!