JavaScript: Shallow copy là gì?

Bản sao cạn của một đối tượng là một bản sao có các thuộc tính chia sẻ cùng các tham chiếu (trỏ đến các giá trị cơ bản giống nhau) với các thuộc tính của đối tượng nguồn mà từ đó bản sao được tạo ra.

Do đó, khi bạn thay đổi nguồn hoặc bản sao, bạn cũng có thể khiến đối tượng khác cũng thay đổi - và do đó, bạn có thể vô tình gây ra các thay đổi đối với nguồn hoặc bản sao mà bạn không mong đợi.

Hành vi đó trái ngược với hành vi của một bản sao sâu, trong đó nguồn và bản sao hoàn toàn độc lập.

Đối với các bản shallow copy, điều quan trọng là phải hiểu rằng việc thay đổi có chọn lọc giá trị của thuộc tính được chia sẻ của một phần tử hiện có trong một đối tượng khác với việc gán một giá trị hoàn toàn mới cho một phần tử hiện có.

Ví dụ: nếu trong một bản sao cạn có tên là bản sao của một đối tượng mảng, giá trị của phần tử copy [0] là {"list": ["butter", "flour"]} và bạn sao chép [0] .list = ["oil", "flour"], thì phần tử tương ứng trong đối tượng nguồn cũng sẽ thay đổi - vì bạn đã thay đổi một cách có chọn lọc thuộc tính của một đối tượng được chia sẻ bởi cả đối tượng nguồn và bản sao nông.

Tuy nhiên, nếu thay vào đó,  copy [0] = {"list": ["oil", "flour"]}, thì phần tử tương ứng trong đối tượng nguồn sẽ không thay đổi - bởi vì trong trường hợp đó, bạn không chỉ chọn lọc thay đổi thuộc tính của một phần tử mảng hiện có mà bản sao cạn chia sẻ với đối tượng nguồn; thay vào đó, bạn thực sự đang gán một giá trị hoàn toàn mới cho phần tử mảng [0] bản sao đó, chỉ trong bản sao nông.

In JavaScript, all standard built-in object-copy operations (spread syntax, Array.prototype.concat(), Array.prototype.slice(), Array.from(), Object.assign(), and Object.create()) create shallow copies rather than deep copies.