神奇的 Javascript，谁能告诉我为什么

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1303 天前的主题，其中的信息可能已经有所发展或是发生改变。

let data = [
{x:0, y:1},
{x:2, y:3},
];

let A = data[0];
let B = data[1];

A.x = B.x;
A.y = B.y;

console.log(data, A, B)

为什么 data[0].x == 2 ？？？
明明申请了变量 A，我只想改变变量 A，怎么连 data 的值都变了
这是什么原理，搞 PHP 的搞不明白啊

Data

Let

PHP

53 条回复 • 2021-05-06 17:54:43 +08:00

across

2021-05-05 14:11:05 +08:00

不懂 php 。
｛｝是 object 类型，A 是做了 data[0]引用，改 A 就是改 data[0]

zero3412

2021-05-05 14:12:28 +08:00

@across 至少在 PHP 里，A 变量就是个完全独立的值了，只是复制了一份 data[0]，直接蒙逼了哇，这操作太神奇了。

across

2021-05-05 14:13:59 +08:00

@zero3412 php 不知道，但我接触的大语言，都是自定义类型按引用传递，基础类型按值传递的····

dzdh

2021-05-05 14:14:24 +08:00

PHP 的话是这样的：

```
php > $a = new StdClass();
php > $a->a = new StdClass();
php > $b = $a->a;
php > $b->ee = 3;
php > var_dump($a);
object(stdClass)#1 (1) {
["a"]=>
object(stdClass)#2 (1) {
["ee"]=>
int(3)
}
}
```

aijam

2021-05-05 14:15:37 +08:00

搞清楚“对象”和“引用”的关系。列表和变量存的都是引用，而通过引用改变的都是同一个对象。

ashong

2021-05-05 14:15:45 +08:00

let A = Object.assign({}, data[0]);

zero3412

2021-05-05 14:23:02 +08:00

@across @dzdh @aijam @ashong

谢谢各位，找了一篇文章学习了一下 https://segmentfault.com/a/1190000014724227
特别是 “列表和变量存的都是引用，而通过引用改变的都是同一个对象。” 精辟

ericgui

2021-05-05 14:23:23 +08:00

JavaScript 是 pass by reference

Jirajine

2021-05-05 14:39:50 +08:00 via Android

@across 全部都是按引用传递，所谓“按值传递”是一种 inline 优化，对程序员是透明的，这些语言没有 deref 操作。

JerryCha

2021-05-05 14:48:48 +08:00

data[0]传递的实际是指针，小伙子 C 没学好吧

Rocketer

2021-05-05 14:57:25 +08:00 via iPhone

实际上传指针才是主流，PHP 那种默认传值，加了&才传指针的，属于少数派

HashV2

2021-05-05 15:08:24 +08:00

很多语言都这样吧，引用

godbasin

2021-05-05 15:09:09 +08:00

因为 A 拿到的是 data[0] 的引用

ipwx

2021-05-05 15:16:15 +08:00

大部分语言，C#, Java, Javascript, Scala, Python 都是这个逻辑。PHP 是少数。

C++ 程序员不会有这个疑问，因为他们天天和 T* T& T 打交道

InternetExplorer

2021-05-05 15:19:47 +08:00

php 的数组是值类型，而且是写是复制，大数组赋值起来很快，改到的时候才会真正复制值。
js 的对象 { }（包括数组 [ ] ) 是引用类型，赋值就是传一下引用，都是指向同一个对象的。

hejingyuan199

2021-05-05 15:29:05 +08:00

我平时基本只用 php，但我感觉 JavaScript 这个才更符合编程本质吧。

没深入研究过 php 这个问题。

Justfakemoz

2021-05-05 15:31:32 +08:00

。。。除了基础类型，赋值都是引用

zjsxwc

2021-05-05 15:38:08 +08:00

感觉楼主在抹黑 php 。

php 里你用对象照样也和 js 得到一样的结果。

无非是 js 里面 {} 表示对象，php 里面 [] 表示数组不是对象。

jeffwcx

2021-05-05 16:04:17 +08:00

看得我一脸懵逼，我还以为有啥问题呢

jonsun30

2021-05-05 16:07:44 +08:00

Everthing using a dot in JS is an object.

When you store a non-primitive value some where or you pass it to a function, it is passed by reference, you are passing a pointer to it.

ShuoHui

2021-05-05 16:12:27 +08:00 via iPhone

不懂 php，pythoner 感觉没毛病啊……

Rache1

2021-05-05 16:42:04 +08:00

PHP 里面对象也是引用的，数组不是

darknoll

2021-05-05 16:47:45 +08:00

这不是最基础的东西？

charlie21

2021-05-05 16:55:39 +08:00

1

JAVASCRIPT
let arr1 = [1,2,3,4];
let arr2 = arr1;
arr2[0] = 99;
console.log(arr2); // [99,2,3,4]
console.log(arr1); // [99,2,3,4]

JAVASCRIPT
let arr1 = [1,2,3,4];
let arr2 = [...arr1];
arr2[0] = 99;
console.log(arr2); // [99,2,3,4]
console.log(arr1); // [1,2,3,4]

JAVASCRIPT
let d1 = { x: 1, y:2 };
let d2 = d1;
d2.x = 80;
console.log(d2); // { x: 80, y: 2 }
console.log(d1); // { x: 80, y: 2 }

JAVASCRIPT
let d1 = { x: 1, y:2 };
let d2 = {...d1};
d2.x = 80;
console.log(d2); // { x: 80, y: 2 }
console.log(d1); // { x: 1, y: 2 }

关键词 js spread operator

2

PHP
$arr1 = [1,2,3,4];
$arr2 = $arr1;
$arr2[0] = 99;
var_export($arr2); // [99,2,3,4]
var_export($arr1); // [1,2,3,4]

PHP
$arr1 = [1,2,3,4];
$arr2 = &$arr1;
$arr2[0] = 99;
var_export($arr2); // [99,2,3,4]
var_export($arr1); // [99,2,3,4]

3

C#
int[] arr1 = new int[]{1,2,3,4};
int[] arr2 = arr1;
arr2[0] = 99;
Console.WriteLine(String.Join(" ", arr2)); // 99 2 3 4
Console.WriteLine(String.Join(" ", arr1)); // 99 2 3 4

C#
using System.Collections.Generic;
List<int> list1 = new List<int>{1,2,3,4};
List<int> list2 = new List<int>(list1);
list2[0] = 99;
list2.ForEach(Console.WriteLine); // 99 2 3 4
list1.ForEach(Console.WriteLine); // 1 2 3 4

C#
using System.Collections.Generic;
List<int> list1 = new List<int>{1,2,3,4};
List<int> list2 = list1;
list2[0] = 99;
list2.ForEach(Console.WriteLine); // 99 2 3 4
list1.ForEach(Console.WriteLine); // 99 2 3 4

belin520

2021-05-05 17:15:21 +08:00 via iPhone

面试面基础还是很有必要的，即使是八股文
很多人即使自己不知道为什么，也不尝试去弄清楚为什么

OHyn

2021-05-05 17:23:15 +08:00

这个在 java 、c 里头也是一样的呀。。。传值和传引用嘛

iyaozhen

2021-05-05 19:39:41 +08:00

PHP 虽然说是传值，但实际也是引用。然后有个写死复制的机制，就是当发现要修改 A 时，是复制了一份。
省去了需要自己 copy 的问题，比较符合人的思维

WillBC

2021-05-05 22:03:59 +08:00 via iPhone

等你感受一下 deep clone

Nitroethane

2021-05-05 22:14:38 +08:00

@JerryCha data[0] 不一定传引用啊，得看 data 的数据类型，如果是 char* data[]，那 data[0] 就传的是指针，如果是 char data[]，data[0] 照样传值

anguiao

2021-05-05 22:38:50 +08:00 via Android

虽然 JS 确实很神奇，但是这个是常规操作。

Yvette

2021-05-06 04:51:24 +08:00

JS 里除了 primitive types 是 pass by value 之外，其余所有的都是 reference

xuanbg

2021-05-06 06:39:25 +08:00

因为
let A = data[0];
let B = data[1];

所以 data 的值变成 [
{x:2, y:3},
{x:2, y:3},
];

xuanbg

2021-05-06 06:40:16 +08:00

因为
let A = data[0];
let B = data[1];

A.x = B.x;
A.y = B.y;

所以 data 的值变成 [
{x:2, y:3},
{x:2, y:3},
];

Marszm

2021-05-06 08:46:20 +08:00

这种需要深拷贝.....PHP 这波属于非主流操作

oneisall8955

2021-05-06 08:49:41 +08:00 via Android

JAVA 的路过，要不是这样的结果才奇怪😳

yl14786922106

2021-05-06 09:00:52 +08:00

js 按值传递和按引用传递的区别 let A = data[0] 时，A 只是一个指针指向堆区的 data[0] : {x:0,y:1}，所以改变 A.x 时改变的是 data[0]。

meloncc

2021-05-06 09:12:50 +08:00

这个问题与 Javascript 没有关系

gtanyin

2021-05-06 10:17:02 +08:00

果然学编程应该从 C 学起，不然连指针的概念都要惊讶半天

liuky

2021-05-06 10:57:20 +08:00

楼主高级黑

misaka19000

2021-05-06 10:59:55 +08:00

这是来黑 PHP 的吧

Leiothrix

2021-05-06 11:19:20 +08:00

JavaScript 浅拷贝和深拷贝的区别，浅拷贝两个对象指向同一个地址，深拷贝是新开栈，两个对象指向不同的地址。可使用 JSON.parse(JSON.stringify(obj))进行深拷贝，修改后不会影响到原对象数据。

ganbuliao

2021-05-06 11:34:34 +08:00

object 对象默认是引用知道这个就清楚了

kamal

2021-05-06 11:54:06 +08:00

https://ci3.googleusercontent.com/proxy/wsrC1mF_v9QetnEDKSO1iwQBwTEQtTK7ixO8xGXQH7vlp4eJovkHO9xduNOmGvfM1YQwj68f92zNUUIokFTKs70fYkobGiJygOUPueQn45X7c9LlyJp6aYisAnUb0lUrF5rnrL6pWi5_3eQU8dRMN4aDILEc0Hb2odx-hoIa2Q=s0-d-e1-ft#https://res.cloudinary.com/dg3gyk0gu/image/upload/v1588431579/just-javascript-email-images/jj08/step3_v2.gif

est

2021-05-06 12:05:24 +08:00

楼主低级黑

zhuweiyou

2021-05-06 14:06:48 +08:00

我感觉你在黑 PHP

zhengfan2016

2021-05-06 15:13:59 +08:00

为什么我看着觉得很正常，我第一门语言是 python，有没有老哥给我讲讲哪儿不正常 233

IvanLi127

2021-05-06 16:47:43 +08:00

我记得 php 里也有引用传参啊，楼主用的啥版本的 php，代码放出来我们品品？

MonkeyD1

2021-05-06 17:26:45 +08:00

指针啊

AoEiuV020

2021-05-06 17:29:13 +08:00

深拷贝，浅拷贝，js 无关，一般都有这些区别，

vueli

2021-05-06 17:40:12 +08:00

前面的 = 是指向

ruike007

2021-05-06 17:42:53 +08:00

这不是深浅拷贝的问题吗？基础啊，大哥

karott7

2021-05-06 17:45:16 +08:00

这不前端正常操作？赋值对象都是引用

fescover

2021-05-06 17:54:43 +08:00

正常操作，还有更 bt 的，猜猜下面输出什么
NaN===NaN
null===null
null==NaN
{}==={}
[]===[]
""===""