How to set up prototype chain in JavaScript

JavaScript is a prototype-based programming language. In JavaScript, each object has a prototype object. We can access and inherit the properties and methods on the parent object through the JavaScript prototype chain mechanism, thereby achieving code reuse and optimization.

The following is an article about setting up the prototype chain in JavaScript. It mainly introduces what is the prototype chain of JavaScript, how to create prototype objects and how to create instance objects.

1. JavaScript prototype chain

JavaScript prototype chain means that each object has a prototype object (prototype), which contains properties and methods. When accessing the properties and methods of an object, JavaScript will first check whether the property or method exists in the object itself. If it does not exist, it will search up the prototype chain of the object until it finds the property or method. If the property or method is not found in the entire prototype chain, undefined is returned.

We can use JavaScript’s prototype chain mechanism to share object properties and methods, thereby achieving code reuse and optimization. Usually, when implementing the inheritance function, we will use the prototype chain mechanism to inherit the properties and methods on the parent object, so as to achieve the effect of code reuse.

2. Create a prototype object

In JavaScript, we can create a prototype object through a constructor or object literal. The prototype object of the constructor can be accessed and set through the prototype attribute. The prototype object of an object literal can be accessed and set through the __proto__ attribute.

1. Use the constructor to create a prototype object

The sample code is as follows:

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

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

In the above example, we define a Person constructor and use the prototype attribute to A sayHello method is added to the prototype object.

The prototype object created using the constructor will be shared by the instance object. Therefore, we can access and call the properties and methods on the prototype object by creating an instance object.

The sample code is as follows:

var person = new Person('Jack', 20);
person.sayHello(); // 输出：Hello, Jack

In the above sample code, we first create a person object instance through the Person constructor, and then output a greeting by calling the sayHello method.

2. Use object literals to create prototype objects

The sample code is as follows:

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

In the above sample code, we use object literals to create a person Object, which contains name, age and sayHello properties and methods. In addition, in object literals, we can use the __proto__ attribute to access and set its prototype object.

The sample code is as follows:

var person1 = {
  name: 'Jack',
  age: 20,
};

var person2 = {
  name: 'Lucy',
  age: 18,
};

person1.__proto__ = person;
person2.__proto__ = person;

person1.sayHello(); // 输出：Hello, Jack
person2.sayHello(); // 输出：Hello, Lucy

In the above sample code, we first created two instance objects of person1 and person2, and then pointed their prototype objects to the above through the __proto__ attribute The defined person object realizes the sharing of the sayHello method, and the method can be directly accessed and called in the instance object.

3. Create instance objects

In JavaScript, we can create instance objects through constructors or object literals. When the constructor creates an instance object, using the new keyword can automatically call the constructor and return a new instance object. Object literals create instance objects directly.

1. Use the constructor to create an instance object

The sample code is as follows:

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

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

var person = new Person('Jack', 20);
person.sayHello(); // 输出：Hello, Jack

In the above sample code, we first define a Person constructor and assign it to The prototype object adds a sayHello method. Then, we call the Person constructor using the new keyword, create a person object instance, and output a greeting by calling the sayHello method.

2. Use object literals to create instance objects

The sample code is as follows:

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

var person1 = Object.create(person);
person1.name = 'Jack';
person1.age = 20;
person1.sayHello(); // 输出：Hello, Jack

var person2 = Object.create(person);
person2.name = 'Lucy';
person2.age = 18;
person2.sayHello(); // 输出：Hello, Lucy

In the above sample code, we first create a person object using object literals , and then use the Object.create method to create two instance objects person1 and person2, and specify their prototype objects as person objects. Finally, we set the name and age attributes for the person1 and person2 objects respectively, and output the greeting by calling the sayHello method.

The above is the detailed content of How to set up prototype chain in JavaScript. For more information, please follow other related articles on the PHP Chinese website!