การกำหนดตัวแปรทำงานอย่างไรใน JavaScript

ดังนั้นฉันจึงเล่นไปเรื่อย ๆ เพื่อดูว่าการกำหนดจำนวนมากทำงานอย่างไรใน JavaScript

ก่อนอื่นฉันลองใช้ตัวอย่างนี้ในคอนโซล:

a = b = {};
a.foo = 'bar';
console.log(b.foo);

ผลลัพธ์คือ "bar" แสดงในการแจ้งเตือน นั่นก็ยุติธรรมเพียงพอaและbเป็นเพียงนามแฝงของวัตถุเดียวกัน จากนั้นฉันก็คิดว่าฉันจะทำให้ตัวอย่างนี้ง่ายขึ้นได้อย่างไร

a = b = 'foo';
a = 'bar';
console.log(b);

มันก็เหมือนกันใช่มั้ย? คราวนี้กลับfooไม่barเป็นไปตามที่ฉันคาดหวังจากพฤติกรรมของตัวอย่างแรก

ทำไมสิ่งนี้ถึงเกิดขึ้น?

หมายเหตุตัวอย่างนี้สามารถทำให้ง่ายขึ้นด้วยรหัสต่อไปนี้:

a = {};
b = a;
a.foo = 'bar';
console.log(b.foo);

a = 'foo';
b = a;
a = 'bar';
console.log(b);

(ฉันสงสัยว่า JavaScript ถือว่าไพรเมทีฟเช่นสตริงและจำนวนเต็มแตกต่างจากแฮชแฮชจะส่งคืนตัวชี้ในขณะที่ไพรเวต "คอร์" ส่งคืนสำเนาของตัวเอง)

ในตัวอย่างแรกคุณกำลังตั้งค่าคุณสมบัติของวัตถุที่มีอยู่ ในตัวอย่างที่สองคุณกำลังกำหนดวัตถุใหม่

a = b = {};

aและbตอนนี้เป็นตัวชี้ไปยังวัตถุเดียวกัน ดังนั้นเมื่อคุณทำ:

a.foo = 'bar';

มันตั้งค่าb.fooเช่นกันaและbชี้ไปที่วัตถุเดียวกัน

อย่างไรก็ตาม!

หากคุณทำสิ่งนี้แทน:

a = 'bar';

คุณกำลังบอกว่าaตอนนี้ชี้ไปที่วัตถุอื่น สิ่งนี้ไม่มีผลต่อสิ่งที่aชี้ไปก่อนหน้านี้

ใน JavaScript การกำหนดตัวแปรและการกำหนดคุณสมบัติคือ 2 การดำเนินการที่แตกต่างกัน เป็นการดีที่สุดที่จะคิดว่าตัวแปรเป็นตัวชี้ไปยังวัตถุและเมื่อคุณกำหนดให้กับตัวแปรโดยตรงคุณจะไม่ได้ปรับเปลี่ยนวัตถุใด ๆ เพียง แต่กำหนดตัวแปรของคุณให้เป็นวัตถุอื่น

แต่การกำหนดคุณสมบัติเช่นa.fooจะแก้ไขวัตถุที่aชี้ไป แน่นอนว่านี่ยังปรับเปลี่ยนการอ้างอิงอื่น ๆ ทั้งหมดที่ชี้ไปที่วัตถุนี้เพียงเพราะพวกเขาชี้ไปที่วัตถุเดียวกันทั้งหมด

คำถามของคุณได้รับคำตอบที่น่าพอใจแล้วโดย Squeegy - ไม่มีอะไรเกี่ยวข้องกับวัตถุเทียบกับวัตถุดั้งเดิม แต่มีการกำหนดตัวแปรใหม่เทียบกับคุณสมบัติการตั้งค่าในวัตถุที่อ้างอิงเดียวกัน

ดูเหมือนว่าจะมีความสับสนมากมายเกี่ยวกับประเภท JavaScript ในคำตอบและความคิดเห็นดังนั้นนี่คือบทนำเล็ก ๆ เกี่ยวกับระบบประเภทของ JavaScript:

ใน JavaScript มีค่าสองประเภทที่แตกต่างกันโดยพื้นฐานคือค่าดั้งเดิมและอ็อบเจ็กต์ (และไม่มีสิ่งที่เหมือนกับ 'แฮช')

สตริงตัวเลขและบูลีนเช่นเดียวกับnullและundefinedเป็นพื้นฐานวัตถุคือทุกสิ่งทุกอย่างที่สามารถมีคุณสมบัติ แม้แต่อาร์เรย์และฟังก์ชันก็เป็นวัตถุทั่วไปดังนั้นจึงสามารถเก็บคุณสมบัติตามอำเภอใจได้ คุณสมบัติเหล่านี้แตกต่างกันในคุณสมบัติ [[Class]] ภายใน (ฟังก์ชันเพิ่มเติมมีคุณสมบัติที่เรียกว่า [[Call]] และ [[สร้าง]] แต่เดี๋ยวก่อนนั่นคือรายละเอียด)

สาเหตุที่ค่าดั้งเดิมอาจมีพฤติกรรมเหมือนอ็อบเจกต์เป็นเพราะการทำ autoboxing แต่ตัวดั้งเดิมไม่สามารถเก็บคุณสมบัติใด ๆ ไว้ได้

นี่คือตัวอย่าง:

var a = 'quux';
a.foo = 'bar';
document.writeln(a.foo);

ออกจะนี้undefined: ถือเป็นค่าดั้งเดิมที่ได้รับการเลื่อนตำแหน่งให้เป็นวัตถุเมื่อกำหนดสถานที่ให้บริการa fooแต่วัตถุใหม่นี้จะถูกทิ้งทันทีดังนั้นค่าของfooจึงหายไป

คิดแบบนี้:

var a = 'quux';
new String(a).foo = 'bar'; // we never save this new object anywhere!
document.writeln(new String(a).foo); // a completly new object gets created

คุณถูกต้องมากหรือน้อยยกเว้นว่าสิ่งที่คุณอ้างถึงเป็น "แฮช" นั้นเป็นเพียงไวยากรณ์ชวเลขสำหรับวัตถุ

ในตัวอย่างแรกaและbทั้งคู่อ้างถึงวัตถุเดียวกัน ในตัวอย่างที่สองคุณเปลี่ยนaเพื่ออ้างถึงอย่างอื่น

นี่คือคำตอบในเวอร์ชันของฉัน:

obj = {a:"hello",b:"goodbye"}
x = obj
x.a = "bonjour"

// now obj.a is equal to "bonjour"
// because x has the same reference in memory as obj
// but if I write:
x = {}
x.a = obj.a
x.b = obj.b
x.a = "bonjour"

// now x = {a:"bonjour", b:"goodbye"} and obj = {a:"hello", b:"goodbye"}
// because x points to another place in the memory

คุณกำลังตั้งค่าให้ชี้ไปที่อ็อบเจ็กต์สตริงใหม่ในขณะที่ b ชี้ไปที่อ็อบเจ็กต์สตริงเก่า

ในกรณีแรกคุณเปลี่ยนคุณสมบัติบางอย่างของออบเจ็กต์ที่มีอยู่ในตัวแปรในกรณีที่สองคุณกำหนดค่าใหม่ให้กับตัวแปร นั่นคือสิ่งที่แตกต่างกันโดยพื้นฐาน ตัวแปรaและbไม่ได้เชื่อมโยงกันอย่างน่าอัศจรรย์ด้วยการกำหนดครั้งแรก แต่ก็มีวัตถุเดียวกัน เช่นเดียวกันในตัวอย่างที่สองจนกว่าคุณจะกำหนดค่าใหม่ให้กับbตัวแปร

ความแตกต่างระหว่างประเภทธรรมดาและวัตถุ

ทุกสิ่งที่เป็นวัตถุ (เช่นอาร์เรย์หรือฟังก์ชัน) จะถูกส่งผ่านโดยการอ้างอิง

ทุกสิ่งที่เป็นประเภทธรรมดา (เช่นสตริงหรือตัวเลข) จะถูกคัดลอก

ฉันมีฟังก์ชัน copyArray อยู่เสมอดังนั้นฉันจึงมั่นใจได้ว่าฉันไม่ได้สร้างนามแฝงจำนวนมากในอาร์เรย์เดียวกัน