Prototype در جاوا اسکریپت چیست ؟

Prototype در جاوا اسکریپت چیست ؟

Prototype در جاوا اسکریپت چیست ؟

Prototype in Javascript

توسط : admin
جاوا اسکریپت یک زبان پویا است. می توانید هر زمان که میخواهید ، ویژگی های جدید را به یک شی وصل کنید.

 

function Student() {
    this.name = 'John';
    this.gender = 'Male';
}

var studObj1 = new Student();
studObj1.age = 15;
alert(studObj1.age); // 15

var studObj2 = new Student();
alert(studObj2.age); // undefined

همانطور که در مثال بالا مشاهده می کنید ، ویژگی سن به نمونه studObj1 اضافه شده است. با این حال ، نمونه studObj2 خاصیت سن را  نخواهد داشت زیرا فقط در نمونه studObj1 تعریف می شود.

 

بنابراین اگر بخواهیم خصوصیات جدیدی را در مرحله بعد به عملکردی که در تمام موارد به اشتراک گذاشته می شود اضافه کنیم چه کنیم؟

 

پاسخ استفاده از Prototype است .

 

prototype شیئی است که به طور پیش فرض در JavaScript با همه توابع و اشیاء همراه است .هر تابع به طور پیش فرض شامل یک شی prototype است .

نمونه اولیه یا prototype در جاوااسکریپت

 

شی prototype نوع خاصی از شیء enumerable است که می توان خصوصیات اضافی را به آن وصل کرد که در تمام موارد عملکرد سازنده آن به اشتراک گذاشته می شود.

 

بنابراین ، از prototype یک تابع در مثال بالا استفاده کنید تا خصوصیت سن  در تمام اشیاء وجود داشته باشد ، همانطور که در شکل زیر مشاهده می شود .

function Student() {
    this.name = 'John';
    this.gender = 'M';
}

Student.prototype.age = 15;

var studObj1 = new Student();
alert(studObj1.age); // 15

var studObj2 = new Student();
alert(studObj2.age); // 15

 

هر شیئی که با استفاده از literal syntax  یا constructor syntax  با کلمه کلیدی new ایجاد می شود ، شامل ویژگی __proto__ است که به شی نمونه اولیه تابع ایجاد شده توسط این شیء اشاره می کند.

 

prototype in javascript

 

می توانید ویژگی اولیه نمونه شی یا عملکرد را در ابزار توسعه دهنده کروم یا فایرفاکس مشاهده کنید. مثال زیر را در نظر بگیرید .

function Student() {
    this.name = 'John';
    this.gender = 'M';
}

var studObj = new Student();

console.log(Student.prototype); // object
console.log(studObj.prototype); // undefined
console.log(studObj.__proto__); // object

console.log(typeof Student.prototype); // object
console.log(typeof studObj.__proto__); // object

console.log(Student.prototype === studObj.__proto__ ); // true

 

همانطور که در مثال بالا مشاهده می کنید ، با استفاده از function-name> .prototype> می توانید به ویژگی prototype دسترسی پیدا کنید. با این حال ، یک شی (instance) خاصیت prototype را در معرض نمایش نمی گذارد ، در عوض می توانید با استفاده از __proto__ به آن دسترسی پیدا کنید .

 

ویژگی prototype نوع خاصی از اشیاء enumerable است که با استفاده از for in یا foreach loop قابل تکرار نیست.

 

 

اشیاء Prototype :

همانطور که قبلاً ذکر شد ، ویژگی prototype شیء نامرئی است. برای دسترسی به شی prototype ، به جای __proto__ از روش (Object.getPrototypeOf (obj استفاده کنید.

 

function Student() {
    this.name = 'John';
    this.gender = 'M';
}

var studObj = new Student();

Student.prototype.sayHi= function(){
    alert("Hi");
};

var studObj1 = new Student();
var proto = Object.getPrototypeOf(studObj1);  // returns Student's prototype object
            
alert(proto.constructor); // returns Student function

شی prototype شامل خصوصیات و متد های زیر است :

خصوصیتشرح
constructor یا سازندهایجاد یک نمونه جدید از شی
__proto__این خاصیت پنهان  در یک شی است. این شی prototype عملکردی را که به آن پیوند دارد ، باز می گرداند.

 

Methodشرح
()hasOwnPropertyیک بولین را نشان می دهد که آیا یک شیء دارای ویژگی مشخص شده به عنوان یک ویژگی مستقیم آن شیء است و از طریق زنجیره prototype به ارث نمی رسد.
()isPrototypeOfیک مقدار بولین را نشان می دهد که آیا شیء مشخص شده در زنجیره نمونه ای از شی است که به این روش فراخوانی می شود
()propertyIsEnumerable یک مقدار بولین را نشان می دهد که مشخص می کند ویژگی مشخص شده از نوع enumerable است یا خیر
()toLocaleStringرشته را به فرمت محلی بازمیگرداند .
()toStringرشته باز میگرداند .
()valueOfمقدار اولیه شیء مشخص شده را برمی گرداند.

 

کروم و فایرفاکس prototype شیء را به عنوان __proto__ نشان می دهد که پیوند عمومی است در حالی که از نظر داخلی به عنوان [[ prototype]] است. اینترنت اکسپلورر شامل __proto__ نیست. فقط اینترنت اکسپلورر 11 آن را شامل می شود.

 

متد getPrototypeOf () از زمان ECMAScript 5 بصورت استاندارد وجود داشته و از زمان اینترنت اکسپلورر 9 در دسترس است.

 

تغییرات Prototype :

همانطور که در بالا ذکر شد ، prototype هر شی با تابع شی prototype  مرتبط است. اگر تابع prototype را تغییر دهید ، فقط اشیاء جدید به prototype تغییر داده می شوند. همه اشیاء موجود دیگر هنوز به نمونه اولیه تابع پیوند دارند. مثال زیر این سناریو را نشان می دهد.

 

function Student() {
    this.name = 'John';
    this.gender = 'M';
}

Student.prototype.age = 15;

var studObj1 = new Student();
alert('studObj1.age = ' + studObj1.age); // 15

var studObj2 = new Student();
alert('studObj2.age = ' + studObj2.age); // 15

Student.prototype = { age : 20 };

var studObj3 = new Student();
alert('studObj3.age = ' + studObj3.age); // 20

alert('studObj1.age = ' + studObj1.age); // 15
alert('studObj2.age = ' + studObj2.age); // 15

 

کاربرد Prototype :

شیء prototype توسط موتور جاوا اسکریپت در دو چیز استفاده می شود ، 1) برای یافتن خصوصیات و متد های یک شی 2) برای پیاده سازی وراثت در JavaScript

function Student() {
    this.name = 'John';
    this.gender = 'M';
}

Student.prototype.sayHi = function(){
    alert("Hi");
};

var studObj = new Student();
studObj.toString();

 

در مثال بالا ، متد  toString () در Student تعریف نشده است ، بنابراین چگونه و از کجا میتواند toString() را پیدا کند؟

در اینجا prototype که در مثال دیدید ، اول از همه ، موتور JavaScript بررسی می کند که آیا روش toString () به studObj وصل شده است؟ (پیوست کردن یک عملکرد جدید به نمونه ای در JavaScript امکان پذیر است). اگر در آنجا یافت نشد از لینک __proto__ studObj استفاده می کند که به شی نمونه اولیه عملکرد Student اشاره می کند. اگر هنوز هم نتواند آنجا را پیدا کند ، در سلسه مراتب بالا می رود و شی نمونه اولیه عملکرد Object را بررسی می کند زیرا همه اشیاء در JavaScript از Object گرفته شده اند و به دنبال متد toString () هستند. بنابراین ، این متد toString () را در نمونه اولیه تابع Object پیدا می کند و بنابراین می توانیم() studObj.toString را صدا بزنیم .

 

به این ترتیب ، prototype در نگه داشتن تنها یک کپی از توابع برای همه اشیاء (instances) مفید است.

شکل زیر سناریوی فوق را نشان می دهد.

 

سناریوی نمونه اولیه در جاوا اسکریپت

 

 

 

 

 

برچسب ها

نظرات :

در عرض چند دقیقه برای ایجاد حساب

کاربری خود اقدام کنید


اکنون حساب کاربری خود را ایجاد کنید!


ایجاد حساب کاربری

با ثبت نام در نیلوتک از آخرین بروز رسانی های آموزش ها و مقالات سایت مطلع شوید