Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วิธีส่ง Object เป็น Parameter ในฟังก์ชัน JavaScript

ใน JavaScript ส่ง Object เป็น Parameter ได้โดยตรง เนื่องจาก Object เป็น Reference Type การส่งคือการส่ง Reference (Address) ไป ไม่ได้ Copy Object ทั้งอัน

ตัวอย่าง

<html>
  <head>
    <script>
      var func = function(param1) {
        this.param1 = param1;
      };

      func.prototype.display = function() {
        return this.param1;
      };

      function display(val) {
        document.write(val());
      }

      var res = new func(99);
      display(res.display.bind(res)); // bind เพื่อให้ this ชี้ไปที่ res
    </script>
  </head>
  </html>

รูปแบบทั่วไปและเข้าใจง่ายกว่า

// 1. ส่ง Object ธรรมดา
function greet(user) {
  console.log("Hello, " + user.name);
}

greet({ name: "John", age: 30 }); // ส่ง Object Literal โดยตรง

// 2. Destructuring Parameters (ES6)
function greet({ name, age = 20 }) {
  console.log(name + " is " + age);
}

greet({ name: "Jane" }); // Jane is 20

// 3. แก้ไข Property ของ Object ที่ส่งมา (Mutate)
function updateUser(user) {
  user.lastLogin = new Date(); // ส่งผลต่อ Object ต้นฉบับ
}

var user = { name: "Bob" };
updateUser(user);
console.log(user.lastLogin); // มีค่า Date Object

ข้อควรระวัง: Pass by Reference (Sharing)

function modify(obj) {
  obj.name = "Changed";     // ✅ ส่งผลต่อต้นฉบับ (Mutate property)
  obj = { name: "New" };    // ❌ ไม่ส่งผล (Reassign parameter variable only)
}

var original = { name: "Original" };
modify(original);
console.log(original.name); // "Changed"

การ Clone Object (ถ้าไม่ต้องการ Mutate ต้นฉบับ)

// Shallow Clone
function safeFunc(obj) {
  var copy = { ...obj }; // ES6 Spread
  copy.name = "Safe";
  return copy;
}

// Deep Clone (Nested Objects)
function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj)); // 簡單但有限制 (ไม่รองรับ Function, Date, RegExp, Circular)
  // หรือใช้ Lodash: _.cloneDeep(obj)
}

สรุป: ส่ง Object เข้าฟังก์ชัน = ส่ง Reference การแก้ Property จะส่งผลต่อต้นฉบับ การ Reassign Parameter ไม่ส่งผล