So erstellen Sie ohne Neu in JQuery

Wenn die meisten Leute jQuery verwenden, verwenden sie die erste Konstruktionsmethode ohne new und verwenden direkt $('') zum Konstruieren, was auch ein sehr praktischer Ort für jQuery ist. Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zu JQuery-Studiennotizen ohne neue Konstruktion ein. Freunde, die sie benötigen, können einen Blick darauf werfen.

Vorwort

Wenn wir ein Objekt erstellen möchten, können wir die neue Methode verwenden, um ein Objekt zu erstellen, sodass jquery auch ein Objekt ist ., sollte es auch mit new jquery() erstellt werden, um ein JQuery-Objekt zu erstellen, sondern direkt eine Methode ähnlich wie new jquery(), um ein JQuery-Objekt zu erstellen? Tatsächlich wird new intern immer noch zum Erstellen verwendet, aber jquery hilft uns beim internen Erstellen. $(ele)

function Jquery(selector, context) {
  return new Jquery(selector, context);
 }

 Jquery.prototype = {
  version:'1.01'
 }

In diesem Fall ist es offensichtlich problematisch wird eine Endlosschleife bilden. Um das Problem der Endlosschleife zu lösen, schauen Sie sich bitte den folgenden Code an:

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

Das Problem der Endlosschleife wurde zwar gelöst, aber es wurde ein neues Problem entdeckt. Sie können sehen, dass die Attribute Von den beiden Objekten a und b habe ich das Attribut

in na geändert. Der Grund dafür ist, dass dies auf Jquerys a.nameb.name verweist Für dieses Problem können wir jedes Mal ein neues Objekt erstellen und den Code wie folgt verbessern:

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

Nach der Verarbeitung auf diese Weise wurde das Problem der Attributfreigabe gelöst Attribute und können sich nicht gegenseitig beeinflussen, aber es wurde erneut ein Problem entdeckt. Wenn wir das Attribut a.version auf der Konsole drucken, können wir dieses Attribut nicht lesen 🎜> und Jquery() sind zu diesem Zeitpunkt irrelevant. Wir haben ein

-Objekt erstellt, daher können wir nur die Attribute auf

lesen, nicht jedoch die Attribute auf Jquery.prototype (dieses Beispiel bezieht sich auf das Versionsattribut). Die Lösung ist sehr einfach: Ersetzen Sie einfach Jquery.prototype.init.prototype Zugewiesen an Jquery.prototype.init. Dies entspricht der Zuweisung aller Attribute im Jquery-Prototyp zum Prototyp von Jquery.prototype.init.prototype. Bitte sehen Sie sich den folgenden Code an: Jquery.prototype

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

Jquery.prototype As Wie Sie sehen, druckt unsere Konsole das Versionsattribut eines Objekts, das bereits gelesen und gedruckt werden kann. Jquery.prototype.init.prototypeJquery.initZu diesem Zeitpunkt ist der neue, kostenlose Aufbau von Jquery abgeschlossen.

ps:

jQuery.fn ist eigentlich der Prototyp von jQuery. Sie können diese Anweisung im jquery-Quellcode sehen: $() Es ist eigentlich dasselbe wie jquery() Sie können diese Anweisung im Jquery-Quellcode sehen: jQuery.fn = jQuery.prototype = {};

window.jQuery = window.$ = jQuery; Prototyp-Prototyp

Wissen Sie, was ein Prototyp ist?

In JavaScript ist der Prototyp auch ein Objekt. Die Attributvererbung des Objekts kann durch das interne Attribut „[[Prototyp]]“ realisiert werden Es ist der Prototyp des Objekts. Die beiden Attribute „prototype“ und „__proto__“ können manchmal verwechselt werden. „Person.prototype“ und „Person.__proto__“ sind völlig unterschiedlich.

Hier ist eine kurze Einführung in „Prototyp“ und „__proto__“:

Für alle Objekte gibt es ein __proto__-Attribut, das dem Objekt entspricht. Der Prototyp von Für Funktionsobjekte gibt es zusätzlich zum Attribut __proto__ auch das Prototypattribut. Wenn eine Funktion als Konstruktor zum Erstellen einer Instanz verwendet wird, wird der Prototypattributwert der Funktion als Prototyp zugewiesen Alle Objektinstanzen (d. h. das Festlegen des __proto__-Attributs der Instanz)

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"

Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Über die Schiebefunktion für mobile Touchscreens in JQuery

So installieren Sie nvm auf einem Mac (ausführliche Anleitung)

So implementieren Sie die Zeitfunktion im WeChat-Applet

Untersuchen des generierten Codes im Webpack

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ohne Neu in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!