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

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

اما آیا می دانستید که قبل از سال 2015، جاوا اسکریپت حتی یک علامت هم نداشت class کلمه کلیدی به عنوان بخشی از زبان؟

با وجود این، بسیاری از برنامه‌ها در آن زمان از روش‌های کلاسیک برنامه‌نویسی شی گرا (OOP) مانند استفاده از یک کلاس، گسترش آن و حتی اضافه کردن روش‌های ثابت استفاده می‌کردند.

اما بدون الف class روش، چگونه آنها حتی کلاس ها را تشکیل می دهند؟

یک سوال خوب! بیایید به آن پاسخ دهیم و در طول مسیر به موارد زیر نگاه کنیم:

• چگونه یک “کلاس” بدون class کلمه کلیدی
• نحوه “توسعه” یک “کلاس”
• چگونه متدهای استاتیک را به “کلاس” خود اضافه کنیم

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

class User {
    name = "Corbin",
    username = "crutchcorn",
    sayCatchphrase() {
        console.log("It depends");
    }
}

این یک کلاس نسبتاً ابتدایی است که دو ویژگی دارد (name و username) و همچنین الف sayCatchphrase روش.

با این حال، با وجود class کلمه کلیدی که در سال 2015 با ES6 اضافه شد، فیلدهای عمومی مانند این تا قبل از ECMAScript 2020 اضافه نشدند:

پس چگونه کلاس ها در سال های بعد از 2015 اما قبل از 2020 دارایی شدند؟

جواب؟ را constructor روش:

class User {
    constructor() {
        this.name = "Corbin",
        this.username = "crutchcorn",
    }

    sayCatchphrase() {
        console.log("It depends");
    }
}

در واقع با استفاده از این constructor روش، حتی می توانیم متد را نیز اضافه کنیم:

class User {
    constructor() {
        this.name = "Corbin",
        this.username = "crutchcorn",
        this.sayCatchphrase = function() {
            console.log("It depends");
        }
    }
}

یک واقعیت جالب، مطمئنا – اما به این سوال که چگونه یک کلاس درست کنیم پاسخ نمی دهد.

نگران نباش، داریم به آنجا می رسیم!

قبل از پاسخ به این سوال “چگونه یک کلاس در جاوا اسکریپت بدون class کلمه کلیدی”، بیایید یک قدم به عقب برگردیم و ببینیم که a class در واقع انجام می دهد …

پس از همه، یک کلاس مانند User در بالا ممکن است یک شی مانند این ایجاد کند:

const userObject = {
    name: "Corbin",
    username: "crutchcorn",
    sayCatchphrase: function() {
        console.log("It depends");
    }
}

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

function User() {
    return {
        name: "Corbin",
        username: "crutchcorn",
        sayCatchphrase: function() {
            console.log("It depends");
        }
    }
}

و مطمئناً اگر این کد را با استفاده از:

const user = new User();
user.sayCatchphrase(); // "It depends"

طبق انتظار اجرا خواهد شد. با این حال، همه موارد را حل نمی کند. به عنوان مثال:

new User() instanceof User; // false

در عوض، چه می‌شود اگر کلاس فوق‌الذکر را تبدیل کنیم. constructor بدن به یک تابع؟:

function User() {
    this.name = "Corbin";
    this.username = "crutchcorn";
    this.sayCatchphrase = function() {
        console.log("It depends");
    }
}

اکنون، نه تنها روش کار را داریم، بلکه instanceof همچنین کار می کند:

const user = new User();
user.sayCatchphrase(); // "It depends"
new User() instanceof User; // true

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

اما مطمئنا تغییر از یک کلاس به یک تابع به شما اجازه نمی دهد که نمونه اولیه را به همان روش تغییر دهید؟

در واقع، آن را انجام می دهد! کل این کار اینگونه است!

کد زیر را در نظر بگیرید:

function User() {
    this.name = "Corbin";
    this.username = "crutchcorn";
}

User.prototype.sayCatchphrase = function() {
   console.log("It depends");
}

این همان روش اضافه کردن یک متد است this.sayCatchphrase روش مانند قبل است، اما با تغییر نمونه اولیه انجام می شود.

ما می‌توانیم این کد را با اجرای زیر آزمایش کنیم:

const user = new User();
user.sayCatchphrase(); // "It depends"

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

قبل از اینکه در مورد پسوند کلاس مبتنی بر تابع صحبت کنیم، باید یک بار دیگر در مورد ایجاد کلاس قبل از ES2020 صحبت کنیم.

ببینید، وقتی کد زیر را به استفاده از a تبدیل می کنیم contructor:

class Person {
    personality = "quirky";
}

class Corbin extends Person {
    name = "Corbin";
}

اینطوری:

class Person {
    constructor() {
        this.personality = "quirky";
    }
}

class Corbin extends Person {
    constructor() {
        this.name = "Corbin";
    }
}

و سعی کنید آن را مقداردهی اولیه کنید:

const corn = new Corbin()

خطای زیر را دریافت می کنیم:

Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
    at new Corbin (<anonymous>:9:6)

این به این دلیل است که ما از آن استفاده نمی کنیم super() متد برای اینکه به کلاس توسعه یافته خود بگوییم که از متدهای کلاس والد استفاده کند.

برای رفع این مشکل، آن متد را به کلاس توسعه یافته اضافه می کنیم. constructor:

class Person {
    constructor() {
        this.personality = "quirky";
    }
}

class Corbin extends Person {
    constructor() {
        super();
        this.name = "Corbin";
    }
}

حالا ما Corbin کار ساخت و ساز طبق برنامه:

const corn = new Corbin();
console.log(corn.name); // "Corbin";
console.log(corn.personality); // "quirky";

بیایید اکنون خود را تبدیل کنیم Person و Corbin کلاس ها برای استفاده از توابع به جای class کلمه کلیدی.

کلاس شخص به اندازه کافی آسان است:

function Person() {
    this.personality = "quirky";
}

و ما میتوانست استفاده کنید call روش اتصال Person‘s this به Corbin، مانند:

function Corbin() {
    Person.call(this);
    this.name = "Corbin";
}

و به نظر می رسد در ابتدا کار می کند:

const corn = new Corbin();
console.log(corn.name); // "Corbin";
console.log(corn.personality); // "quirky";

اما حالا یک بار دیگر اگر تماس بگیریم instanceof کلاس پایه را پشتیبانی نمی کند:

new Corbin() instanceof Corbin; // true
new Corbin() instanceof Person; // false

برای رفع این مشکل، باید به جاوا اسکریپت بگوییم که از آن استفاده کند prototype از Person و آن را با نمونه اولیه ترکیب کنید Corbin، مانند:

function Person() {
}

Person.prototype.personality = "quirky";

function Corbin() {
}

Corbin.prototype = Object.create(Person.prototype);
Corbin.prototype.name = "Corbin";

const corn = new Corbin();
corn.personality // "quirky"
corn.name // "Corbin"

const pers = new Person();
pers.personality // "quirky"
pers.name // undefined

توجه کنید که چگونه از آن استفاده می کنیم Object.create برای ایجاد یک شی پایه از نمونه اولیه دیگر

بیایید این مقاله را با صحبت در مورد نحوه افزودن متدهای استاتیک به یک کلاس تابعی به پایان برسانیم.

به عنوان یک تجدید، این چیزی است که یک روش استاتیک در کلاس ES2020 به نظر می رسد:

class User {
    name = "Corbin",
    username = "crutchcorn",
    static sayCatchphrase() {
        console.log("It depends");
    }
}

User.sayCatchphrase(); // "It depends"
User.name // undefined

const corn = new User();
corn.name; // "Corbin"

این را می توان با ارائه یک کلید به نام تابع در خارج از بدنه تابع اضافه کرد:

function User() {
    this.name = "Corbin",
    this.username = "crutchcorn",
}

User.sayCatchphrase() {
    console.log("It depends");
}


User.sayCatchphrase(); // "It depends"
User.name // undefined

const corn = new User();
corn.name; // "Corbin"

این نگاه جالبی به نحوه استفاده از کلاس‌های جاوا اسکریپت بدون استفاده از آن بود class کلمه کلیدی.

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

مانند یادگیری اصول جاوا اسکریپت؟

مقاله من را بررسی کنید که نحوه استفاده از آن را توضیح می دهد .bind کلمه کلیدی در جاوا اسکریپت

آن را بخوانید و بیشتر می خواهید؟

کتاب من را که معرفی React، Angular و Vue را به یکباره آموزش می‌دهد، بررسی کنید. “راهنمای میدان چارچوب”.

تا دفعه بعد!