اختلاف بين Object.assign و $.extend

عند استخدامك لكائن غير قابل للتغيير (immutable object) وترغب في نسخ أو استنساخ (clone) الكائن لإجراء تغييرات عليه، يمكنك استخدام إما الدالة الجافاسكربتية الأصلية Object.assign أو دالة $.extend في jQuery. الفرق الرئيسي بين الاثنين هو في كيفية تعاملهما مع الكائنات الفرعية (nested objects) والقيم المرجعية (references).

Object.assign تقوم بإنشاء نسخة سطحية (shallow copy) من الكائن، مما يعني أنها تنسخ الخصائص الرئيسية في الكائن ولكن لا تنسخ الكائنات الفرعية بشكل عميق، وبالتالي إذا قمت بتغيير قيمة خاصية من الكائن الأصلي، ستتأثر النسخة المنسوخة أيضًا والعكس صحيح.

من ناحية أخرى، $.extend في jQuery تنسخ الكائن بشكل عميق (deep copy)، مما يعني أنها تنسخ الخصائص الرئيسية وأيضًا الكائنات الفرعية داخل الكائن، وبالتالي النسخة المنسوخة لا تتأثر بأي تغييرات في الكائن الأصلي.

بشكل عام، إذا كنت تعمل على كائن بنية بسيطة ولا تحتوي على كائنات فرعية متداخلة بشكل عميق، فيمكنك استخدام Object.assign بسهولة. ولكن إذا كنت تحتاج إلى نسخة عميقة من الكائن تشمل الكائنات الفرعية، فقد تكون $.extend أفضل خيار لك.

تذكر أيضًا أن تقوم بالتحقق من المتطلبات الخاصة بمشروعك واعتبار أي اعتماد على jQuery إذا كانت تلك الوحيدة.

بالتأكيد! بعض المعلومات الإضافية حول Object.assign و $.extend:

1. Object.assign:

   • يأخذ Object.assign مصفوفة من الكائنات كمعلمات. يقوم بنسخ خصائص كل من الكائنات الأخرى إلى الكائن الأول.
   • ينشئ نسخة سطحية من الكائنات، مما يعني أنه ينسخ القيم الأولية للخصائص فقط. إذا كانت القيم تشير إلى كائنات فرعية، فإنها ستكون مشاركة بين الكائنات الأصلية والمنسوخة.

2. $.extend:

   • يستخدم $.extend لدمج الكائنات. يأخذ كائنًا أوليًا ويضيف خصائص من كائنات أخرى إليه.
   • ينشئ نسخة عميقة من الكائنات، مما يعني أنه ينسخ القيم الأولية للخصائص وأيضًا الكائنات الفرعية.

مثال على استخدام Object.assign:

javascriptCopy code
let obj1 = { a: 1, b: { c: 2 } };
let obj2 = Object.assign({}, obj1);
obj1.b.c = 3;
console.log(obj1); // { a: 1, b: { c: 3 } }
console.log(obj2); // { a: 1, b: { c: 3 } }

مثال على استخدام $.extend:

javascriptCopy code
let obj1 = { a: 1, b: { c: 2 } };
let obj2 = $.extend(true, {}, obj1);
obj1.b.c = 3;
console.log(obj1); // { a: 1, b: { c: 3 } }
console.log(obj2); // { a: 1, b: { c: 2 } }

في هذا المثال، يحافظ Object.assign و $.extend على قيمة a كما هي، ولكن b في obj2 لا تتأثر بالتغيير في obj1 في حالة استخدام $.extend بسبب النسخة العميقة.