نمونه سازی JavaScript: گسترش اشیاء داخلی با توابع سفارشی

سیستم نمونه اولیه JavaScript یکی از قدرتمندترین ویژگی های آن (و گاهی سوء تفاهم) است. این امکان را به شما می دهد تا روش ها و خصوصیات جدیدی را به اشیاء موجود ، از جمله انواع بومی مانند آرایه ها ، اعداد و اشیاء اضافه کنید. در این راهنما ، ما چگونگی عملکرد نمونه سازی و نشان دادن نمونه های عملی از گسترش اشیاء داخلی را بررسی خواهیم کرد.

درک نمونه های اولیه JavaScript

هر شیء جاوا اسکریپت پنهان است [[Prototype]] خاصیتی که به یک شی دیگر پیوند دارد. هنگامی که سعی می کنید به یک ویژگی موجود در یک شی دسترسی پیدا کنید ، JavaScript زنجیره نمونه اولیه را تا زمانی که این خاصیت را پیدا کند یا به آن نرسد ، نگاه می کند nullبشر

زنجیره نمونه اولیه

const arr = [1, 2, 3];
console.log(arr.__proto__ === Array.prototype); // true
console.log(Array.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

گسترش اشیاء داخلی

در حالی که گسترش نمونه های اولیه بومی بحث برانگیز است (می تواند باعث درگیری در کد های بزرگ شود) ، می تواند برای توابع ابزار شما که به طور مکرر استفاده می کنید مفید باشد.

1. اضافه کردن یک روش به آرایه ها

بیایید یک ایجاد کنیم sum() روش آرایه ها:

Array.prototype.sum = function() {
  return this.reduce((total, num) => total + num, 0);
};

const numbers = [1, 2, 3, 4];
console.log(numbers.sum()); // 10

2. اضافه کردن یک روش به اعداد/عدد صحیح

ما می توانیم اضافه کنیم square() روش به همه اعداد:

Number.prototype.square = function() {
  return this * this;
};

const num = 5;
console.log(num.square()); // 25

3. اضافه کردن یک روش به اشیاء

بیایید اضافه کنیم deepClone() روش به همه اشیاء:

Object.prototype.deepClone = function() {
  return JSON.parse(JSON.stringify(this));
};

const original = { a: 1, b: { c: 2 } };
const clone = original.deepClone();
clone.b.c = 3;
console.log(original.b.c); // 2 (unchanged)

بهترین روشها برای نمونه سازی

1. ابتدا روشهای موجود را بررسی کنید

   if (!Array.prototype.sum) {
     Array.prototype.sum = function() { /* ... */ };
   }

1. برای روشهای غیر قابل افزایش از Object.DefineProperty استفاده کنید

   Object.defineProperty(Array.prototype, 'sum', {
     value: function() { /* ... */ },
     enumerable: false // Won't show up in for...in loops
   });

1. گزینه های دیگر را در نظر بگیرید
   برای کد مشترک ، توابع ابزار را در عوض در نظر بگیرید:

   function sumArray(arr) {
     return arr.reduce((t, n) => t + n, 0);
   }

مثال پیشرفته: زنجیر کردن روشهای سفارشی

Array.prototype.square = function() {
  return this.map(n => n * n);
};

Array.prototype.average = function() {
  return this.sum() / this.length;
};

const results = [1, 2, 3].square().average();
console.log(results); // 4.666... (average of [1, 4, 9])

در صورت عدم اصلاح نمونه های اولیه

1. در پروژه های بزرگ تیمی که ممکن است درگیری ها رخ دهد
2. هنگام کار با کتابخانه های شخص ثالث که ممکن است انتظار رفتار پیش فرض داشته باشند
3. برای خواص/روش هایی که ممکن است در آینده به ویژگی های جاوا اسکریپت بومی تبدیل شوند

پایان

سیستم نمونه اولیه JavaScript قابلیت های قدرتمندی را برای گسترش اشیاء داخلی ارائه می دهد. در حالی که شما باید از این ویژگی به طور معقول استفاده کنید ، درک نمونه های اولیه برای توسعه پیشرفته جاوا اسکریپت بسیار مهم است. این که آیا شما می توانید نمونه های اولیه بومی را گسترش دهید یا توابع ابزار ایجاد کنید ، زنجیره نمونه اولیه برای نحوه کار JavaScript اساسی است.

با خیال راحت سؤال کنید ، برنامه نویسی مبارک! 🚀