Advertisement
SamIsWicked

JavaScript OOP

Jan 13th, 2025
29
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.39 KB | Source Code | 0 0
  1. // Object Oriented Programming
  2.  
  3. // We have a vehicle system, a class basically creates and manages all objects.
  4. // An object is something you can get information on, and do actions with it, for this example, it's just like it.
  5. class Vehicle {
  6.     static vehicleCount = 0; // A static variable/function is something that belongs to the class itself, this doesn't belong to the objects created.
  7.  
  8.     constructor (name, price) { // Create an object, with the following arguments that we pass in to it.
  9.         this.name = name; // Make sure it's 'this' so we can reference that specific object, it's creating variables for that specific object that is passed into the constructor.
  10.         this.price = price;
  11.         Vehicle.vehicleCount++;
  12.     }
  13.  
  14.     getVehicleStats() { // This can only be used by the object, it will return the following.
  15.         return [this.name, this.price]; // Returning for functions is basically a feedback system, you give it information, it will give back more information.
  16.     }
  17.  
  18.     logStats() {
  19.         const statistics = this.getVehicleStats(); // Now we are using that ^
  20.  
  21.         const vehicleName = statistics[0]; // It returns an array.
  22.         const vehiclePrice = statistics[1];
  23.  
  24.         console.log("| VEHICLE STATISTICS | ")
  25.         console.log("Name: " + vehicleName);
  26.         console.log("Price: $" + vehiclePrice);
  27.     }
  28. }
  29.  
  30. // INHERITANCE
  31.  
  32. class Car extends Vehicle { // Inheritance in OOP (Object Oriented Programming) means creating object that inherits properties and methods from the parent, in this case, it's the 'Vehicle' class.
  33.     static carCount = 0;
  34.  
  35.     constructor (name, price, model) {
  36.         super(name, price); // It will take the name and price and pass it to the object's parent, so we can then use the 'Vehicle' class to do something to that objects so it knows it's not unknown.
  37.         this.model = model; // We have new properties.
  38.         Car.carCount++;
  39.     }
  40.  
  41.     // Overriding a function, it already exists on the vehicle class but we're replacing it for this one.
  42.  
  43.     getVehicleStats() {
  44.         return [this.name, this.price, this.model];
  45.     }
  46.  
  47.     logStats() {
  48.         const statistics = this.getVehicleStats();
  49.  
  50.         const carName = statistics[0];
  51.         const carPrice = statistics[1];
  52.         const carModel = statistics[2];
  53.  
  54.         console.log("| CAR STATISTICS | ")
  55.         console.log("Name: " + carName);
  56.         console.log("Price: $" + carPrice);
  57.         console.log("Model: " + carModel);
  58.     }
  59. }
  60.  
  61. // This is basically the same as the car class, except with new properties.
  62.  
  63. class Boat extends Vehicle {
  64.     static boatCount = 0;
  65.  
  66.     constructor (name, price, model, speed) {
  67.         super(name, price);
  68.         this.model = model;
  69.         this.speed = speed;
  70.         Boat.boatCount++;
  71.     }
  72.  
  73.     getVehicleStats() {
  74.         return [this.name, this.price, this.model, this.speed];
  75.     }
  76.  
  77.     logStats() {
  78.         const statistics = this.getVehicleStats();
  79.  
  80.         const boatName = statistics[0];
  81.         const boatPrice = statistics[1];
  82.         const boatModel = statistics[2];
  83.         const boatSpeed = statistics[3];
  84.  
  85.         console.log("| BOAT STATISTICS | ")
  86.         console.log("Name: " + boatName);
  87.         console.log("Price: $" + boatPrice);
  88.         console.log("Model: " + boatModel);
  89.         console.log(`Speed: ${boatSpeed}MPH`);
  90.     }
  91. }
  92.  
  93. // Now this is how to create a new object.
  94.  
  95. const Chevrolet = new Car("Chevrolet", 50000, "A1"); // Remember that 'super' keyword from earlier? Well the vehicle class automatically takes care of it for us, and it will asign this.name and this.price.
  96. const Toyota = new Car("Toyota", 25000, "MN20"); // So if we want to create an object, just type 'new {CLASS_NAME}({PROPERTIES})'.
  97. const Airplane = new Vehicle("Plane", 250000); // This would still work.
  98. const Ship = new Boat("Ship", 10000, "X", 200) // Pass the arguments in order by the way, these will be handled by the constructor, which then handles the 'super' stuff that I mentioned earlier.
  99.  
  100. Chevrolet.logStats(); // We are using the object's methods/functions.
  101. Toyota.logStats();
  102. Airplane.logStats();
  103. Ship.logStats();
  104.  
  105. console.log("-------------------");
  106. console.log(`There are ${Vehicle.vehicleCount} vehicles.`); // That's how the static keyword works, you don't use the object, you use the class, because it's unnecessary.
  107. console.log(`There are ${Car.carCount} cars.`);
  108.  
  109. // I like OOP
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement