Detailed explanation of how JavaScript objects are created and constructor pattern code

javascript object-oriented knowledge is very extensive, and it will take some time to understand it in depth

Creation of objects:

1 Create an object-oriented

var obj = new Object();
obj.name = 'haha';
obj.showName = function(){
 alert(obj.name);
}
obj.showName();

Disadvantages: When we want to create multiple object-oriented objects, there are too many duplicate codes and need to be encapsulated, so there is a factory method.

2 Factory method

function CreatePerson(name){
 var obj = new Object(); //原料
 obj.name = name;   //加工
 obj.showName = function(){
  alert(this.name);
 }
 return obj;//出厂
}
var p1 = CreatePerson('haha');
p1.showName();
var p2 = CreatePerson('hehe');
p2.showName();
//其实就是简单的封装函数，整个过程像工厂的流水线，所以叫工厂方式

Disadvantages: The type of the created object cannot be identified. Because they are all Objects, there is no distinction, unlike Date, Array, etc., so the constructor pattern emerged.

3 Constructor pattern

function CreatePerson(name){
 this.name = name;
 this.showName = function(){
  alert(this.name);
 }
}
var p1 =new CreatePerson('haha');
p1.showName();
var p2 = new CreatePerson('hehe');
p2.showName();

We change it through these two aspects:

The first letter of the function name is capitalized

This is to distinguish it from ordinary functions. The constructor itself is actually an ordinary function, but we use it specifically to implement the construction function, so we have a special name. Called a constructor, any function can become a constructor, depending on how you call the function. When called using New, it becomes a constructor.

New keyword call

The New keyword is used when calling the function, so what exactly does New do? What is the difference between using New or not? Looking at the following example

function CreatePerson(name){
 this.name = name;
 this.showName = function(){
  alert(this.name);
 };
 console.log(this);
}
new CreatePerson('haha'); //CreatePerson
CreatePerson('haha'); //window

we will find that when using New to call a function, the point of this will be different. In fact, New mainly does the following things, but what is written below is only a general behavior, not the internal source code.

function CreatePerson(name){
 var obj = {}; //声明一个空对象obj
 obj._proto_= CreatePerson.prototype;
 //把这个对象的_proto_属性指向构造函数的原型对象,这样obj就可以调用CreatePerson原型对象下的所有方法 ，这里原型先知道结论，下面会讲。
 CreatePerson.apply(obj); //用apply方法让this指向obj对象
 this.name = name; //obj对象添加属性，方法
 this.showName = function(){
  alert(this.name);
  };
 return obj;//返回这个对象
}

Problems with the function construction pattern:

alert(p1.showName==p2.showName);//false

Disadvantages: It can be seen that the two objects do not share one Method, every time new, the system will create a new memory. Each of these two objects has its own territory, but they have the same function and are not shared, which is definitely not what we want. So there is the next method, prototype + construction mode

4 Prototype + construction mode

Prototype: Each function has a prototype attribute, which is a Object, also called a prototype object, we can write methods and properties on it (but the prototype object not only has the properties and methods we wrote, but also others, which will be introduced below), and the instance created through this function Objects can share the methods and properties of this prototype object. So we only need to put the things we want to share under the prototype of the function, and the things we don't want to share can be created through the constructor.
Look at a chestnut (prototype + construction)

function CreatePerson(name){
 this.name = name;
}
CreatePerson.prototype.showName = function(){
 alert(this.name);
}
var p1 =new CreatePerson('haha');
p1.showName();
var p2 = new CreatePerson('hehe');
p2.showName();
alert(p1.showName==p2.showName);//true

The test is true. It can be seen that the showName() method is shared, which means they share a memory. , furthermore, they have a reference relationship, which means that if you change the showName of p1, it will also affect the showName of p2.

The above is the detailed content of Detailed explanation of how JavaScript objects are created and constructor pattern code. For more information, please follow other related articles on the PHP Chinese website!