How to build without new in jquery

When most people use jQuery, they use the first construction method without new, directly using $('') to construct. This is also a very convenient place for jQuery. This article mainly introduces you to the relevant information about jquery study notes without new construction. Friends who need it can take a look below.

Preface

When we want to create an object, we may use the new method to construct an object, so jquery is also an object. , it should also be constructed using new jquery() Why do we create jquery objects without using new jquery() but directly using a method similar to $(ele) How to build 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 and 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 property inheritance of the object can be realized through the prototype. JavaScript objects all contain a "[[Prototype]]" internal property, which corresponds to It is 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 object Prototype

For function objects, in addition to the __proto__ attribute, there is also the prototype attribute. When a function is used as a constructor to create an instance, the prototype attribute value of the function will be assigned as the prototype. All object instances (that is, setting 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"

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About the mobile touch screen sliding function in jquery

How to install nvm on Mac (detailed tutorial)

How to implement the time function in the WeChat applet

Exploring the generated code in webpack

The above is the detailed content of How to build without new in jquery. For more information, please follow other related articles on the PHP Chinese website!