mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-25 23:02:05 -04:00
fix(curriculum): update example codes in js classes review (#66158)
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> Co-authored-by: Jeevankumar S <110320697+Jeevankumar-s@users.noreply.github.com>
This commit is contained in:
@@ -175,8 +175,6 @@ console.log(myPizza.type);
|
||||
|
||||
Here is the full example:
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
class Pizza {
|
||||
constructor(type, price) {
|
||||
@@ -194,8 +192,6 @@ console.log(myPizza);
|
||||
console.log(myPizza.type);
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
In addition to methods, you can also define static properties with the `static` keyword.
|
||||
|
||||
In this example, we have a static `numberOfPizzasSold` property.
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: review-javascript-classes
|
||||
|
||||
## Basics of Working with Classes
|
||||
|
||||
- **Definition**: Classes in JavaScript are used to define blueprints for creating objects, and encapsulating data. Classes include a constructor which is a special method that gets called automatically when a new object is created from the class. It is used to initialize the properties of the object. The `this` keyword is used here to refer to the current instance of the class. Below the constructor, you can have what are called methods. Methods are functions defined inside a class that perform actions or operations on the class's data or state. They are used to define behaviors that instances of the class can perform.
|
||||
- **Definition**: Classes in JavaScript are used to define blueprints for creating objects and encapsulating data. Classes include a constructor which is a special method that gets called automatically when a new object is created from the class. It is used to initialize the properties of the object. The `this` keyword is used here to refer to the current instance of the class. Below the constructor, you can have what are called methods. Methods are functions defined inside a class that perform actions or operations on the class's data or state. They are used to define behaviors that instances of the class can perform.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
@@ -23,6 +23,9 @@ class Dog {
|
||||
console.log(`${this.name} says woof!`);
|
||||
}
|
||||
}
|
||||
|
||||
const dog = new Dog("Gino");
|
||||
console.log(dog.name); // Gino
|
||||
```
|
||||
|
||||
:::
|
||||
@@ -47,6 +50,10 @@ const Dog = class {
|
||||
console.log(`${this.name} says woof!`);
|
||||
}
|
||||
};
|
||||
|
||||
const dog = new Dog("Gino");
|
||||
console.log(dog.name); // Gino
|
||||
dog.bark(); // Gino says woof!
|
||||
```
|
||||
|
||||
:::
|
||||
@@ -70,6 +77,11 @@ class Car extends Vehicle {
|
||||
console.log("Honk! Honk!");
|
||||
}
|
||||
}
|
||||
|
||||
const myCar = new Car("freeCodeCamp Motors", 2019);
|
||||
console.log(myCar.brand); // freeCodeCamp Motors
|
||||
console.log(myCar.year); // 2019
|
||||
myCar.honk(); // Honk! Honk!
|
||||
```
|
||||
|
||||
:::
|
||||
@@ -92,13 +104,18 @@ class Car extends Vehicle {
|
||||
this.numDoors = numDoors;
|
||||
}
|
||||
}
|
||||
|
||||
const myCar = new Car("freeCodeCamp Motors", 2019, 4);
|
||||
console.log(myCar.brand); // freeCodeCamp Motors
|
||||
console.log(myCar.year); // 2019
|
||||
console.log(myCar.numDoors); // 4
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Working with Static Methods and Static Properties
|
||||
|
||||
- **Static methods**: These methods are often used for utility functions that don't need access to the specific state of an object. They are defined within classes to encapsulate related functionality. Static methods are also helpful for implementing "factory" methods. A factory method is a method that you define in addition to the constructor to create objects based on specific criteria.
|
||||
- **Static methods**: These methods are often used for utility functions that don't need access to the specific state of an object. They are defined within classes to encapsulate related functionality.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
@@ -123,16 +140,35 @@ class Movie {
|
||||
let movieA = new Movie("Movie A", 80);
|
||||
let movieB = new Movie("Movie B", 45);
|
||||
|
||||
Movie.compareMovies(movieA, movieB);
|
||||
Movie.compareMovies(movieA, movieB); // Movie A has a higher rating.
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Static methods are also helpful for implementing "factory" methods. A factory method is a method that you define in addition to the constructor to create objects based on specific criteria.
|
||||
|
||||
```js
|
||||
class Pizza {
|
||||
constructor(type, price) {
|
||||
this.type = type;
|
||||
this.price = price;
|
||||
}
|
||||
|
||||
static createMargherita() {
|
||||
return new this("Margherita", 6.99);
|
||||
}
|
||||
}
|
||||
|
||||
let myPizza = Pizza.createMargherita();
|
||||
console.log(myPizza); // Pizza { type: "Margherita", price: 6.99 }
|
||||
console.log(myPizza.type); // Margherita
|
||||
```
|
||||
|
||||
- **Static Properties**: These properties are used to define values or attributes that are associated with a class itself, rather than with instances of the class. Static properties are shared across all instances of the class and can be accessed without creating an instance of the class.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
```ts
|
||||
class Car {
|
||||
// Static property
|
||||
static numberOfWheels = 4;
|
||||
@@ -154,7 +190,7 @@ class Car {
|
||||
}
|
||||
|
||||
// Accessing static property directly from the class
|
||||
console.log(Car.numberOfWheels);
|
||||
console.log(Car.numberOfWheels); // 4
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
@@ -3466,7 +3466,7 @@ The Cache API is a storage mechanism that stores Request and Response objects. W
|
||||
|
||||
## Basics of Working with Classes
|
||||
|
||||
- **Definition**: Classes in JavaScript are used to define blueprints for creating objects, and encapsulating data. Classes include a constructor which is a special method that gets called automatically when a new object is created from the class. It is used to initialize the properties of the object. The `this` keyword is used here to refer to the current instance of the class. Below the constructor, you can have what are called methods. Methods are functions defined inside a class that perform actions or operations on the class's data or state. They are used to define behaviors that instances of the class can perform.
|
||||
- **Definition**: Classes in JavaScript are used to define blueprints for creating objects and encapsulating data. Classes include a constructor which is a special method that gets called automatically when a new object is created from the class. It is used to initialize the properties of the object. The `this` keyword is used here to refer to the current instance of the class. Below the constructor, you can have what are called methods. Methods are functions defined inside a class that perform actions or operations on the class's data or state. They are used to define behaviors that instances of the class can perform.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
@@ -3480,6 +3480,9 @@ class Dog {
|
||||
console.log(`${this.name} says woof!`);
|
||||
}
|
||||
}
|
||||
|
||||
const dog = new Dog("Gino");
|
||||
console.log(dog.name); // Gino
|
||||
```
|
||||
|
||||
:::
|
||||
@@ -3504,6 +3507,10 @@ const Dog = class {
|
||||
console.log(`${this.name} says woof!`);
|
||||
}
|
||||
};
|
||||
|
||||
const dog = new Dog("Gino");
|
||||
console.log(dog.name); // Gino
|
||||
dog.bark(); // Gino says woof!
|
||||
```
|
||||
|
||||
:::
|
||||
@@ -3527,6 +3534,11 @@ class Car extends Vehicle {
|
||||
console.log("Honk! Honk!");
|
||||
}
|
||||
}
|
||||
|
||||
const myCar = new Car("freeCodeCamp Motors", 2019);
|
||||
console.log(myCar.brand); // freeCodeCamp Motors
|
||||
console.log(myCar.year); // 2019
|
||||
myCar.honk(); // Honk! Honk!
|
||||
```
|
||||
|
||||
:::
|
||||
@@ -3549,13 +3561,18 @@ class Car extends Vehicle {
|
||||
this.numDoors = numDoors;
|
||||
}
|
||||
}
|
||||
|
||||
const myCar = new Car("freeCodeCamp Motors", 2019, 4);
|
||||
console.log(myCar.brand); // freeCodeCamp Motors
|
||||
console.log(myCar.year); // 2019
|
||||
console.log(myCar.numDoors); // 4
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Working with Static Methods and Static Properties
|
||||
|
||||
- **Static methods**: These methods are often used for utility functions that don't need access to the specific state of an object. They are defined within classes to encapsulate related functionality. Static methods are also helpful for implementing "factory" methods. A factory method is a method that you define in addition to the constructor to create objects based on specific criteria.
|
||||
- **Static methods**: These methods are often used for utility functions that don't need access to the specific state of an object. They are defined within classes to encapsulate related functionality.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
@@ -3580,16 +3597,35 @@ class Movie {
|
||||
let movieA = new Movie("Movie A", 80);
|
||||
let movieB = new Movie("Movie B", 45);
|
||||
|
||||
Movie.compareMovies(movieA, movieB);
|
||||
Movie.compareMovies(movieA, movieB); // Movie A has a higher rating.
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Static methods are also helpful for implementing "factory" methods. A factory method is a method that you define in addition to the constructor to create objects based on specific criteria.
|
||||
|
||||
```js
|
||||
class Pizza {
|
||||
constructor(type, price) {
|
||||
this.type = type;
|
||||
this.price = price;
|
||||
}
|
||||
|
||||
static createMargherita() {
|
||||
return new this("Margherita", 6.99);
|
||||
}
|
||||
}
|
||||
|
||||
let myPizza = Pizza.createMargherita();
|
||||
console.log(myPizza); // Pizza { type: "Margherita", price: 6.99 }
|
||||
console.log(myPizza.type); // Margherita
|
||||
```
|
||||
|
||||
- **Static Properties**: These properties are used to define values or attributes that are associated with a class itself, rather than with instances of the class. Static properties are shared across all instances of the class and can be accessed without creating an instance of the class.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
```ts
|
||||
class Car {
|
||||
// Static property
|
||||
static numberOfWheels = 4;
|
||||
@@ -3611,7 +3647,7 @@ class Car {
|
||||
}
|
||||
|
||||
// Accessing static property directly from the class
|
||||
console.log(Car.numberOfWheels);
|
||||
console.log(Car.numberOfWheels); // 4
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Reference in New Issue
Block a user