How to write oop in javascript

In Web development, JavaScript has become a very popular programming language. In JavaScript, object-oriented programming (OOP) is an important concept. Using OOP, you can structure your code and reduce its duplication, making it easier to maintain and extend. This article will introduce how to write OOP in JavaScript.

1. Prototype (prototype) and constructor (constructor)

In JavaScript, the properties and methods of an object can be shared through prototypes, and constructors are used to Create a new object and initialize its properties. The following is a simple example using constructors and prototypes:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHi = function() {
  console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.");
}

var person1 = new Person("John", 30);
var person2 = new Person("Mary", 25);

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
person2.sayHi(); // Hi, my name is Mary and I'm 25 years old.

In the above example, we define a Person constructor that initializes name and ageProperties. Then, we use Person.prototype to add a sayHi method to each Person object. This method can be shared by all Person objects. . Finally, we created two Person objects and called their sayHi methods.

2. Class(class)

In ES6, JavaScript introduced the concept of class and used the keyword class to implement it. Classes provide a cleaner, easier-to-understand syntax for defining objects.

The following is an example of using classes:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHi() {
    console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
}

let person1 = new Person("John", 30);
let person2 = new Person("Mary", 25);

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
person2.sayHi(); // Hi, my name is Mary and I'm 25 years old.

In the above example, we use the class keyword to define a Person class, And the name and age properties are initialized in the constructor method. Then, we defined a sayHi method to output a greeting. Finally, we created two Person objects and called their sayHi methods.

3. Inheritance

In OOP, inheritance refers to deriving a new object from an existing object. The new object inherits the original object. properties and methods. In JavaScript, inheritance can be achieved by using prototype and class.

The following is an example of using prototype to implement inheritance:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHi = function () {
  console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.");
}

function Student(name, age, major) {
  Person.call(this, name, age);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.sayMajor = function() {
  console.log("My major is " + this.major + ".");
}

let person1 = new Person("John", 30);
let student1 = new Student("Mary", 25, "Computer Science");

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
student1.sayHi(); // Hi, my name is Mary and I'm 25 years old.
student1.sayMajor(); // My major is Computer Science.

In the above example, we define a Person constructor, in the prototype Added sayHi method. In addition, we defined a Student constructor and called the Person constructor using the call method to initialize name and age attribute, and added a major attribute. We then create a copy of Person.prototype using the Object.create method and assign it to Student.prototype so that StudentObjects can inherit the properties and methods of Person objects. Finally, we define a sayMajor method to output the student's major. Finally, we created a Person object and a Student object and called their methods.

The following is an example of using class to implement inheritance:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHi() {
    console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.")
  }
}

class Student extends Person {
  constructor(name, age, major) {
    super(name, age);
    this.major = major;
  }
  
  sayMajor() {
    console.log("My major is " + this.major + ".");
  }
}

let person1 = new Person("John", 30);
let student1 = new Student("Mary", 25, "Computer Science");

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
student1.sayHi(); // Hi, my name is Mary and I'm 25 years old.
student1.sayMajor(); // My major is Computer Science.

In the above example, we define a Person class, in ## The name and age properties are initialized in the #constructor method, and a greeting is output in the sayHi method. Then, we created a Student class using the extends keyword and called the of the Person class using the super keyword constructor method to initialize the name and age properties, and add a major property. Finally, we define a sayMajor method to output the student's major. Finally, we created a Person object and a Student object and called their methods.

Conclusion:

In JavaScript, OOP is a very important concept. Using objects, constructors, prototypes, and classes can better organize code and reduce duplication. Inheritance can be achieved through prototypes and classes. Starting with ES6, JavaScript introduced the keyword

class, which provides a simpler and easier-to-understand syntax for defining objects. Whenever possible, it is important to choose the right approach for writing OOP code as this will yield significant benefits in project development and maintenance.

The above is the detailed content of How to write oop in javascript. For more information, please follow other related articles on the PHP Chinese website!