理解JavaScript中的函数参数传递

《JavaScript高级程序设计》中写道:" ECMAScript 中所有函数的参数都是按值传递的。 "。

对于简单数据类型,这个说法很容易理解,传递给函数的参数实际上就是原始值的一个复制,在函数中修改参数值不会影响到原始值。如下面这段代码所示:

ini 复制代码
function addTen(num) { 
  num += 10;  
  return num; 
} 

let count = 20;
let result = addTen(count); 
console.log(count);  // 20,没有变化 
console.log(result); // 30 

对于引用数据类型,这个说法可能就会带来困惑了,我们先看下面这段代码:

ini 复制代码
function setName(obj) { 
  obj.name = "Nicholas";  
} 
let person = new Object(); 
setName(person); 
console.log(person.name);  // "Nicholas" 

看到上述代码的输出结果,我们可能会觉得奇怪,既然是值传递而不是引用传递,对函数内部变量的修改又为什么会反映到函数外部呢?这样的表现似乎更符合引用传递的预期,即函数可以直接修改变量原始值。我们接下来再看这样的一段代码:

ini 复制代码
function setName(obj) { 
  obj.name = "Nicholas";  
  obj = new Object(); 
  obj.name = "Greg"; 
} 
let person = new Object(); 
setName(person); 
console.log(person.name);  // "Nicholas" 

看到上面这段代码的输出结果,我们就可以来讨论为什么说JavaScript的函数参数传递都是值传递了。

对于简单数据类型,"值传递"传递的就是变量值;而对于引用数据类型,可以认为"值传递"传递的是变量的内存地址值,也就是说创建了一个引用类型的变量的地址的副本 ,函数内外的变量指向同一个对象,这时在函数内部修改对象值,外部变量值自然也会改变。但是如果在函数内部对变量重新赋值,相当于把内部变量的值指向了一个新的地址,这时再修改内部对象值,自然不会影响到外部变量值。

这两种情况大致如下图所示:

总之,对于引用数据类型的函数参数传递,我觉得可以类比为C++中的指针传递,不过我们看不见这个指针。

相关推荐
@PHARAOH14 小时前
HOW - 构建一个轻量前后端一体服务
前端·微服务·服务端
无限进步_14 小时前
【C++】C++11的类功能增强与STL变化
java·前端·数据结构·c++·后端·算法
一只小小Java14 小时前
Echarts单表多图实现
前端·javascript·echarts
跟着珅聪学java14 小时前
Element UI 的 Tabs 标签页开发教程
javascript·vue.js·elementui
dunky14 小时前
Spring AI 深度解析:把 LLM 抽象成 Spring Bean 的底层逻辑
前端
星栈14 小时前
Rust WASM 文件上传全链路:从浏览器到 S3,一个字节都不能少
前端·前端框架·开源
濮水大叔14 小时前
告别 Django Admin!这个 NodeJS 全栈框架让你在 DTO 中直接配置 Table/Form 渲染
前端·typescript·node.js
JarvanMo14 小时前
Flutter 3.44 & Dart 3.12重磅发布!这些新特性太香了
前端
竹林81814 小时前
用Viem替换ethers.js:一次合约交互的"减负"实战,我总算把TypeScript类型搞明白了
前端·javascript
To_OC14 小时前
一个让我懵了半小时的时钟 Bug,注重前端三权分立落地
前端·代码规范