In-depth understanding of JavaScript prototype and prototype chain

introduction

JavaScript is a prototype-based object-oriented programming language, and its prototype and prototype chain are one of its core features. Understanding prototypes and the prototype chain is very important to mastering object-oriented programming in JavaScript. This article will explore JavaScript prototypes and prototype chains in depth, and illustrate them with code examples.

1. Prototype

In JavaScript, every object has a prototype object. A prototype object can be seen as a template for an object, which contains the properties and methods shared by the object. When we access a property or method of an object, if the object itself does not have the property or method, JavaScript will automatically look it up in the prototype object.

for example

// 创建一个对象
var person = {
    
    
  name: "张三",
  age: 20,
};

// 访问对象的属性
console.log(person.name); // 输出：张三

// 访问对象的方法
person.sayHello = function() {
    
    
  console.log("你好，我是" + this.name);
};

person.sayHello(); // 输出：你好，我是张三

In the above example, we created an personobject and added nameproperties and sayHellomethods to it. When we visit person.name, JavaScript will first personsearch in the object, find the corresponding property and return it. When we call person.sayHello(), JavaScript will personlook for the method in the object sayHello, find it and execute it.

2. Prototype chain

A prototype chain is a chain structure composed of prototype objects of multiple objects. When we access a property or method of an object, JavaScript will look up the prototype chain until it finds the corresponding property or method, or reaches the top of the prototype chain (ie) Object.prototype.

for example

// 创建一个构造函数
function Person(name, age) {
    
    
  this.name = name;
  this.age = age;
}

// 在构造函数的原型对象上添加方法
Person.prototype.sayHello = function() {
    
    
  console.log("你好，我是" + this.name);
};

// 创建一个对象
var person = new Person("张三", 20);

// 访问对象的属性
console.log(person.name); // 输出：张三

// 访问对象的方法
person.sayHello(); // 输出：你好，我是张三

In the above example, we created a constructor Personand added methods on its prototype object sayHello. newAn object is created by the keyword person, and the prototype of the object points to it Person.prototype. When we visit person.name, JavaScript will first personsearch in the object, find the corresponding property and return it. When we call person.sayHello(), JavaScript will personlook for the method in the object sayHello, not find it, then look up the prototype chain, and finally find the Person.prototypeabove sayHellomethod and execute it.

Summarize

JavaScript's prototypes and prototype chains are the cornerstones of its object-oriented programming. Through prototypes, we can share properties and methods between objects. Through the prototype chain, we can achieve the inheritance of properties and methods. A deep understanding of prototypes and the prototype chain is very important for writing efficient and flexible JavaScript code.
.