فصل هفتم

برنامه‌نویسی شی‌گرا (OOP) — Object Oriented Programming

مطمئناً درک برنامه نویسی شی گرا (OOP) برای درک اینکه چرا و چگونه جاوا اسکریپت ماهیت شی گرا خود را پیاده سازی می کند بسیار مهم است. بیایید به مفهوم OOP و کاربرد آن در جاوا اسکریپت بپردازیم.

برنامه نویسی شی گرا چیست؟

برنامه نویسی شی گرا (OOP) یک الگوی برنامه نویسی است که از "اشیاء" برای طراحی برنامه های کاربردی و برنامه های کامپیوتری استفاده می کند. از چندین اصل مانند کپسوله‌سازی، وراثت و چند شکلی برای افزایش خوانایی کد، قابلیت استفاده مجدد و مقیاس‌پذیری استفاده می‌کند. در اینجا خلاصه ای از این اصول آورده شده است:

• کپسوله‌سازی / Encapsulation: این اصل داده‌ها (ویژگی‌ها) و روش‌ها (توابع) را که روی داده‌ها کار می‌کنند در واحدهای واحدی به نام «اشیاء» دسته‌بندی می‌کند. دسترسی مستقیم به برخی از اجزای یک شی را محدود می کند، که می تواند از تغییر تصادفی داده ها جلوگیری کند.
• وراثت / Inheritance: این به یک کلاس اجازه می دهد تا ویژگی ها و متدهای کلاس دیگر را به ارث ببرد. ما از آن برای ایجاد یک کلاس جدید استفاده می کنیم که نسخه اصلاح شده یک کلاس موجود است.
• چند شکلی / Polymorphy: این اصل اجازه می دهد تا اشیاء از کلاس های مختلف به عنوان اشیاء یک ابر کلاس مشترک در نظر گرفته شوند. این یک رابط واحد را قادر می سازد تا فرم های مختلف زیرین (انواع داده) را نشان دهد.
• Abstraction: این اصل جزئیات پیاده سازی پیچیده را پنهان می کند و فقط ویژگی های ضروری یک شی را نشان می دهد. این به کاهش پیچیدگی و تلاش برنامه نویسی کمک می کند.

چرا جاوا اسکریپت یک زبان شی گرا در نظر گرفته می شود؟

جاوا اسکریپت یک زبان برنامه نویسی شی گرا در نظر گرفته می شود زیرا از اصول OOP از طریق نمونه های اولیه و سیستم کلاس خود (معرفی شده در ECMAScript 2015/ES6) پشتیبانی می کند. علیرغم اینکه جاوا اسکریپت مبتنی بر نمونه اولیه است، می توان از روشی شی گرا استفاده کرد. در اینجا نحوه هماهنگی جاوا اسکریپت با اصول OOP آمده است:

• اشیاء و نمونه های اولیه: جاوا اسکریپت اساساً در مورد اشیا است. یک شی در جاوا اسکریپت یک موجودیت مستقل با خصوصیات و نوع است. این زبان به جای وراثت کلاسیک از نمونه‌های اولیه استفاده می‌کند، اما با تنظیم نمونه اولیه (یعنی شی والد) یک شی به شی دیگر، برنامه‌نویسی شی‌گرا را امکان‌پذیر می‌کند.
• کلاس ها (ES6): جاوا اسکریپت دستور کلاسی را برای ایجاد اشیا و مدیریت وراثت معرفی کرد. زیر سرپوش، کلاس ها در جاوا اسکریپت فقط توابع ویژه هستند. سینتکس کلاس یک مدل ارثی شی گرا جدید به جاوا اسکریپت معرفی نمی کند. این فقط قند نحوی بر وراثت مبتنی بر نمونه اولیه موجود است و استفاده از آن را آسان‌تر می‌کند.
• Encapsulation: جاوا اسکریپت با ایجاد توابع و متغیرهایی که از خارج از تابع کپسوله‌سازی قابل دسترسی نیستند، از کپسوله‌سازی پشتیبانی می‌کند. افزوده‌های اخیر «let» و «const» برای محدوده بلوک و استفاده از بسته‌ها، این قابلیت را افزایش می‌دهد.
• وراثت: از طریق زنجیره‌سازی نمونه اولیه، اشیاء جاوا اسکریپت ویژگی‌هایی را از اشیاء دیگر به ارث می‌برند و به طور موثر به یک نوع شی اجازه می‌دهد تا متدها و ویژگی‌ها را از دیگری به ارث ببرد.
• چند شکلی: جاوا اسکریپت از چندشکلی پشتیبانی می کند. به عنوان مثال، یک تابع را می توان بر روی اشیاء مختلف به ارث رسیده از یک والد یا رابط استفاده کرد.

درک اصول OOP زمینه ای را به این موضوع می دهد که چرا جاوا اسکریپت بر اشیاء تأکید دارد. در جاوا اسکریپت، تقریباً همه چیز یک شی است، از انواع داده های اولیه (زمانی که مانند اشیاء استفاده می شوند) تا ساختارهای داده پیچیده تر. جاوا اسکریپت از اشیاء برای ساخت برنامه های کاربردی انعطاف پذیرتر و مقیاس پذیرتر استفاده می کند و با الگوی OOP برای ساختار برنامه ها همسو می شود.

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

اشیاء جاوا اسکریپت - Object in JS

جاوا اسکریپت به عنوان یک زبان چند پارادایم می ایستد و دارای ویژگی های فراوانی است که به آن تطبیق پذیری برای مقابله با طیف گسترده ای از وظایف می دهد. محور قابلیت های آن مفهوم اشیا است. این عنصر اساسی نه تنها ساختارهای خود زبان، مانند آرایه‌ها و توابع را زیربنا می‌دهد، بلکه به گستره وسیعی از APIهای مرورگر که بر روی جاوا اسکریپت ساخته شده‌اند نیز قدرت می‌دهد.

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

 این فصل به ابهام زدایی از اشیاء در جاوا اسکریپت اختصاص یافته است و کاوش کاملی در مورد تئوری پشت اشیاء و نحو مورد استفاده برای دستکاری آنها ارائه می دهد. از طریق این سفر، هدف ما این است که شما را با دانش برای ایجاد و استفاده مؤثر از اشیاء خود مسلح کنیم.

درک ماهیت اشیاء جاوا اسکریپت

اشیاء در جاوا اسکریپت شبیه صندوقچه های گنج هستند که ملغمه ای از داده ها و عملکردها را ذخیره می کنند. این مجموعه ها شامل عناصر مختلفی هستند که هر کدام با یک نام منحصر به فرد برچسب گذاری شده اند و ارزش یا عملکرد خود را دارند. این تجمیع ستون فقرات آنچه را که ما به عنوان اشیا می شناسیم تشکیل می دهد - ساختاری که در سازماندهی و مدیریت داده ها در جاوا اسکریپت نقش اساسی دارد.

پیش نیازها:

• درک اساسی از HTML و CSS.
• آشنایی با مفاهیم اصلی جاوا اسکریپت، همانطور که در مراحل اولیه و بلوک های سازنده زبان مطرح شد.

آناتومی اشیاء جاوا اسکریپت

سناریویی را در نظر بگیرید که در آن یک کتابخانه دیجیتال برای فهرست‌نویسی کتاب‌ها ایجاد می‌کنیم. هر کتاب در این کتابخانه را می توان به عنوان یک شی نشان داد، جزئیاتی مانند عنوان، نویسنده و روشی برای نمایش مختصر این اطلاعات را در بر می گیرد.

خلق اولین شی ما: یک کتاب

const book = {

 title: "JavaScript: The Good Parts",

 author: "Douglas Crockford",

 displayInfo: function() {
   console.log(`${this.title} by ${this.author}`);
 }
};

بینش های کلیدی:

اشیاء در داخل پرانتزهای مجعد {} تعریف می‌شوند و هر عضو (یا ویژگی) از یک الگوی کلیدی پیروی می‌کند: مقدار.

توابع درون اشیا، که به عنوان متدها شناخته می شوند، شی را قادر می سازند تا با داده های خود تعامل داشته باشد.

این کلمه کلیدی دسترسی به اعضای خود شی را فراهم می کند.

دسترسی به ویژگی های شی: نماد نقطه و براکت

برای بازیابی یا اصلاح ویژگی های شی کتاب خود، از دو نماد اصلی استفاده می کنیم:

1. Dot Notation: book.title یک رویکرد ساده برای دسترسی به ویژگی ها ارائه می دهد.

1. علامت گذاری براکت: کتاب ["نویسنده"] زمانی مفید است که نام ویژگی ها پویا یا در متغیرها ذخیره شود.

سازندگان: طرح‌بندی اشیاء

وقتی کتابخانه دیجیتال ما گسترش می‌یابد، ایجاد دستی یک شی برای هر کتاب غیرعملی می‌شود. اینجاست که سازندگان وارد عمل می‌شوند و به‌عنوان نقشه‌ای برای ایجاد چندین شی از یک نوع عمل می‌کنند.

function Book(title, author) {
 this.title = title;
 this.author = author;
 this.displayInfo = function() {
   console.log(`${this.title} by ${this.author}`);
 };
}
const myBook = new Book("Eloquent JavaScript", "Marijn Haverbeke");
myBook.displayInfo();

سناریوی عملی: ایجاد رابط کتابخانه دیجیتال

برای تحکیم درک خود، بیایید شروع به ایجاد یک رابط کاربری ساده برای کتابخانه دیجیتال خود کنیم. این رابط به کاربران امکان می دهد کتاب هایی را به مجموعه اضافه کرده و آنها را مشاهده کنند.

ساختار HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Digital Library</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <div id="libraryForm">
       <input type="text" id="title" placeholder="Book Title">
       <input type="text" id="author" placeholder="Author">
       <button onclick="addBookToLibrary()">Add Book</button>
   </div>
   <div id="libraryDisplay"></div>
   <script src="script.js"></script>
</body>
</html>

CSS Style

#libraryForm {
   margin-bottom: 20px;
}
#libraryDisplay {
   margin-top: 20px;
}

JavaScript: حیات بخشیدن به کتابخانه

// Define an array to hold all book objects for our digital library.
let library = [];
// Define a constructor function for creating 'Book' objects.
// Each book will have a title and an author.
function Book(title, author) {
   // Assign the 'title' and 'author' parameters to the object's properties.
   this.title = title;
   this.author = author;
}
// This function adds a new book to the library.
// It is triggered by clicking the 'Add Book' button in the HTML.
function addBookToLibrary() {
   // Retrieve the book title and author from the input fields.
   const title = document.getElementById('title').value;
   const author = document.getElementById('author').value;
   // Create a new 'Book' object with the input values.
   const newBook = new Book(title, author);
   // Add the newly created book object to the 'library' array.
   library.push(newBook);
   // Refresh the library display to include the new book.
   displayLibrary();
}
// This function updates the library display.
// It shows all books currently stored in the 'library' array.
function displayLibrary() {
   // Access the 'libraryDisplay' div where books will be shown.
   const display = document.getElementById('libraryDisplay');
   // Clear the display to ensure we're not duplicating books.
   display.innerHTML = '';
   // Loop through each book in the 'library' array.
   library.forEach(book => {
       // For each book, create a new 'div' element.
       const bookElement = document.createElement('div');
       // Set the text content of the 'div' to show the book's title and author.
       bookElement.textContent = `${book.title} by ${book.author}`;
       // Add the newly created 'div' to the 'libraryDisplay' div, making the book visible.
       display.appendChild(bookElement);
   });
}

• سازنده Book، طرح اولیه را برای هر شیء کتاب تعریف می کند.
• تابع addBookToLibrary ورودی فرم را می گیرد، یک شی کتاب جدید ایجاد می کند و آن را به آرایه کتابخانه اضافه می کند.
• تابع displayLibrary روی آرایه کتابخانه تکرار میشود و عناصری را برای هر کتاب ایجاد و نمایش می دهد.

این مثال عملی نشان می‌دهد که چگونه اشیا می‌توانند مدیریت داده‌ها و عملکردهای مرتبط را ساده‌سازی کنند و یک رویکرد ساختاریافته برای چالش‌های برنامه‌نویسی ارائه دهند.

نتیجه:

نمونه های اولیه / Prototype

درک مفهوم نمونه های اولیه / Prototype برای تسلط بر جاوا اسکریپت ضروری است، زیرا در قلب مکانیسم وراثت شی جاوا اسکریپت قرار دارد. در اینجا، نمونه‌های اولیه، نقش زنجیره‌های نمونه اولیه و روش‌های تنظیم نمونه اولیه یک شی را بررسی می‌کنیم.

مقدمه ای بر نمونه های اولیه اشیاء

در جاوا اسکریپت، نمونه های اولیه نقش محوری در ارث بردن خواص و متدها از یک شی به شی دیگر دارند. این پایه و اساس وراثت مبتنی بر نمونه اولیه جاوا اسکریپت است و آن را از وراثت کلاسیک موجود در زبان هایی مانند جاوا یا C++ متمایز می کند.

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

تصور کنید یک شی ساده در جاوا اسکریپت به صورت زیر ایجاد کنید:

// Creating a basic object with a property and a method
const myObject = {

 city: "Madrid",

 greet() {
   console.log(`Greetings from ${this.city}`);

 },

};

هنگام فراخوانی myObject.greet();، پیامی دریافت می کنید: "Greetings from Madrid". پس از بررسی myObject در کنسول، نه تنها City و Greet بلکه تعداد زیادی از ویژگی های دیگر مانند toString، valueOf، و به ویژه، __proto__ را متوجه خواهید شد.

این ویژگی‌های اضافی بخشی از نمونه اولیه myObject هستند - یک شی داخلی که myObject متدها و ویژگی‌ها را از آن به ارث می‌برد. این وراثت بخشی از چیزی است که به عنوان زنجیره اولیه شناخته می شود.

// Accessing an inherited method
myObject.toString(); // Outputs: "[object Object]"

درک وراثت نمونه اولیه

هر شی جاوا اسکریپت یک نمونه اولیه دارد. نمونه اولیه خود یک شی است و می تواند نمونه اولیه خود را داشته باشد و یک "زنجیره نمونه اولیه" ایجاد کند. این زنجیره تا رسیدن به یک نمونه اولیه با نول به عنوان نمونه اولیه خود ادامه می یابد و پایان زنجیره را مشخص می کند.

برای مثال برای دیدن این زنجیره:

// Exploring the prototype chain
console.log(Object.getPrototypeOf(myObject)); // Object.prototype

این نشان می دهد که نمونه اولیه myObject Object.prototype است، نمونه اولیه که همه اشیا به طور پیش فرض از آن ارث می برند.

ویژگی های سایه زدن - Shadowing Properties

چه می شود اگر یک شی و نمونه اولیه آن دارای ویژگی هایی با نام یکسان باشند؟ ویژگی خود شی، ویژگی نمونه اولیه را تحت الشعاع قرار می دهد. این به عنوان سایه مالکیت شناخته می شود.

تنظیم نمونه اولیه یک شی

برای تنظیم صریح نمونه اولیه یک شی، جاوا اسکریپت مکانیسم هایی مانند Object.create() و توابع سازنده را ارائه می دهد.

// Creating an object with a specific prototype
const personPrototype = {
 greet() {
   console.log("hello!");

 },

};
const carl = Object.create(personPrototype);
carl.greet(); // Outputs: "hello!"

در اینجا Object.create() یک شی جدید به نام carl ایجاد می کند که نمونه اولیه آن personPrototype است.

استفاده از سازندگان  -Utilizing Constructors

توابع سازنده به شما این امکان را می دهند که نمونه اولیه را برای تمام نمونه های ایجاد شده از سازنده تعریف کنید.

// Defining a constructor function
function Person(name) {
 this.name = name;
}
Person.prototype.greet = function() {
 console.log(`Hi, my name is ${this.name}`);
};
const alice = new Person("Alice");
alice.greet(); // Outputs: "Hi, my name is Alice"

در این مثال، تمام نمونه‌های Person از Person.prototype ارث می‌برند و روش‌های مشترک مانند greet را فعال می‌کنند.

نمونه های اولیه: ستون فقرات اشیاء جاوا اسکریپت

از طریق زنجیره‌های نمونه اولیه، جاوا اسکریپت به ارث می‌رسد و به اشیا اجازه می‌دهد تا عملکردها را به طور موثر به اشتراک بگذارند و گسترش دهند. این سیستم زیربنای ویژگی های شی گرا زبان است و توسعه دهندگان را قادر می سازد تا ساختارهای کد پیچیده و مدولار را بسازند.

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

بیایید یک مثال عملی را بررسی کنیم که وراثت نمونه اولیه جاوا اسکریپت را با یک برنامه وب کوچک نشان می دهد - یک رابط کاربری ساده که به کاربران اجازه می دهد با اشیایی که اشکال هندسی را نشان می دهند تعامل داشته باشند. این مثال شامل ایجاد یک سازنده شکل اولیه و گسترش آن برای ایجاد انواع خاصی از اشکال است.

سناریو: انتخابگر شکل

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

ساختار HTML

ابتدا HTML را با یک کشویی برای انتخاب شکل و بخشی برای نمایش خصوصیات شکل تنظیم می کنیم.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shape Selector</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
   <select id="shapeSelect">
       <option value="circle">Circle</option>
       <option value="square">Square</option>
   </select>
   <div id="shapeInfo"></div>
<script src="script.js"></script>
</body>
</html>

استایل CSS

در مرحله بعد، ما برخی از استایل های اولیه را اضافه می کنیم تا رابط کاربری خود را از نظر بصری جذاب تر کنیم.

/* style.css */

body {
   font-family: Arial, sans-serif;
   margin: 20px;
}
#shapeInfo {
   margin-top: 20px;
}

منطق جاوا اسکریپت

اکنون، سازنده‌های شکل و روش‌های نمونه اولیه را تعریف می‌کنیم، سپس شنونده رویداد را برای انتخاب شکل سیم‌کشی می‌کنیم.

// script.js
// Shape constructor
function Shape(name) {
 this.name = name;
}
// Adding a method to the Shape prototype
Shape.prototype.displayInfo = function() {
 return `Shape: ${this.name}<br>`;
};
// Circle constructor
function Circle(radius) {
 Shape.call(this, 'Circle');
 this.radius = radius;
}
// Setting Circle's prototype and constructor reference
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;
// Adding methods to Circle prototype
Circle.prototype.area = function() {
 return Math.PI * this.radius * this.radius;
};
Circle.prototype.perimeter = function() {
 return 2 * Math.PI * this.radius;
};
// Square constructor
function Square(sideLength) {
 Shape.call(this, 'Square');
 this.sideLength = sideLength;
}
// Setting Square's prototype and constructor reference
Square.prototype = Object.create(Shape.prototype);
Square.prototype.constructor = Square;
// Adding methods to Square prototype
Square.prototype.area = function() {
 return this.sideLength * this.sideLength;
};
Square.prototype.perimeter = function() {
 return this.sideLength * 4;
};
// Event listener for shape selection
document.getElementById('shapeSelect').addEventListener('change', function() {
 const shapeInfoDiv = document.getElementById('shapeInfo');
 let shape;
 switch(this.value) {
   case 'circle':

     shape = new Circle(5); // Example radius

     break;
   case 'square':

     shape = new Square(4); // Example side length

     break;
 }
 shapeInfoDiv.innerHTML = shape.displayInfo() + `Area: ${shape.area().toFixed(2)}<br>Perimeter: ${shape.perimeter().toFixed(2)}`;
});

این کد جاوا اسکریپت نحوه استفاده از وراثت نمونه اولیه را برای گسترش یک سازنده شکل پایه با انواع شکل های خاص مانند دایره و مربع نشان می دهد. از روش Object.create برای تنظیم نمونه اولیه سازنده های مشتق شده استفاده می کند و اطمینان حاصل می کند که ویژگی سازنده به تابع سازنده صحیح برمی گردد.

پس از انتخاب یک شکل، شیء شکل مربوطه را نمونه سازی می کند و مساحت و محیط آن را در #shapeInfo div نمایش می دهد. این مثال قدرت و انعطاف‌پذیری سیستم نمونه اولیه جاوا اسکریپت را در یک سناریوی عملی نشان می‌دهد و استفاده مجدد و گسترش کد را تسهیل می‌کند.

گسترش مثال انتخاب شکل

بیایید مثال انتخاب شکل را گسترش دهیم تا مفید بودن کلاس‌ها (یا در مثال قبلی، توابع سازنده که مشابه کلاس‌ها عمل می‌کنند) را برای ایجاد نمونه‌های جدید و گسترش برنامه‌مان بیشتر نشان دهیم.

سناریوی اضافی: ایجاد شکل پویا

فرض کنید می‌خواهیم برنامه‌مان را ارتقا دهیم تا به کاربران اجازه دهیم ابعاد یک دایره یا مربع را وارد کنند و به صورت پویا آن شکل را ایجاد کنند و ویژگی‌های آن را نمایش دهند.

گسترش HTML

فیلدهای ورودی را به HTML خود اضافه می کنیم تا به کاربران اجازه دهیم ابعاد شکل انتخابی خود را وارد کنند.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dynamic Shape Creator</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <label for="shapeSelect">Select a shape:</label>
   <select id="shapeSelect">
       <option value="">Please select</option>
       <option value="circle">Circle</option>
       <option value="square">Square</option>
   </select>
   <div id="dimensionInput"></div>
   <button id="createShape">Create Shape</button>
   <div id="shapeInfo"></div>
   <script src="script.js"></script>
</body>
</html>

اصلاح جاوا اسکریپت

ما جاوا اسکریپت خود را تغییر می دهیم تا ورودی ابعاد را مدیریت کند و به صورت پویا اشکالی با اندازه های تعریف شده توسط کاربر ایجاد کنیم.

// script.js
// Shape constructor
function Shape(name) {
 this.name = name;
}
// Adding a method to the Shape prototype
Shape.prototype.displayInfo = function() {
 return `Shape: ${this.name}<br>`;
};
// Circle constructor
function Circle(radius) {
 Shape.call(this, 'Circle');
 this.radius = radius;
}
// Setting Circle's prototype and constructor reference
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;
// Adding methods to Circle prototype
Circle.prototype.area = function() {
 return Math.PI * this.radius * this.radius;
};
Circle.prototype.perimeter = function() {
 return 2 * Math.PI * this.radius;
};
// Square constructor
function Square(sideLength) {
 Shape.call(this, 'Square');
 this.sideLength = sideLength;
}
// Setting Square's prototype and constructor reference
Square.prototype = Object.create(Shape.prototype);
Square.prototype.constructor = Square;
// Adding methods to Square prototype
Square.prototype.area = function() {
 return this.sideLength * this.sideLength;
};
Square.prototype.perimeter = function() {
 return this.sideLength * 4;
};
// Expanding the event listener to handle dimension input
document.getElementById('shapeSelect').addEventListener('change', function() {
 const dimensionInputDiv = document.getElementById('dimensionInput');
 let inputHTML = '';
 switch(this.value) {
   case 'circle':
     inputHTML = 'Radius: <input type="number" id="radiusInput" min="0"><br>';
     break;
   case 'square':
     inputHTML = 'Side Length: <input type="number" id="sideLengthInput" min="0"><br>';
     break;
 }
 dimensionInputDiv.innerHTML = inputHTML;
});
// Event listener for the 'Create Shape' button
document.getElementById('createShape').addEventListener('click', function() {
 const shapeType = document.getElementById('shapeSelect').value;
 const shapeInfoDiv = document.getElementById('shapeInfo');
 let shape;
 switch(shapeType) {
   case 'circle':
     const radius = document.getElementById('radiusInput').value;
     shape = new Circle(radius);
     break;
   case 'square':
     const sideLength = document.getElementById('sideLengthInput').value;
     shape = new Square(sideLength);
     break;
 }
 if(shape) {
   shapeInfoDiv.innerHTML = shape.displayInfo() + `Area: ${shape.area().toFixed(2)}<br>Perimeter: ${shape.perimeter().toFixed(2)}`;
 } else {
   shapeInfoDiv.innerHTML = "Please select a shape and enter dimensions.";
 }
});

چرا توابع/کلاس های سازنده مفید هستند؟

• استفاده مجدد و کارایی کد: با تعریف یک سازنده Shape عمومی و سازنده های خاص مانند Circle و Square، می توانیم چندین نمونه از این اشکال را بدون تکرار کد ایجاد کنیم. هر نمونه شکل جدید به طور خودکار به روش های تعریف شده در سازنده و نمونه اولیه خود دسترسی خواهد داشت.
• مقیاس پذیری: اگر تصمیم به معرفی یک شکل جدید مانند مثلث داشته باشیم، می توانیم به سادگی بدون تغییر شکل های موجود، سازنده جدیدی برای آن تعریف کنیم. این باعث می شود برنامه ما به راحتی گسترش یابد.
• قابلیت نگهداری: با ویژگی ها و روش های محصور شده در سازنده ها و نمونه های اولیه، نگهداری و به روز رسانی کد آسان تر است. به عنوان مثال، تغییرات در نمونه اولیه Circle، به طور خودکار برای همه نمونه های Circle اعمال می شود.
• سازماندهی: سازنده ها و نمونه های اولیه به سازماندهی کد مربوط به اشیاء خاص کمک می کنند و آن را واضح تر و ماژولارتر می کنند.

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

کلاس‌های جاوا اسکریپت

بیایید نگاه دقیق تری به کلاس‌های جاوا اسکریپت بیندازیم و آن‌ها را با دیدگاهی تازه و مثال‌های متمایز دوباره تصور کنیم. این نه تنها درک واضح‌تری از کلاس‌ها و نقش آن‌ها در جاوا اسکریپت ارائه می‌کند، بلکه کاربرد عملی آن‌ها را با نمونه‌های کد کامل همراه با تفسیر نشان می‌دهد.

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

کلاس‌ها در جاوا اسکریپت به‌عنوان نقشه‌ای برای ایجاد اشیایی عمل می‌کنند که ویژگی‌ها و روش‌های مشابهی دارند. در حالی که جاوا اسکریپت مبتنی بر نمونه اولیه باقی می‌ماند، کلاس‌ها برای تولید نمونه‌های شی که به همان ساختار می‌پیوندند، نحو سنتی‌تر و قابل خواندن‌تری ارائه می‌دهند. این لایه های انتزاعی بر روی وراثت مبتنی بر نمونه اولیه موجود، ایجاد و وراثت شی را ساده می کند.

درک کلاس ها و سازندگان

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

// Defining a class
class Book {
 constructor(title, author) {
   this.title = title;
   this.author = author;
 }
 // Method to display book information
 displayInfo() {
   console.log(`"${this.title}" by ${this.author}`);
 }
}
// Creating an instance of Book
const myBook = new Book("1984", "George Orwell");
myBook.displayInfo(); // Output: "1984" by George Orwell

این مثال یک کلاس Book را با ویژگی هایی برای عنوان و نویسنده کتاب تعریف می کند. متد سازنده این خصوصیات را با ایجاد یک نمونه Book جدید مقدار دهی اولیه می کند و متد displayInfo جزئیات کتاب را چاپ می کند.

ساده سازی سازندگان

اگر کلاس شما نیاز به مقداردهی اولیه خاصی ندارد، می توانید سازنده را حذف کنید. جاوا اسکریپت یک سازنده پیش فرض در چنین مواردی ارائه می دهد:

class Animal {
 sleep() {
   console.log("Sleeping...");
 }
}
const cat = new Animal();
cat.sleep(); // Output: Sleeping...

اجرای وراثت

وراثت به یک کلاس اجازه می دهد تا ویژگی ها و متدها را از کلاس دیگر به ارث ببرد. برای رسیدن به این هدف از کلمه کلیدی extends استفاده کنید:

class Person {
 constructor(name) {
   this.name = name;
 }
 greet() {
   console.log(`Hello, my name is ${this.name}.`);
 }
}
// Defining a subclass
class Student extends Person {
 constructor(name, grade) {

   super(name); // Call the parent class constructor

   this.grade = grade;
 }
 // Extending functionality
 study() {
   console.log(`${this.name} is studying.`);
 }
}
const student = new Student("Alice", "A");
student.greet(); // Hello, my name is Alice.
student.study(); // Alice is studying.

در این مثال، Student Person را گسترش می‌دهد و ویژگی‌ها و روش‌های آن را به ارث می‌برد و در عین حال موارد جدید را معرفی می‌کند.

کپسوله سازی / Encapsulation با خواص و روش های خصوصی

کلاس‌های جاوا اسکریپت از کپسوله‌سازی پشتیبانی می‌کنند و به ویژگی‌ها و روش‌ها اجازه می‌دهند با استفاده از پیشوند # به‌عنوان خصوصی علامت‌گذاری شوند. این دسترسی به آنها را در خارج از کلاس محدود می کند:

class SecretDiary {
 #secretMessage;
 constructor(message) {
   this.#secretMessage = message;
 }
 // Public method to access the private property
 revealSecret() {
   console.log(this.#secretMessage);
 }
}
const diary = new SecretDiary("I love JavaScript.");
diary.revealSecret(); // I love JavaScript.
// diary.#secretMessage; // Uncaught SyntaxError: Private field '#secretMessage' must be declared in an enclosing class

مثال عملی: ماشین حساب شکل

بیایید دانش خود را برای ایجاد یک برنامه کاربردی ساده که مساحت و محیط را برای اشکال مختلف محاسبه می کند، به کار ببریم:

ساختار HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dynamic Shape Creator</title>
   <link rel="stylesheet" href="/ITClass01/style.css">
</head>
<body>
<!-- Shape Calculator -->
<label for="shape">Choose a shape:</label>
<select id="shape">
 <option value="circle">Circle</option>
 <option value="square">Square</option>
</select>
<label for="dimension">Dimension:</label>
<input id="dimension" type="number" placeholder="Radius or Side Length" />
<button id="calculate">Calculate</button>
<div id="result"></div>
   <script src="script.js"></script>
</body>
</html>

CSS Styling

/* Basic styling for clarity */

body {
 font-family: Arial, sans-serif;
}

منطق جاوا اسکریپت

// Shape class definitions
class Shape {
 constructor(name) {
   this.name = name;
 }
}
class Circle extends Shape {
 constructor(radius) {
   super("Circle");
   this.radius = radius;
 }
 area() {
   return Math.PI * this.radius ** 2;
 }
 perimeter() {
   return 2 * Math.PI * this.radius;
 }
}
class Square extends Shape {
 constructor(sideLength) {
   super("Square");
   this.sideLength = sideLength;
 }
 area() {
   return this.sideLength ** 2;
 }
 perimeter() {
   return this.sideLength * 4;
 }
}
// Handling user input
document.getElementById('calculate').addEventListener('click', function() {
 const shapeType = document.getElementById('shape').value;
 const dimension = Number(document.getElementById('dimension').value);
 let shape;
 switch(shapeType) {
   case 'circle':
     shape = new Circle(dimension);
     break;
   case 'square':
     shape = new Square(dimension);
     break;
 }
 // Displaying results
 if(shape) {
   document.getElementById('result').innerHTML =
     `The area of the ${shape.name} is ${shape.area().toFixed(2)}, and the perimeter is ${shape.perimeter().toFixed(2)}.`;
 } else {
   document.getElementById('result').innerHTML = "Please select a shape and enter its dimension.";
 }
});

این مثال قدرت کلاس‌های جاوا اسکریپت را در ایجاد کدهای مدولار، قابل نگهداری و مقیاس‌پذیر با پیاده‌سازی یک ماشین‌حساب شکل تعاملی که به اصول OOP پایبند است، نشان می‌دهد.

آشنایی با متدها در جاوا اسکریپت

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

مفاهیم کلیدی روش ها:

• کپسوله‌سازی: روش‌ها به شما این امکان را می‌دهند که رفتارهای خاصی را با اشیا محصور کنید و اطمینان حاصل کنید که جزئیات داخلی یک شی از بیرون پنهان است و فقط آنچه لازم است را آشکار می‌کند.
• قابلیت استفاده مجدد: با تعریف روش ها بر روی اشیاء، می توانید از آنها در بخش های مختلف برنامه خود استفاده مجدد کنید و تکرار کد را کاهش دهید.
• روش‌های داخلی: جاوا اسکریپت تعداد زیادی از روش‌های داخلی را برای اشیاء بومی خود مانند آرایه‌ها، رشته‌ها و اعداد فراهم می‌کند و عملیات رایج را بدون نیاز به کتابخانه‌های خارجی تسهیل می‌کند.

متدهای اعلام - Declaring Methods

همانطور که در مثال زیر نشان داده شده است، می‌توان متدها را با مرتبط کردن یک تابع با یک ویژگی به صورت لفظی شی اعلان کرد:

const person = {

 name: 'John Doe',

 greet: function() {
   console.log(`Hello, my name is ${this.name}!`);
 }
};
person.greet(); // Outputs: Hello, my name is John Doe!

سینتکس متد ES6

ES6 یک سینتکس مختصر برای تعریف روش‌ها در اشیاء معرفی کرد، و نحو را تمیزتر و شهودی‌تر کرد:

const person = {

 name: 'Jane Doe',

 greet() {
   console.log(`Hello, my name is ${this.name}!`);
 }
};
person.greet(); // Outputs: Hello, my name is Jane Doe!

متدهای داخلی شی - Built-in Object Methods

اشیاء داخلی جاوا اسکریپت با روش های خاص خود ارائه می شوند. برای مثال، اشیاء رشته‌ای متدهایی برای دستکاری دارند، آرایه‌ها متدهایی را برای تکرار و تبدیل و غیره ارائه می‌دهند.

let str = 'Hello, World!';
console.log(str.toUpperCase()); // Outputs: HELLO, WORLD!

متدهای رشته ای - String Methods

let arr = [1, 2, 3];
let doubled = arr.map(num => num * 2);
console.log(doubled); // Outputs: [2, 4, 6]

متدهای آرایه - Array Methods

let arr = [1, 2, 3];
let doubled = arr.map(num => num * 2);
console.log(doubled); // Outputs: [2, 4, 6]

متدهای سفارشی - Custom Methods

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

مثال: یک شیء شمارنده

const counter = {

 count: 0,

 increment() {
   this.count += 1;
   console.log(this.count);

 },

 reset() {
   this.count = 0;
   console.log('Counter reset to 0');
 }
};
counter.increment(); // Outputs: 1
counter.increment(); // Outputs: 2
counter.reset();     // Outputs: Counter reset to 0

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

تفاوت بین توابع و متدها در جاوا اسکریپت

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

• عملکرد: به طور مستقل فراخوانی می شود.
• متد: بر روی یک شیء فراخوانی می شود.

سناریو: یک شیء پست وبلاگ

ما با یک پست وبلاگ ساده یک سناریو ایجاد خواهیم کرد. این شامل HTML برای ساختار صفحه، CSS برای استایل و جاوا اسکریپت برای به روز رسانی پویا محتوا است. جاوا اسکریپت ما شامل یک تابع مستقل و یک متد در یک شی برای نشان دادن تفاوت خواهد بود.

HTML(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Blog Post Example</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <h1 id="postTitle"></h1>
   <p id="postContent"></p>
   <button id="updateContent">Update Content</button>
   <script src="script.js"></script>
</body>
</html>

CSS Style (Style.css)

/* Basic styling for clarity */

body {
   font-family: Arial, sans-serif;
   margin: 40px;
}
h1 {
   color: navy;
}
button {
   margin-top: 20px;
   padding: 10px;
}

JavaScript (script.js)

// Object with a method
const blogPost = {

   title: "JavaScript Functions vs Methods",

   content: "A function is called independently, while a method is associated with an object.",
   // Method to display blog post details
   display() {
       document.getElementById("postTitle").textContent = this.title;
       document.getElementById("postContent").textContent = this.content;
   }
};
// Standalone function to update content
function updateBlogContent() {
   blogPost.content += " This is an added sentence to demonstrate updating content.";
   blogPost.display(); // Calls the method within the object
}
// Initial display using the method
blogPost.display();
// Event listener for button to invoke the standalone function
document.getElementById("updateContent").addEventListener("click", updateBlogContent);

توضیح گام به گام:

• راه اندازی HTML: ما یک طرح صفحه وب ساده با عنوان (<h1>)، محتوا (<p>) و یک دکمه برای به روز رسانی محتوا ایجاد می کنیم.
• استایل CSS: سبک های پایه برای وضوح بصری اعمال می شوند.
• تعریف شی: شی blogPost شامل عنوان، محتوا و روش نمایش است که صفحه وب را با عنوان و محتوا به روز می کند.
• روش: blogPost.display یک متد است زیرا درون شیء blogPost تعریف شده و فراخوانی شده است. این عناصر HTML را با عنوان و محتوای پست وبلاگ به روز می کند.
• عملکرد مستقل: updateBlogContent یک تابع معمولی است که ویژگی محتوای blogPost را تغییر می دهد و سپس روش نمایش را برای به روز رسانی صفحه وب فراخوانی می کند. این یک تابع مستقل در تعامل با یک روش شی را نشان می دهد.
• شنونده رویداد: به دکمه اضافه شده است، هنگام کلیک کردن، تابع updateBlogContent را فراخوانی می کند و نشان می دهد که چگونه می توان از یک تابع مستقل برای راه اندازی تماس های روش شی استفاده کرد.

نتیجه:

این سناریو تمایز عملکردی بین توابع و روش‌های مستقل در جاوا اسکریپت را نشان می‌دهد. توابع مستقل وظایفی را انجام می دهند و می توانند به طور مستقل فراخوانی شوند، در حالی که متدها به اشیاء (یا کلاس ها) گره خورده اند و بر روی داده ها یا وضعیت آنها کار می کنند. هر دو نقش مهمی در برنامه نویسی جاوا اسکریپت دارند و کدهای ساختاریافته و سازمان یافته را تسهیل می کنند.