前端培训 | JS函数传参

在日常工作中我们发现很多人对于JS函数传参的理解只是处于半桶水的状态，有时候并不知道传递进去的数据是一个基本值还是一个引用数据类型的地址值。

所以今天我专门写了这篇文章给大家讲讲函数传参到底是值传递还是引用传递，以帮助大家深入理解函数传参，夯实基础。

一、数据类型

首先我们先来回顾一下JS当中的数据类型。

1. 基本数据类型

基本数据类型总共有六种，存放在栈内存（stack）中，以一个具体值的形式保存。他们分别是：

Number 数值类型

String 字符串类型

Boolean 布尔类型

Null 空类型

Undefined 无值

Symbol 唯一值（ES6新增）

 

2. 引用数据类型

引用数据类型也称作对象数据类型，数据存放在堆内存（heap）中，通过栈内存中的变量指向堆内存的地址调用。他们分别是：

Function 函数

Array 数组

Object 对象

Date 时间

RegExp 正则表达式

二、函数传参

函数调用时，会先在函数作用域内创建一个局部变量，然后将实参变量的数据拷贝一份赋值给形参变量。只是实参变量数据可能是基本数据类型值 ==> 值传递；也可能是引用数据类型的值(也就是地址值) ==> 引用传递/地址值传递。

1. 值传递

值传递即把基本数据类型的值复制给函数形参，函数内对这种类型参数的修改不会影响传入的值。

var a = 123;

function fn(b) {

b = 234;

console.log(b); // 234

}

fn(a);

console.log(a); // 123

在上面的代码中，我们修改了函数中变量b的值，变量a的值没有任何变化。

2. 引用传递

引用传递即为形参会接收实参携带的引用数据的地址值，在函数内修改当前地址值的数据时，则会影响传入的值。

var a = {

m: 123,

};

function fn(b) {

b.m = 234;

console.log(b.m); // 234

}

fn(a);

console.log(a.m); // 234

在上面的代码中，当我们修改b的属性值时，a的属性值也会跟着改变，这就是因为a和b指向的是同一个对象。

总结

函数传参分为两种情况，一种是参数为基本数据类型，即为值传递；另一种参数为引用数据类型，则传递的是引用数据的地址值，即为引用传递。