Understand the characteristics and uses of prototypes and prototype chains

Explore the characteristics and applications of prototypes and prototype chains

1. What are prototypes and prototype chains

In JavaScript, every object has A prototype object. A prototype object is also an object, and it can have properties and methods. Objects in JavaScript are prototype-based, meaning that one object can inherit the properties and methods of another object.

The prototype object of the object can be accessed through the __proto__ attribute. This __proto__ attribute points to the prototype object of the object, which is a reference to the prototype object. Through the prototype chain, objects can look up properties and methods along the prototype chain.

2. Characteristics of prototypes

1. The prototype objects of objects are shared. In JavaScript, when we create a new object, it is automatically associated with a prototype object. Multiple objects can be associated with the same prototype object, thereby sharing properties and methods in the prototype object.

Code example:

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

Person.prototype.greet = function() {
  console.log('Hello, ' + this.name + '!');
};

var person1 = new Person('Alice', 20);
var person2 = new Person('Bob', 25);

console.log(person1.__proto__ === person2.__proto__);  // true

2. Objects can use the properties and methods of the prototype object. When we access a property of an object or call a method on an object, if the object itself does not have this property or method, it will look up along the prototype chain.

Code example:

person1.greet();  // Hello, Alice!

console.log(person1.hasOwnProperty('name'));  // true，对象自身有name属性
console.log(person1.hasOwnProperty('greet'));  // false，对象自身没有greet方法

console.log(person1.__proto__.hasOwnProperty('greet'));  // true，原型对象有greet方法

person1.name = 'Eve';

console.log(person1.hasOwnProperty('name'));  // true，对象自身有name属性，不会修改原型对象的属性

3. Characteristics of the prototype chain

1. The prototype chain is a relationship between objects. Through the prototype chain, an object can look up properties and methods level by level until it finds or reaches the top of the prototype chain.
2. The prototype chain is linear. In the prototype chain, each object has only one prototype, its parent object.

Code example:

function Animal(name) {
  this.name = name;
}

function Cat(name, color) {
  this.name = name;
  this.color = color;
}

Cat.prototype = new Animal();

var cat = new Cat('Tom', 'blue');

console.log(cat instanceof Cat);  // true
console.log(cat instanceof Animal);  // true

console.log(cat.hasOwnProperty('name'));  // true，对象自身有name属性
console.log(cat.hasOwnProperty('color'));  // true，对象自身有color属性

console.log(cat.__proto__ === Cat.prototype);  // true
console.log(Cat.prototype.__proto__ === Animal.prototype);  // true
console.log(Animal.prototype.__proto__ === Object.prototype);  // true，原型链的顶端是Object.prototype

4. Application of prototype and prototype chain

1. Inheritance: Through the prototype chain, the inheritance relationship between objects can be realized . The prototype object of the child object points to the parent object, so that the child object can inherit the properties and methods of the parent object.

Code example:

function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  console.log(this.name + ' is eating.');
};

function Cat(name, color) {
  this.name = name;
  this.color = color;
}

Cat.prototype = new Animal();

var cat = new Cat('Tom', 'blue');

cat.eat();  // Tom is eating.

2. Sharing of properties and methods: Through the prototype object, the sharing of properties and methods between multiple objects can be achieved. This saves memory space, especially if multiple instances need to share the same properties and methods.

Code example:

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

Person.prototype.sayHi = function() {
  console.log('Hi, I am ' + this.name);
};

var person1 = new Person('Alice', 20);
var person2 = new Person('Bob', 25);

person1.sayHi();  // Hi, I am Alice
person2.sayHi();  // Hi, I am Bob

Summary:

Prototype and prototype chain are important concepts in JavaScript. They form a mechanism for inheritance and sharing between objects. . Through prototypes and prototype chains, we can better organize and manage the properties and methods of objects, and improve the reusability and maintainability of code. In actual development, in-depth understanding and proficiency in using the characteristics and applications of prototypes and prototype chains will help improve JavaScript programming skills.

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