Detailed explanation of construction without new

This time I will bring you a detailed explanation of the new-free build. What are the precautions when using the new-free build? Here are actual cases, let’s take a look.

Preface

When we want tocreate an object, we may use the new method to construct an object, then It stands to reason that jquery is also an object and should be constructed using new jquery(). Why do we create jquery objects without using new jquery() but directly using something like $(ele)How to construct a jquery object? In fact, new is still used internally to build it, but jquery builds it for us internally. Please see the following code

function Jquery(selector, context) {
  return new Jquery(selector, context);
 }
 Jquery.prototype = {
  version:'1.01'
 }

Directly use new internally to build Jquery like this. Obviously there is a problem. In this case, it will form An infinite loop. In order to solve the problem of the infinite loop, please look at the following code:

function Jquery(selector, context) {
 return Jquery.prototype.init(selector, context);
}
Jquery.prototype = {
 version:'1.01',
 init: function () {
  this.name = "lin";
  return this;
 }
}
var a = Jquery();
var b = Jquery();
console.log(a.version); //1.01
console.log(a.name); //lin
a.name = "na";
console.log(b.name); //na

The problem of the infinite loop has indeed been solved, but new problems have been discovered. You can see that the attributes of the two objects a and b are common. I changed the a.name attribute to na, and the b.name attribute also changed to na. The reason is that this points to Jquery's

in order to solve this problem. , we can build a new object every time we call Jquery(). The improved code is as follows:

function Jquery(selector, context) {
 return new Jquery.prototype.init(selector, context); //注意看，这里多了个new
}
Jquery.prototype = {
 version:'1.01',
 init: function () {
  this.name = "lin";
  console.log(this);
  return this;
 }
}
var a = Jquery();
var b = Jquery();
console.log(a.version); //undefined
console.log(a.name); //lin
a.name = "na";
console.log(b.name); //na

After processing in this way, the problem of attribute sharing has been solved. Each object Each has its own attributes, which can be modified freely. Each object does not affect each other, but new problems have been discovered. You can see that when we print the a.version attribute on the console, we cannot read this attribute. The reason is that Jquery.prototype and Jquery.prototype.init.prototype are irrelevant at this time. What we create is the Jquery.prototype.init object. , so you can only read the properties on Jquery.prototype.init.prototype but cannot read the properties on Jquery.prototype (this example refers to the version property), solution The method is very simple, just assign Jquery.prototype to Jquery.prototype.init.prototype, which is equivalent to assigning all the properties on the Jquery prototype to Jquery.init On the prototype, please look at the following code:

function Jquery(selector, context) {
 return new Jquery.prototype.init(selector, context);
}
Jquery.prototype = {
 version:'1.01',
 init: function () {
  this.name = "lin";
  return this;
 }
}
Jquery.prototype.init.prototype = Jquery.prototype; //画龙点睛之笔
var a = Jquery();
var b = Jquery();
console.log(a.version); //1.01
console.log(a.name); //lin
a.name = "na";
console.log(b.name); //na

As you can see, our console prints the version attribute of the a object, which can be read and printed.

At this point, the new-free construction of Jquery has been completed.

ps: jQuery.fn is actually the prototype of jQuery. You can see this statement in the jquery source code: jQuery.fn = jQuery.prototype = { };

　$() and jquery() are actually the same. You can see this statement in the jquery source code: window.jQuery = window.$ = jQuery;

Prototype prototype

Let’s understand what a prototype is?

In JavaScript, the prototype is also an object. The properties of the object can be realized through the prototype. Inheritance, JavaScript objects all contain a "[[ Prototype]]" internal property, this property corresponds to the prototype of the object.

The two attributes "prototype" and "proto" may sometimes be confused. "Person.prototype" and "Person.proto" are completely different.

Here is a brief introduction to "prototype" and "proto":

For all objects, there is a proto attribute, which corresponds to the prototype of the object.

For function objects, in addition to the proto attribute, there is also a prototype attribute. When a function is used as a constructor to create an instance, the prototype attribute value of the function will be used as the prototype. Assign values ​​to all object instances (that is, set the proto attribute of the instance)

function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.getInfo = function(){
console.log(this.name + " is " + this.age + " years old");
};
//调用
var will = new Person("Will", 28);
will.getInfo();//"Will is 28 years old"

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How two zTree interact with each other

How to use webpack to write jquery environment configuration

How to automatically convert uppercase and lowercase letters when jackson parses a json string

Usage of jQuery EasyUI folding panel

The above is the detailed content of Detailed explanation of construction without new. For more information, please follow other related articles on the PHP Chinese website!