The difference between __proto__ and prototype in JS

__proto__ and prototype in JS are two properties related to prototypes, and they have slightly different functions. This article will introduce and compare the differences between the two in detail, and provide corresponding code examples.

First of all, let’s understand their meaning and use.

proto

__proto__ is a built-in property of an object that points to the prototype of the object. Every object has a __proto__ attribute, including custom objects, built-in objects, and function objects. Through the __proto__ attribute, we can access and manipulate the prototype chain of the object.

Let us look at an example:

let obj = {};
console.log(obj.__proto__); // 输出：Object {}

let arr = [];
console.log(arr.__proto__); // 输出：Array []

function func() {}
console.log(func.__proto__); // 输出：[Function]

In the above code, we created an empty object obj and accessed its __proto__ attribute. As you can see, obj.__proto__ points to an Object{} object. Similarly, we also created an empty array arr and accessed its __proto__ attribute. The result is that arr.__proto__ points to an Array[] object. For the function object func, its __proto__ points to a [Function] object.

To summarize, the __proto__ attribute is used to point to the prototype of the object, through which we can access and operate the prototype chain.

prototype

prototype is a unique attribute of the function object, which points to a prototype object. Every function object has a prototype attribute, but it is only meaningful if the function is used as a constructor.

Let’s look at an example:

function Person() {}

console.log(Person.prototype); // 输出：Person {}

In the above code, we define a Person function object and access its prototype attribute. As you can see, Person.prototype points to a Person{} object.

The main role of the prototype attribute is to build the prototype chain of the instance object in the constructor mode. When we use a constructor to create an object, its __proto__ attribute points to the constructor's prototype attribute.

let person = new Person();

console.log(person.__proto__ === Person.prototype); // 输出：true

In the above code, we use the Person constructor to create an object person. It turns out that person.__proto__ points to Person.prototype.

Differences and connections

__proto__ and prototype are related to the prototype of the object. The connections and differences between them are as follows:

1. __proto__ is the instance object The attribute is used to point to the prototype of the object; and prototype is the attribute of the constructor, used to point to the prototype object of the constructor.
2. __proto__ is an attribute that reads and accesses the object's prototype chain and can be accessed directly on the instance object; prototype is an attribute of the constructor and can only be accessed inside the constructor.
3. __proto__ can be modified through Object.setPrototypeOf() or direct assignment; while prototype can only be modified inside the constructor through the function name.prototype.
4. __proto__ is a non-standard attribute, only supported by some browsers; prototype is a standard attribute, and all objects and functions have it.

The following code example is used to further illustrate the difference and connection between the two:

function Animal() {}
Animal.prototype.eat = function() {
  console.log("Animal is eating");
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function() {
  console.log("Dog is barking");
};

const dog1 = new Dog();
dog1.eat(); // 输出：Animal is eating
dog1.bark(); // 输出：Dog is barking

console.log(dog1.__proto__ === Dog.prototype); // 输出：true
console.log(Dog.prototype.__proto__ === Animal.prototype); // 输出：true

In the above code, we create the Animal constructor and Dog constructor by defining An inheritance relationship. Through the __proto__ and prototype attributes, we can access the object's prototype chain and prove the connection between them.

To sum up, __proto__ and prototype are both related to prototypes in JS, but they are different in function and usage. Understanding their differences can help us better understand the prototype mechanism in JS and utilize them more flexibly when writing code.

The above is the detailed content of The difference between __proto__ and prototype in JS. For more information, please follow other related articles on the PHP Chinese website!