Master object-oriented programming and inheritance in JavaScript

In modern web development, JavaScript has become an indispensable language. Among them, object-oriented programming (OOP) and inheritance are two important aspects in JavaScript development. This article will introduce readers to object-oriented programming and inheritance in JavaScript and give specific code examples.

1. Object-oriented programming

Object-oriented programming is a programming method that uses objects as the basic unit of the program and encapsulates data and data operations. In JavaScript, we can use objects and functions to implement object-oriented programming.

1. Object

In JavaScript, an object is a collection of key-value pairs. We can use curly braces to define an object:

var person = {
  name: 'Tom',
  age: 18,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

In the above code, we define an object containing three properties. Among them, name and age are basic attributes, and sayHello is a method. The properties and methods of an object can be accessed in the following ways:

console.log(person.name); // 输出 'Tom'
person.sayHello(); // 输出 'Hello, my name is Tom'

2. Function

In JavaScript, a function is a special kind of object. We can use functions to create objects, encapsulate operations, and define classes. Here is an example of using a function to create an object:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, my name is ' + this.name);
  }
}

var person = new Person('Tom', 18);
person.sayHello(); // 输出 'Hello, my name is Tom'

In the above code, we define a Person function to create an object containing name and ageThe object of the property. The this keyword is used here to represent the current object. Create a new Person object through the new Person('Tom', 18) statement.

2. Inheritance

Inheritance is a way to achieve code reuse. In JavaScript, we can use the prototype chain to implement inheritance.

1. Prototype Chain

Objects in JavaScript have a pointer to their prototype object. We can implement inheritance through prototype objects, that is, child objects inherit the properties and methods of parent objects.

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

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
}

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

var student = new Student('Tom', 18, 3);
student.sayHello(); // 输出 'Hello, my name is Tom'

In the above code, we define a Person function and a Student function. Use Object.create() to create a new object as Student.prototype. The prototype of this new object is Person.prototype. In this way, the Student function can inherit the properties and methods of the Person function.

Use the call() function to inherit the properties and methods of Person: Person.call(this, name, age), here this represents the object created by the Student function.

Finally, point the constructor property of Student.prototype to the Student function itself, so that we use the new key When creating a new Student object, you can call Student's own constructor.

2. Inheritance in ES6

In ES6, we can use the class keyword to define a class. The class keyword encapsulates the two parts of function and prototype, allowing us to define classes more conveniently.

The following is an example of using ES6 to define inheritance:

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

  sayHello() {
    console.log('Hello, my name is ' + this.name);
  }
}

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
}

let student = new Student('Tom', 18, 3);
student.sayHello(); // 输出 'Hello, my name is Tom'

In the above code, we use the class keyword to define Person and StudentTwo classes. Use the extends keyword to implement inheritance.

Use the super keyword to call the constructor and method of the parent class. In the constructor of Student, use super(name, age) to call the constructor of Person to realize the inheritance of the parent class member attributes. Use the super keyword to call the parent class method: super.sayHello(), realizing the inheritance of the parent class method.

3. Summary

In this article, we introduced object-oriented programming and inheritance in JavaScript. Implement object-oriented programming by using objects and functions, and implement inheritance using prototype chains and ES6 inheritance. I hope it will be helpful for everyone to understand JavaScript programming.

The above is the detailed content of Master object-oriented programming and inheritance in JavaScript. For more information, please follow other related articles on the PHP Chinese website!