Đôi điều về Object Reference trong Javascript. Nhiều lúc quên thật phiền toái!

3049

Bài viết được sự cho phép của tác giả Tống Xuân Hoài

Vấn đề

Object Reference là một khái niệm thể hiện một biến tham chiếu, tức là thay vì lưu trữ giá trị thực nó lưu lại địa chỉ ô nhớ & thao tác với dữ liệu dựa trên địa chỉ đó. Điều này giúp tiết kiệm bộ nhớ cho các ứng dụng. Tuy nhiên cũng không ít điều phiền toái từ nó mà ra.

Kiểu dữ liệu nguyên thuỷ

Trong Javascript, chúng ta có những kiểu dữ liệu “nguyên thuỷ” (Primitive Types) bao gồm: undefined, null, string, number, boolean và symbol.

Các biến khi được khởi tạo với các giá trị này sẽ được cấp pháp một ô nhớ nhất định không có liên quan đến nhau. Ví dụ:

let name = "estacks";
let name2 = name; // estacks
name = "estacks.icu";
console.log(name); // estacks.icu
console.log(name2); //estacks

Bất kì khi nào thay đổi biến name thì những biến trước được gán bằng name vẫn giữ nguyên giá trị. Điều này cũng tương tự với kiểu dữ liệu number, boolean…

Tham khảo tuyển dụng javascript lương cao trên TopDev

Object & Array

Không giống với Primitive Types, Object & Array, khi có nhiều hơn một biến được tạo để lưu trữ một object, array, function. Những biến đó được trỏ đến địa chỉ đã được phân bổ tương tự trong bộ nhớ.

const arr1 = ['e', 's', 't', 'a', 'c', 'k', 's'];
const arr2 = arr1;
arr1[0] = 'a';
console.log(arr2); // ['a, 's', 't', 'a', 'c', 'k', 's']

Nhìn vào ví dụ trên, khi phần tử thứ nhất trong arr1 bị thay đổi, kéo theo đó thì arr2 cũng bị thay đổi theo. Tại sao vậy?

Khi arr1 được khai báo, bộ nhớ sẽ được cấp phát và một địa chỉ được lưu lại bởi nó. Sau đó arr2 được gán bằng arr1. Vì arr1 là một mảng thay vì tạo mới một bản sao của mảng đó, arr2 chỉ đơn giản là trỏ đến địa chỉ lưu arr1. Bằng cách đó, bất kỳ thay đổi nào được thực hiện trên arr1 cũng sẽ được thay đổi trên arr2 hoặc ngược lại bởi vì chúng trỏ đến cùng một vị trí. Điều này cũng tương tự với object & function.

  Top 10 điều hay ho khi làm việc Javascript Array

  Deep Clone Objects trong Javascript – Giới thiệu một biện pháp cực mạnh

Những phiền toái

“Quên” mất việc biến đang tham chiếu

Đây cũng là trường hợp mình thấy phổ biến nhất. Khai báo một biến dựa trên một biến khác mà quên mất biến đó có tính chất reference. Những bạn mới vào nghề sẽ rất dễ bị mắc lỗi này, vì thế khi biết được tính chất này thì hãy tránh khai báo một biến dựa trên một biến khác nhé, thay vào đó hãy sao chép nó ra.

const person1 = {
  name: 'Nguyễn Văn A',
  age: 20,
  address: {
    city: 'Hà Nội',
    district: 'Cầu Giấy',
  }
};
const person2 = { ...person1 };

Ở ví dụ trên mình vừa copy person1 sang person2. Hãy thử thay đổi giá trị của name hoặc age ở person1 thì person2 vẫn không bị thay đổi. Nhưng nếu thay đổi city hoặc district thì person2 vẫn bị thay đổi theo. Lý do là bởi address được khai báo với giá trị là object nên address vẫn có tính chất reference.

Tham khảo việc làm JavaScript tại Hồ Chí Minh trên TopDev

Cách copy object bằng cú pháp spread (…) ở trên hay nhiều cách copy khác như dùng Object.assign chỉ có thể sao chép “nông” (shallow) được đối tượng, để có thể sao chép được toàn bộ đối tượng lồng nhau như vậy mà tránh reference có thể dùng một trong ba cách sau:

Thứ nhất là dùng tổ hợp cú pháp JSON.parse & JSON.stringify. Đây là cách đơn giản & nhanh chóng nhất.

const person1 = {
  name: 'Nguyễn Văn A',
  age: 20,
  address: {
    city: 'Hà Nội',
    district: 'Cầu Giấy',
  }
};
const person2 = JSON.parse(JSON.stringify(person1));

Tuy nhiên đây lại là cách tồi nhất, do việc parse một string thành object hoàn toàn không tốt cho hiệu năng, chưa kể nếu như string đó là lớn.

Thứ hai là viết mã để thực hiện việc deep copy:

function deepCopy(obj) {
    if(typeof obj !== 'object' || obj === null) {
        return obj;
    }

    if(obj instanceof Date) {
        return new Date(obj.getTime());
    }

    if(obj instanceof Array) {
        return obj.reduce((arr, item, i) => {
            arr[i] = deepCopy(item);
            return arr;
        }, []);
    }

    if(obj instanceof Object) {
        return Object.keys(obj).reduce((newObj, key) => {
            newObj[key] = deepCopy(obj[key]);
            return newObj;
        }, {})
    }
}

Và cuối cùng, sử dụng thư viện có sẵn các hàm deepCopy như lodash, ramda… hoặc dùng package clone có sẵn trên npm.

Đặt một đối tượng dùng chung

Hình dung như bạn có một config để sử dụng làm mặc định nếu không tìm thấy những config riêng của chúng, bạn sẽ export ra một object chứa những config đó & thật tai hại nếu như trong quá trình sử dụng chúng, bạn vô tình thay đổi giá trị ở một nơi nào đó.

// file config.js
module.export = {
  appName: "estacks",
  connection: {
    host: "0.0.0.0",
    port: 80,
}

// file app.js
const conf = require('./config.js');

let config = findConfig(); // null
if (!config) config = conf;
...
// vô tình thay đổi conf
config.connection.port = 443;

Thì lúc này ở những file khác đang có import config.js thì connection.port đều bị chuyển thành 443 hết.

Giải pháp cho vấn đề này là hãy deep clone config ra trước khi sử dụng. Để tránh việc thay đổi chúng sẽ dẫn đến những lỗi ngớ ngẩn mà có thể mất cả tuần để debug :D.

Kết luận

Kiến thức về Object Reference chỉ đơn giản là chỉ một biến tham chiếu. Khi làm việc với biến tham chiếu bạn phải hết sức cẩn thận để không phải mắc những sai lầm như tôi ở trên nhé!

Bài viết gốc được đăng tải tại 2coffee.dev

Có thể bạn quan tâm:

Xem thêm các việc làm công nghệ hấp dẫn trên TopDev

RELATED ARTICLESMORE FROM AUTHOR