一、概念

  我们需了解什么是按值传递(call by value),什么是按引用传递(call by reference)。在计算机科学里,这个部分叫求值策略(Evaluation Strategy)。它决定变量之间、函数调用时实参和形参之间值是如何传递的。

按值传递 VS. 按引用传递

  按值传递(call by value)是最常用的求值策略:函数的形参是被调用时所传实参的副本。修改形参的值并不会影响实参。

  按引用传递(call by reference)时,函数的形参接收实参的隐式引用,而不再是副本。这意味着函数形参的值如果被修改,实参也会被修改。同时两者指向相同的值。

  按引用传递会使函数调用的追踪更加困难,有时也会引起一些微妙的BUG。

  按值传递由于每次都需要克隆副本,对一些复杂类型,性能较低。两种传值方式都有各自的问题。

  可能很多人都是做后端的,所有会想到“引用传递”,然而实际上却不是,导致了问题的产生。

按共享传递 call by sharing

  总的来讲Stack Overflow上Community Wiki的解答,对于传递到函数参数的对象类型,如果直接改变了拷贝的引用,那是不会影响到原来的那个对象;如果是通过拷贝的引用,去进行内部的值的操作,那么就会改变到原来的对象的。

  以下是个很好的例子

function changeStuff(state1, state2)
{
state1.item = 'changed';
state2 = {item: "changed"};
} var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"}; changeStuff(obj1, obj2);
console.log(obj1.item); // obj1.item becomes 'changed'
console.log(obj2.item); // obj2.item is still 'unchanged'

二、实例解析

探究JS值的传递方式

JS的基本类型,是按值传递的。

var a = 1;
function foo(x) {
x = 2;
}
foo(a);
console.log(a); // 仍为1, 未受x = 2赋值所影响

再来看对象:

var obj = {x : 1};
function foo(o) {
o.x = 3;
}
foo(obj);
console.log(obj.x); // 3, 被修改了!

说明o和obj是同一个对象,o不是obj的副本。所以不是按值传递。 但这样是否说明JS的对象是按引用传递的呢?

我们再看下面的例子:

var obj = {x : 1};
function foo(o) {
o = 100;
}
foo(obj);
console.log(obj.x); // 仍然是1, obj并未被修改为100.

  如果是按引用传递,修改形参o的值,应该影响到实参才对。但这里修改o的值并未影响obj。 因此JS中的对象并不是按引用传递。那么究竟对象的值在JS中如何传递的呢?

按共享传递 call by sharing

  准确的说,JS中的基本类型按值传递,对象类型按共享传递的(call by sharing,也叫按对象传递、按对象共享传递)。该求值策略被用于Python、Java、Ruby、JS等多种语言。

  该策略的重点是:调用函数传参时,函数接受对象实参引用的副本(既不是按值传递的对象副本,也不是按引用传递的隐式引用)。

  它和按引用传递的不同在于:在共享传递中对函数形参的赋值,不会影响实参的值。

  如下面例子中,不可以通过修改形参o的值,来修改obj的值。

var obj = {x : 1};
function foo(o) {
o = 100;
}
foo(obj);
console.log(obj.x); // 仍然是1, obj并未被修改为100.

  然而,虽然引用是副本,引用的对象是相同的。它们共享相同的对象,所以修改形参对象的属性值,也会影响到实参的属性值。

var obj = {x : 1};
function foo(o) {
o.x = 3;
}
foo(obj);
console.log(obj.x); // 3, 被修改了!

  对于对象类型,由于对象是可变(mutable)的,修改对象本身会影响到共享这个对象的引用和引用副本。而对于基本类型,由于它们都是不可变的(immutable),按共享传递与按值传递(call by value)没有任何区别,所以说JS基本类型既符合按值传递,也符合按共享传递。

var a = 1; // 1是number类型,不可变 var b = a; b = 6;

  据按共享传递的求值策略,a和b是两个不同的引用(b是a的引用副本),但引用相同的值。由于这里的基本类型数字1不可变,所以这里说按值传递、按共享传递没有任何区别。

基本类型的不可变(immutable)性质

  基本类型是不可变的(immutable),只有对象是可变的(mutable).

  例如数字值100, 布尔值true, false,修改这些值(例如把1变成3, 把true变成100)并没有什么意义。

  比较容易误解的,是JS中的string。有时我们会尝试“改变”字符串的内容,但在JS中,任何看似对string值的”修改”操作,实际都是创建新的string值。

var str = "abc";
str[0]; // "a"
str[0] = "d";
str; // 仍然是"abc";赋值是无效的。没有任何办法修改字符串的内容

  而对象就不一样了,对象是可变的。

var obj = {x : 0};
obj.x = 100;
var o = obj;
o.x = 1;
obj.x; // 1, 被修改
o = true;
obj.x; // 1, 不会因o = true改变

  这里定义变量obj,值是object,然后设置obj.x属性的值为100。而后定义另一个变量o,值仍然是这个object对象,此时obj和o两个变量的值指向同一个对象(共享同一个对象的引用)。所以修改对象的内容,对obj和o都有影响。但对象并非按引用传递,通过o = true修改了o的值,不会影响obj。

  https://developer.mozilla.org/zh-CN/docs/Glossary/Primitive 引

  基本类型(基本数值、基本数据类型)是指非 对象 并且无方法的数据。在 JavaScript 中,共有6种基本数据类型:string,number,boolean,null,undefined,symbol (ECMAScript2015新增)。

总结:值传递不会被修改;对象传递,本身不会被修改,但属性值可以被修改且只能通过属性修改

相关文章

https://segmentfault.com/a/1190000005794070

https://blog.csdn.net/starwavelin/article/details/75949933

JS基础之传参(值传递、对象传递)的更多相关文章

  1. 对象引用 方法传参 值传递 引用传递 易错点 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  2. js 不固定传参

      js 不固定传参 CreationTime--2018年7月2日15点18分 Author:Marydon /** * 声明一个函数 * @explain 传参个数不确定 */ function ...

  3. js函数动态传参

    js函数体内可以通过arguments对象来接收传递进来的参数,利用这一对象属性可以动态传参. function box() { return arguments[0]+' | '+arguments ...

  4. Js基础知识7-JavaScript所有内置对象属性和方法汇总

    对象什么的,程序员可是有很多呢... JS三大对象 对象,是任何一个开发者都无法绕开和逃避的话题,她似乎有些深不可测,但如此伟大和巧妙的存在,一定值得你去摸索.发现.征服. 我们都知道,JavaScr ...

  5. js函数的传参是按值传对递

    根据js高级程序设计第三版编写,对于函数的参数只能按值传递是这样解释的: ECMAScript 中所有函数的参数都是按值传递的.也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另 ...

  6. js原生方法传参的细节(面试必问)

    废话不说,直接上题. slice(),接收两个参数,第一个为开始index(从0开始),第二个为结束的index(也是从0开始,但是不包括index本身,只到index-1).返回值是截取的数组,原数 ...

  7. Vue.js中组件传参的方法 - 基于webpack模板

    在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...

  8. js基础梳理-究竟什么是变量对象,什么是活动对象?

    首先,回顾下上篇博文中js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?的执行上下文的生命周期: 3.执行上下文的生命周期 3.1 创建阶段 生成变量对象(Variable o ...

  9. 以Integer类型传参值不变来理解Java值传参

    最近在写代码的时候出了一个错误,由于对值引用理解的不深,将Integer传入方法中修改,以为传入后直接修改Integer中的值就不用写返回值接收了,虽然很快发现了问题,但还是来总结一下 首先是代码: ...

随机推荐

  1. UITouch - BNR

    本节任务:创建一个视图,让用户在视图上拖动手指来画线. UIView类能够重载4个方法来处理不同的触摸事件. - (void)touchesBegan:(NSSet *)touches withEve ...

  2. 【原创】架构师必备,带你弄清混乱的JAVA日志体系!

    引言 还在为弄不清commons-logging-xx.jar.log4j-xx.jar.sl4j-api-xx.jar等日志框架之间复杂的关系而感到烦恼吗? 还在为如何统一系统的日志输出而感到不知所 ...

  3. 在Bootstrap开发框架的工作流模块中实现流程完成后更新资料状态处理

    在开发查看流程表单明细的时候,在Web界面中,我们往往通过使用@RenderPage实现页面内容模块化的隔离,减少复杂度,因此把一些常用的如审批.撤销.会签.阅办等等的流程步骤都放到了通用处理的页面V ...

  4. Java 最常见的 200+ 面试题汇总

    这份面试清单是我从 2015 年做 TeamLeader 之后开始收集的,一方面是给公司招聘用,另一方面是想用它来挖掘我在 Java 技术栈中的技术盲点,然后修复和完善它,以此来提高自己的技术水平.虽 ...

  5. 基于 WebGL 3D 的 HTML5 档案馆可视化管理系统

    前言 档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能.为企事业单位的档案现代化管理,提供完整的解决方案,档 ...

  6. 玩转3D Swiper美女性感秀之思路分析总结

    前言 继一次的3D魔方之后,这次利用CSS3的transform.translate.rotate.preserve-3d等结合JS的requestAnimationFrame.class带你一起玩转 ...

  7. 微信小程序开发教程 #043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...

  8. vue脚手架搭建项目引用百度地图--出坑

    这是官网地址 https://dafrok.github.io/vue-baidu-map/#/zh/start/installation 需要声明注意的是 BaiduMap 组件容器本身是一个空的块 ...

  9. P1836 【数页码_NOI导刊2011提高(04)】

    P1836 数页码_NOI导刊2011提高(04) 题目描述 一本书的页码是从1—n编号的连续整数:1,2,3,…,n.请你求出全部页码中所有单个数字的和,例如第123页,它的和就是1+2+3=6. ...

  10. Python——模块——时间模块

    1.time模块 (1)时间戳 >>> time.time() 1472016249.393169 (2)将时间戳转换成当前时间元祖 time.localtime()time.gmt ...