Home > Web Front-end > JS Tutorial > body text

Explore the peculiarities of prototypes and prototype chains

PHPz
Release: 2024-01-13 15:50:06
Original
780 people have browsed it

Explore the peculiarities of prototypes and prototype chains

Exploring the unique features of prototype and prototype chain

In JavaScript, prototype and prototype chain are very important concepts. Understanding the unique features of prototypes and prototype chains can help us better understand inheritance and object creation in JavaScript.

The prototype is a property owned by every object in JavaScript. It points to another object and is used to share properties and methods. Every JavaScript object has a prototype and can inherit from the prototypes of other objects. This inheritance relationship is realized through the prototype chain.

Let's look at a specific code example to illustrate the characteristics of prototypes and prototype chains.

// 创建一个父类Person
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 在父类的原型上定义一个方法
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

// 创建一个子类Student
function Student(name, age, grade) {
  Person.call(this, name, age); 
  // 调用父类构造函数,相当于 super(name, age)
  this.grade = grade;
}

// 设置子类的原型为父类的实例
Student.prototype = Object.create(Person.prototype);
// 将子类的原型构造函数指向子类本身
Student.prototype.constructor = Student;

// 在子类的原型上定义一个方法
Student.prototype.study = function() {
  console.log(`${this.name} is studying at grade ${this.grade}`);
};

// 创建一个父类实例
const person = new Person("Alice", 25);
// 调用通过原型继承的父类方法
person.greet(); // 输出:Hello, my name is Alice

// 创建一个子类实例
const student = new Student("Bob", 18, 12);
// 调用通过原型继承的父类方法
student.greet(); // 输出:Hello, my name is Bob
// 调用子类的方法
student.study(); // 输出:Bob is studying at grade 12
Copy after login

In the above code example, a parent class Person is first defined, which has two attributes name and age, and in the prototype A greet method is defined above.

Then, create a subclass Student, which inherits the properties of the parent class by calling the parent class’s constructor Person.call(this, name, age) , and also need to modify the prototype of the subclass to an instance of the parent class Object.create(Person.prototype), and point the prototype constructor of the subclass to the subclass itself Student.prototype.constructor = Student.

Finally, you can verify the inheritance relationship by creating instances of the parent class and child class and calling the methods of the parent class and child class. The parent class method greet can be inherited and called by the subclass through the prototype chain, while the unique method study of the subclass is defined on the prototype of the subclass.

This simple example shows the uniqueness of prototypes and prototype chains, that is, through prototype inheritance and prototype chain links, we can easily realize the sharing and inheritance of object properties and methods. This prototype-based inheritance is one of the very flexible and powerful features of JavaScript.

In actual development, we can use the characteristics of the prototype chain to build complex object relationships and inheritance structures to achieve code reuse and encapsulation.

To sum up, prototype and prototype chain are unique features in JavaScript, which can realize the sharing and inheritance of object properties and methods through prototype inheritance and prototype chain linking. Understanding the concepts and usage of prototypes and prototype chains can allow us to better use JavaScript's inheritance and object creation functions.

The above is the detailed content of Explore the peculiarities of prototypes and prototype chains. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!