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,nameandageare basic attributes, andsayHellois 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 aPersonfunction to create an object containingnameandageThe object of the property. Thethiskeyword is used here to represent the current object. Create a newPersonobject through thenew 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 aPersonfunction and aStudentfunction. UseObject.create()to create a new object asStudent.prototype. The prototype of this new object isPerson.prototype. In this way, theStudentfunction can inherit the properties and methods of thePersonfunction.

Use thecall()function to inherit the properties and methods ofPerson:Person.call(this, name, age), herethisrepresents the object created by theStudentfunction.

Finally, point theconstructorproperty ofStudent.prototypeto theStudentfunction itself, so that we use thenewkey When creating a newStudentobject, you can callStudent's own constructor.

2. Inheritance in ES6

In ES6, we can use theclasskeyword to define a class. Theclasskeyword encapsulates the two parts offunctionandprototype, 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 theclasskeyword to definePersonandStudentTwo classes. Use theextendskeyword to implement inheritance.

Use thesuperkeyword to call the constructor and method of the parent class. In the constructor ofStudent, usesuper(name, age)to call the constructor ofPersonto realize the inheritance of the parent class member attributes. Use thesuperkeyword 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!