In-depth understanding of custom constructors (reading notes in javascript mode)

In-depth understanding of custom constructors

在javascript中，有很多方法可以创建对象

• Literally
• Through the built-in constructor
• Through a custom constructor

For example: This is one of the most common custom constructors, instantiating a Person object called tianqin

	var Person = function(name){
    
    
			this.name = name;
			this.say = function(){
    
    
				return "I am" + "  "+this.name
			};
		};
		
		var tianQin = new Person("tianqin");
		tianQin.say();

Output results

But when using the new operator, a series of implicit behaviors occur inside the function

• Create an empty object and this variable refers to this object, while inheriting the prototype of the object
• Properties and methods are added to the object referenced by this
• The newly created object is referenced by this, and finally returns this implicitly

Pseudo code represents this process

var Person = function(){
    
    
			var this = {
    
    
				//隐式的创建了一个this对象
			}
			this.name = name;
			this.say = function(){
    
    
				return "I am" + "  "+this.name
			};//这个过程其实是在给隐式创建的this对象添加属性和方法

			return this；// 这里最后隐式的返回this(如果没有显示的返回其他对象，换句话说可以返回其他显示的对象)
		}

The empty object this we have seen is not empty. It has inherited many properties from the prototype.
In fact, it is var this = Object.create( Person.prototype)

It is worth noting that the say method is added to this. This will cause a new function to be created in memory when calling new Person() in any case. The efficiency of this method is very low. The
better way is to add the method to the prototype of the Person class

		Person.prototype.say = function() {
    
    
				return "I am" + "  " + this.name
		};

Now we manually change this implicit process, and manually add a custom object

var Obj = function(){
    
    
			this.name = "tianQin";
			var myobj = {
    
    
		//就像隐式的生成this对象一样，这里手动的添加了一个新的自定义对象
			}
			myobj.name = "hlh";
			return myobj;
			//给新的对象添加了属性，最后返回这个新的对象
		}
		var obj = new Obj();
		console.log(obj.name);

Look at the result: output hlh

so you can find that you can freely return any object in the constructor

But have you ever thought about a question, why do we use new when we instantiate an object?
What if there is no new?
In fact, the absence of new will not cause grammatical errors, but it may cause logic errors and unexpected behaviors, and may cause this in the constructor to point to the global object window.
for example:

	var Msg = function(){
    
    
			this.msg = "这是构造函数"
		}
		var newMsg = new Msg();  //这是使用了 new 的方式
		
		console.log(newMsg.msg);

		console.log(typeof newMsg);

		var newMsg2 = Msg(); //这是不使用 new 的方式
		// console.log(newMsg2.msg); 报错
		
		console.log(window.msg);

		console.log(typeof newMsg2);

Let's take a look at the output results: from
top to bottom:

this accident has been resolved in ECMAscript5, and in strict mode, this does not point to global variables

There is also a clever way called using a naming convention. The naming can be that or other.

Use that to transform the above code:

var Msg = function(){
    
    
			var that = {
    
    };
			that.msg = "这是构造函数"
			return that;
		}
		var newMsg = new Msg();  //这是使用了 new 的方式

		console.log(newMsg.msg);

		console.log(typeof newMsg);

		var newMsg2 = Msg(); //这是不使用 new 的方式
		console.log(newMsg2.msg); 
		
		console.log(window.msg);

		console.log(typeof newMsg2);	

Let's look at the output again: I

found that an object can be instantiated here either with new or without new