理解 JavaScript 传值 - JavaScript 教程

摘要：本教程解释了 JavaScript 传值的工作原理，并提供了一些将基本值和引用值传递给函数的示例。

JavaScript 传值或传引用

在 JavaScript 中，所有函数参数始终以值传递。这意味着 JavaScript 将变量的值复制到函数参数中。

您对函数内部的参数所做的任何更改都不会反映到传递变量的函数外部。换句话说，对参数所做的更改不会反映到函数外部。

如果函数参数是按引用传递的，则您传递到函数中的变量的更改将反映到函数外部。这在 JavaScript 中是不可能的。

基本值的传值

让我们看一下下面的例子。

function square(x) {
    x = x * x;
    return x;
}

let y = 10;
let result = square(y);

console.log(result); // 100 
console.log(y); // 10 -- no changeCode language: JavaScript (javascript)

脚本的工作原理。

首先，定义一个 square() 函数，它接受一个参数 x。该函数将 x 的平方赋值给 x 参数。

接下来，声明变量 y 并将其值初始化为 10

然后，将 y 变量传递给 square() 函数。当将变量 y 传递给 square() 函数时，JavaScript 将 y 的值复制到 x 变量。

之后，square() 函数改变了 x 变量。但是，它不会影响 y 变量的值，因为 x 和 y 是单独的变量。

最后，y 变量的值在 square() 函数完成之后不会改变。

如果 JavaScript 使用了传引用，则变量 y 在调用函数后将变为 100。

引用值的传值

引用值也是以值传递的，这一点并不明显。例如

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

console.log(person);Code language: JavaScript (javascript)

脚本的工作原理

首先，定义 person 变量，它引用一个具有两个属性 name 和 age 的对象

接下来，定义 increaseAge() 函数，它接受一个对象 obj 并将 obj 参数的 age 属性增加 1。

然后，将 person 对象传递给 increaseAge() 函数

在内部，JavaScript 引擎创建 obj 引用，并使此变量引用与 person 变量引用的相同对象。

之后，通过 obj 变量在 increaseAge() 函数内部将 age 属性增加 1

最后，通过 person 引用访问对象

看起来 JavaScript 是按引用传递对象的，因为对对象的更改反映在函数外部。然而，情况并非如此。

事实上，当将对象传递给函数时，您传递的是该对象的引用，而不是实际的对象。因此，函数可以通过其引用修改对象的属性。

但是，您不能更改传递到函数中的引用。例如

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

输出

{ name: 'John', age: 26 }Code language: CSS (css)

在这个例子中，increaseAage() 函数通过 obj 参数改变了 age 属性

并使 obj 引用另一个对象

但是，person 引用仍然引用原始对象，其 age 属性变为 26。换句话说，increaseAge() 函数不会改变 person 引用。

如果这个概念仍然让你感到困惑，你可以将函数参数视为局部变量。

总结

JavaScript 将所有参数按值传递给函数。
函数参数是 JavaScript 中的局部变量。

本教程对您有帮助吗？