Detailed explanation of object literals and constructors creating objects

Object literals create objects, while constructors create function objects. In order to help understand, I hope this article can help everyone.

1. Why use prototype instead of __proto__ when adding attributes to the prototype chain?

2. Why does JavaScript need to set a function object? , what is its role

3. A deeper understanding of the prototype chain

The following two pieces of code use object literals and constructors respectively. Functions create objects.

Code segment 1:

var a={"name":"nihao"};
console.log(a);

Code segment 2:

var a=function(name){
    this.name=name;
};
var b= new a("nihao");
console.log(b);

First, we need to know:

1 , The prototype of the function object is the object (the prototype chain is: instance, through the new constructor--> function object--> object-->null)

2. The function has the prototype attribute, and the object No

Then, in some scenarios, we have a public property that requires multiple newly created objects to inherit. At this time, the characteristics of function objects can be reflected. Let’s take a look at the code. :

1. Using the constructor

var a=function(name){
    this.name=name;
};
a.prototype.sex="nan";
var b= new a("nihao");
console.log(b);
console.log(b.name);
console.log(b.sex);

var c=new a("test");
console.log(c);
console.log(c.name);
console.log(c.sex);

as above, you can easily implement the inheritance of properties or methods. Print the above code on the console and you can easily see that the prototype chain is Like this (taking object b as an example): Object b-->Function object-->Object-->null

2. Use object literals

Use object literals What is created is an object, which has no prototype attribute, so we can only use __proto__, but using __proto__ on the object may cause some problems. The code is as follows:

var a={"name":"nihao"};
a.__proto__.sex="nan";
console.log(a);
console.log(a.name);
console.log(a.sex);
var b={};
console.log(b);
console.log(b.name);
console.log(b.sex);

As above, you can easily get the result by running the above code:

{name: "nihao"} nihao nan {} undefined nan

Hey, this is very strange. The b object is obviously set to empty? This is because when executing a.__proto__.sex="nan";, the program adds an attribute sex to the prototype of the object, and b is the prototype of the object and the inherited object, which often leads to the occurrence of this problem.

Finally, the summary is:

The function object is inherited from the prototype of the object. With the function object, we can add attributes to the prototype of the function, and these attributes are saved in the function object, but does not affect other objects.

Related recommendations:

A brief discussion of js literals, access to object literals, and key points Usage of the word in

What are the differences between the operations of these two types of object literals (json) in JavaScript?

Detailed explanation of class, constructor, and factory functions in Javascript

The above is the detailed content of Detailed explanation of object literals and constructors creating objects. For more information, please follow other related articles on the PHP Chinese website!