Saya akan menunjukkan mengapa cerita rakyat bahwa "objek JS dilewatkan dengan referensi, primitif dilewatkan dengan nilai" tidak ada hubungannya dengan passing, objek, atau referensi dan sebenarnya hanya ilusi. "Objects-are-passed-by-reference" (OAPBR) adalah model teori/mental. Seperti kebanyakan teori, itu harus dinilai berdasarkan kontribusinya terhadap pemahaman, prediksi, kontrol, dan biayanya dalam hal kompleksitas. Saya berharap dapat menggunakan contoh ini sebagai bukti bahwa model mental yang sangat salah:

• Membuat belajar fitur lanjutan lebih sulit
• Membuat belajar bahasa pemrograman lain lebih sulit
• Dan membuang-buang waktu. Pada akhirnya saya akan memberikan saran untuk menghindari model mental yang sangat salah.

Untuk menunjukkan apa yang ingin dijelaskan oleh teori "Objects are Passed by Reference" (OAPBR), pertama-tama kita memerlukan dua definisi:

function plusNum(n1, n2) {
 return n1 + n2;
}

function mutatingAdd(obj1, n) {
 obj1.value = plusNum(obj1.value, n)
}

function takeNum(n /* number */) {
 n = plusNum(n, 1);
 console.log(n); // 2
}

function primitiveExample() {
 let x = 1;
 takeNum(x);
 console.log(x); // 1
}

function mutateObj(obj /* {field: number} */) {
 mutatingAdd(obj, 1);
 console.log(obj.value); // 2
}

function objectExample() {
 let x = {value: 1};
 mutateObj(x);
 console.log(x.value); // 2
}

Bagaimana Teori "Objek Dilewati oleh Referensi" (OAPBR) Gagal

Sekarang saya akan menunjukkan bahwa contoh sebelumnya tidak ada hubungannya dengan meneruskan nilai ke fungsi dengan mengadaptasi contoh agar tidak menggunakan fungsi:

function primitiveExample2() {
 let x = 1;
 let y = x;
 y = y + 1;
 console.log(y); // 2
 console.log(x); // 1
}

function objectExample2() {
 let x = { value: 1 };
 let y = x;
 y.value = y.value + 1;
 console.log(y.value); // 2
 console.log(x.value); // 2
}

function combinedExample1() {
 let x = Object.assign(1, { value: 100 });
 let y = x;
 mutatingAdd(y, 100);
 console.log(y.value); // 200
 console.log(x.value); // 200
 y = plusNum(y, 1);
 console.log(y + 0); // 2
 console.log(x + 0); // 1
}

function nonMutatingPlusObj(obj1, obj2) {
 return { value: obj1.value + obj2.value };
}

function nonMutatingObjectExample() {
 let x = {value: 100};
 let y = x;
 y = nonMutatingPlusObj(y, {value: 100})
 console.log(y.value); // 200
 console.log(x.value); // 100
}

<?php

function add_mut(&$i1, $i2) {
 $i1 += $i2;
}

$x = 1;
add_mut($x, 1);
echo $x; // 2
?>

fn add_mut(i: &mut i32, i2: i32) {
 *i = (*i) + i2;
}

fn main() {
 let i = &mut 1;
 add_mut(i, 1);
 println!("{}", i); // 2
}

function makeRef(thing) {
 return {value: thing};
}

function addMut(iRef, i2) {
 iRef.value = iRef.value + i2;
}

let iRef = makeRef(1);
addMut(iRef, 1);
console.log(iRef.value); // 2

Sebuah teori yang lebih baik

Alih-alih "Objek diteruskan dengan referensi, primitif diteruskan dengan nilai", saya menyarankan perbedaan yang lebih baik: antara mengubah ruang lingkup dan mengubah nilai. Di JS, cakupan adalah pemetaan yang dapat diubah dari nama variabel ke nilai.

let x = 1; // the scope maps x to 1
x = 2; // the scope maps x to 2
x += 1; // the scope maps x to 3

Ilusi “pass by reference” mungkin muncul dalam konteks fungsi karena setiap fungsi memperkenalkan ruang lingkup baru. Lebih lanjut tentang cakupan di MDN .

Dalam kode di bawah ini, xdan yarahkan ke objek yang sama, yang mutateObjbermutasi. mutatingAddtidak mengubah ruang lingkup, karena dalam fungsi JavaScript tidak dapat mengubah ruang lingkup yang tidak ditutup:

function objectExample() {
  let x = {value: 1}; 
  let y = x;
  mutatingAdd(y, 1);
  console.log(y.value); // 2
  console.log(x.value); // 2
}

Untuk JS, khususnya, memahami bahwa ruang lingkup dapat berubah sangat penting untuk memahami const-vs-let, shadowing, identitas objek, penutupan, dan menulis UI. Dan ini adalah konsep yang sangat sederhana dibandingkan dengan pembedaan "menurut-nilai vs. berdasarkan-referensi" yang salah.

Apa berikutnya

Saya telah melihat model mental buruk untuk bahasa pemrograman berasal dari sumber berikut:

• Tidak menggunakan sumber belajar apapun, melainkan menyelami dan mencoba memprogram. Ini mungkin terasa cepat, tapi menurut saya ini adalah rute yang lambat dalam jangka panjang.
• Belajar dari posting blog atau video. (Saya tahu ini adalah posting blog: percayakan MDN lebih dari apa pun di sini.)
• Dengan asumsi fitur bahasa pemrograman sudah jelas. Tidak ada yang jelas, terutama bukan variabel, dan ada variasi yang mengejutkan antara dan di dalam bahasa pemrograman untuk cara kerjanya.

Selamat meretas!