2025-07-18

1 個程式範例，快速學習 JavaScript 物件導向語法

光輝咖碼892 mins

當深入 JavaScript 的核心時，傳統的物件導向編程（OOP）技術顯得非常重要。這種編程風格不僅為代碼提供了清晰的結構，而且還促進了模組化和重用，這對於大型和復雜的應用程序開發尤為關鍵。

本篇文章中，將透過一個全面的範例，一步步探討 JavaScript 中傳統物件導向編程的關鍵概念，包括類別的定義、公共和私有屬性的聲明、構造函數、方法的使用，以及類別的繼承等。這將幫助深入理解 JavaScript 中的 OOP，並將這些知識應用於編程實踐中。

OOP 語法範例:

// 定義一個類別 (Define a Class)
// 類別是JavaScript中用於創建對象的模板。它封裝了相關的屬性和方法。
class Car {
    // 公共屬性 (Declare a Public Property)
    // 公共屬性可以在類別實例的任何地方被訪問和修改。
    color;

    // 私有屬性 (Declare a Private Property)
    // 私有屬性僅在定義它們的類內部可訪問，外部無法直接訪問。
    #brand;

    // 構造函數 (Declare Constructor)
    // 構造函數是在創建類實例時自動調用的特殊方法，用於初始化類的屬性。
    constructor(brand, color) {
        this.#brand = brand;
        this.color = color;
    }

    // 公共方法 (Declare a Public Method)
    // 公共方法可以被類實例及繼承該類的其他類的實例調用。
    displayInfo() {
        console.log(`This is a ${this.color} car.`);
    }

    // 私有方法 (Declare a Private Method)
    // 私有方法僅能在定義它的類內部被調用，對外部是不可見的。
    #privateMethod() {
        return `Brand is ${this.#brand}`;
    }

    // Getter和Setter
    // Getter和Setter用於對類的私有屬性進行安全的訪問和更新。
    get brand() {
        return this.#privateMethod();
    }

    set brand(newBrand) {
        this.#brand = newBrand;
    }

    // 靜態方法和屬性 (Static Methods and Fields)
    // 靜態方法和屬性屬於類本身，而不是類的任何特定實例。
    static numberOfWheels = 4;

    static carDescription() {
        return `Cars usually have ${this.numberOfWheels} wheels.`;
    }
}

// 擴展一個類別 (Extend a Class)
// 使用'extends'關鍵字創建一個新類，繼承另一個類的屬性和方法。
class ElectricCar extends Car {
    constructor(brand, color, batteryLife) {
        super(brand, color); // 調用父類構造函數
        this.batteryLife = batteryLife;
    }

    // 覆寫方法
    displayInfo() {
        console.log(`This is a ${this.color} electric car with a battery life of ${this.batteryLife} hours.`);
    }
}

// 創建一個實例 (Create an Instance)
// 使用'new'關鍵字和類名創建該類的一個新實例。
const myCar = new ElectricCar('Tesla', 'red', 24);

// 調用函數 (Call a Function)
// 通過類實例調用在類中定義的方法。
myCar.displayInfo(); // This is a red electric car with a battery life of 24 hours.

// 點表示法 vs 括號表示法 (Dot vs Bracket Notation)
// 使用點表示法或括號表示法訪問對象的屬性。點表示法更直觀，而括號表示法在屬性名為變量時很有用。
console.log(myCar.color);    // red (點表示法)
console.log(myCar['color']); // red (括號表示法)

這個範例通過注釋解釋了JavaScript 中的關鍵物件導向概念，包括如何定義類別、聲明屬性和方法、創建和使用實例，以及如何實現繼承和多態性。這有助於更好地理解和掌握JavaScript的物件導向特性。

89 thoughts on “1 個程式範例，快速學習 JavaScript 物件導向語法”

  2. Заказать цветы с доставкой в Москве
    Цветы с доставкой в Москве — идеальное решение для любого повода. Множество компаний предлагают услуги доставки цветов в Москве, что дает возможность выбрать подходящий вариант.
    Перед тем как оформить заказ, необходимо определиться с тем, какие цветы вы хотели бы видеть в букете. Можно выбрать как традиционный букет, так и что-то необычное.
    Не забывайте проверять сроки доставки и дополнительные опции, которые могут предложить сервисы. В некоторых компаниях вы можете добавить к своему заказу открытку или дополнительные небольшие презенты.
    Очень важно доверять только проверенным компаниям с положительной репутацией. Такой подход исключит неприятные ситуации с качеством цветов и сроками доставки.

    回覆

  4. Хризантемные букеты с доставкой по Москве без дополнительных затрат — это отличное решение для всех, кто хочет порадовать близких. Хризантемы известны своей красотой и разнообразием. Хризантемы идеально подходят для создания стильных букетов.
    Букеты из хризантем с бесплатной доставкой по Москве
    Вы можете выбрать из различных видов букетов, и каждый из них станет настоящим произведением искусства. Каждый букет оформляется с особой тщательностью. Мы ценим уникальность вашего подарка, и наши букеты это подчеркивают.
    Оформите заказ через интернет и выберите подходящее время для получения букета. Мы гарантируем, что ваш букет будет доставлен в срок. Каждый заказ доставляется нашими курьерами с максимальным вниманием и заботой.
    С хризантемами вы делаете каждый момент особенным и незабываемым. Не упустите возможность порадовать своих близких цветами. Наша команда всегда рада помочь в выборе идеального букета.

    回覆

  7. Инженерная сантехника https://vodazone.ru в Москве — всё для отопления, водоснабжения и канализации. Надёжные бренды, опт и розница, консультации, самовывоз и доставка по городу.

    回覆

  8. Шины и диски https://tssz.ru для любого авто: легковые, внедорожники, коммерческий транспорт. Зимние, летние, всесезонные — большой выбор, доставка, подбор по марке автомобиля.

    回覆

  9. LEBO Coffee https://lebo.ru натуральный кофе премиум-качества. Зерновой, молотый, в капсулах. Богатый вкус, аромат и свежая обжарка. Для дома, офиса и кофеен.

    回覆

  12. Свадебный букет из гортензий с бесплатной доставкой по Москве — это отличное решение для тех, кто хочет удивить своих близких. Гортензии в букете символизируют любовь и дружбу, что делает их идеальными для подарка.
    Букет гортензий с бесплатной доставкой в Москве.
    Вы можете заказать доставку букета гортензий в любое время и в любое место в Москве. Каждый букет гортензий создается мастерами флористики с любовью и вниманием.
    Гортензии прекрасно дополняют любые цветочные композиции и подходят для различных случаев. Букет гортензий отлично подойдет как для празднования, так и для украшения дома.
    Не упустите возможность порадовать себя или своих близких роскошным букетом гортензий с доставкой. Заказать букет гортензий с бесплатной доставкой можно всего лишь в несколько кликов.

    回覆

  15. Виртуальные номера для Telegram https://basolinovoip.com создавайте аккаунты без SIM-карты. Регистрация за минуту, широкий выбор стран, удобная оплата. Идеально для анонимности, работы и продвижения.

    回覆

  21. Магазин брендовых кроссовок https://kicksvibe.ru Nike, Adidas, New Balance, Puma и другие. 100% оригинал, новые коллекции, быстрая доставка, удобная оплата. Стильно, комфортно, доступно!

    回覆

  25. Онлайн-курсы https://obuchenie-plasmoterapii.ru: теория, видеоуроки, разбор техник. Обучение с нуля и для практикующих. Доступ к материалам 24/7, сертификат после прохождения, поддержка преподавателя.

    回覆

  34. Ищете казино казино с СБП? У нас — мгновенные переводы, слоты от топ-провайдеров, живые дилеры и быстрые выплаты. Безопасность, анонимность и мобильный доступ!

    回覆

  36. Выбор застройщика https://spartak-realty.ru важный шаг при покупке квартиры. Расскажем, как проверить репутацию, сроки сдачи, проектную документацию и избежать проблем с новостройкой.

    回覆

  37. Смотреть фильмы kinobadi.mom и сериалы бесплатно, самый большой выбор фильмов и сериалов , многофункциональное сортировка, также у нас есть скачивание в mp4 формате

    回覆

  38. Недвижимость в Балашихе https://balashihabest.ru комфорт рядом с Москвой. Современные жилые комплексы, школы, парки, транспорт. Объекты в наличии, консультации, юридическое сопровождение сделки.

    回覆

  39. Поставка нерудных материалов https://sr-sb.ru песок, щебень, гравий, отсев. Прямые поставки на стройплощадки, карьерный материал, доставка самосвалами.

    回覆

  40. Женский журнал https://e-times.com.ua о красоте, моде, отношениях, здоровье и саморазвитии. Советы, тренды, рецепты, вдохновение на каждый день. Будь в курсе самого интересного!

    回覆

  41. Туристический портал https://atrium.if.ua всё для путешественников: путеводители, маршруты, советы, отели, билеты и отзывы. Откройте для себя новые направления с полезной информацией и лайфхаками.

    回覆

  42. Женский онлайн-журнал https://socvirus.com.ua мода, макияж, карьера, семья, тренды. Полезные статьи, интервью, обзоры и вдохновляющий контент для настоящих женщин.

    回覆

  43. Портал про ремонт https://prezent-house.com.ua полезные советы, инструкции, дизайн-идеи и лайфхаки. От черновой отделки до декора. Всё о ремонте квартир, домов и офисов — просто, понятно и по делу.

    回覆

  44. Всё о ремонте https://sevgr.org.ua на одном портале: полезные статьи, видеоуроки, проекты, ошибки и решения. Интерьерные идеи, советы мастеров, выбор стройматериалов.

    回覆

  45. Бюро дизайна https://sinega.com.ua интерьеров: функциональность, стиль и комфорт в каждой детали. Предлагаем современные решения, индивидуальный подход и поддержку на всех этапах проекта.

    回覆

  46. Всё о строительстве https://kinoranok.org.ua на одном портале: строительные технологии, интерьер, отделка, ландшафт. Советы экспертов, фото до и после, инструкции и реальные кейсы.

    回覆

  47. Портал о строительстве https://bms-soft.com.ua от фундамента до кровли. Технологии, лайфхаки, выбор инструментов и материалов. Честные обзоры, проекты, сметы, помощь в выборе подрядчиков.

    回覆

  48. Ремонт и строительство https://mtbo.org.ua всё в одном месте. Сайт с советами, схемами, расчетами, обзорами и фотоидееями. Дом, дача, квартира — строй легко, качественно и с умом.

    回覆

  51. Женский сайт https://7krasotok.com о моде, красоте, здоровье, отношениях и саморазвитии. Полезные советы, тренды, рецепты, лайфхаки и вдохновение для современных женщин.

    回覆

  52. Все главные женские https://pic.lg.ua новости в одном месте! Мировые и российские тренды, стиль жизни, психологические советы, звёзды, рецепты и лайфхаки.

    回覆

  55. Путеводитель по Греции https://cpcfpu.org.ua города, курорты, пляжи, достопримечательности и кухня. Советы туристам, маршруты, лайфхаки и лучшие места для отдыха.

    回覆

  56. Дизайнерская мебель премиум класса — это воплощение изысканного стиля и безукоризненного качества.

    Необходимо учитывать множество факторов при выборе предметов интерьера подобного класса. Советы профессионалов могут значительно упростить процесс выбора. Важно помнить, что дизайнерская мебель должна не только выглядеть хорошо, но и быть комфортной в использовании.

    回覆

  57. Портал о строительстве https://ateku.org.ua и ремонте: от фундамента до крыши. Пошаговые инструкции, лайфхаки, подбор материалов, идеи для интерьера.

    回覆

  59. Туристический портал https://deluxtour.com.ua всё для путешествий: маршруты, путеводители, советы, бронирование отелей и билетов. Информация о странах, визах, отдыхе и достопримечательностях.

    回覆

  60. Журнал о строительстве https://kennan.kiev.ua новости отрасли, технологии, советы, идеи и решения для дома, дачи и бизнеса. Фото-проекты, сметы, лайфхаки, рекомендации специалистов.

    回覆

  62. Строительный журнал https://inter-biz.com.ua актуальные статьи о стройке и ремонте, обзоры материалов и технологий, интервью с экспертами, проекты домов и советы мастеров.

    回覆

  63. На строительном сайте https://eeu-a.kiev.ua вы найдёте всё: от выбора кирпича до дизайна спальни. Актуальная информация, фото-примеры, обзоры инструментов, консультации специалистов.

    回覆

  64. Сайт о ремонте https://mia.km.ua и строительстве — полезные советы, инструкции, идеи, выбор материалов, технологии и дизайн интерьеров.

    回覆

  66. Всё для ремонта https://zip.org.ua и строительства — в одном месте! Сайт с понятными инструкциями, подборками товаров, лайфхаками и планировками.

    回覆

  69. Онлайн-портал https://spkokna.com.ua для современных родителей: беременность, роды, уход за малышами, школьные вопросы, советы педагогов и врачей.

    回覆

  72. Женский онлайн-журнал https://abuki.info мода, красота, здоровье, психология, отношения и вдохновение. Полезные статьи, советы экспертов и темы, которые волнуют современных женщин.

    回覆

  73. Современный авто портал https://simpsonsua.com.ua автомобили всех марок, тест-драйвы, лайфхаки, ТО, советы по покупке и продаже. Для тех, кто водит, ремонтирует и просто любит машины.

    回覆

  74. Актуальные новости https://uapress.kyiv.ua на одном портале: события России и мира, интервью, обзоры, репортажи. Объективно, оперативно, профессионально. Будьте в курсе главного!

    回覆

  75. Онлайн авто портал https://sedan.kyiv.ua для автолюбителей и профессионалов. Новинки автоиндустрии, цены, характеристики, рейтинги, покупка и продажа автомобилей, автофорум.

    回覆

  76. Информационный портал https://mediateam.com.ua актуальные новости, аналитика, статьи, интервью и обзоры. Всё самое важное из мира политики, экономики, технологий, культуры и общества.

    回覆

  78. Современный мужской портал https://kompanion.com.ua полезный контент на каждый день. Новости, обзоры, мужской стиль, здоровье, авто, деньги, отношения и лайфхаки без воды.

    回覆

  79. Новостной портал https://thingshistory.com для тех, кто хочет знать больше. Свежие публикации, горячие темы, авторские колонки, рейтинги и хроники. Удобный формат, только факты.

    回覆

  80. Сайт для женщин https://storinka.com.ua всё о моде, красоте, здоровье, психологии, семье и саморазвитии. Полезные советы, вдохновляющие статьи и тренды для гармоничной жизни.

    回覆

  81. Следите за событиями https://kiev-pravda.kiev.ua дня на новостном портале: лента новостей, обзоры, прогнозы, мнения. Всё, что важно знать сегодня — быстро, чётко, объективно.

    回覆

  87. Актуальные тренды сегодня тренды в России: фото, видео и медиа. Всё о том, что популярно сегодня — в России и в мире. Мода, визуальные стили, digital-направления и соцсети. Следите за трендами и оставайтесь в курсе главных новинок каждого дня.

    回覆

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Related Post