jquery学習ノートのnew構築の詳細


前言
オブジェクトを作成するには、newメソッドを使用してオブジェクトを構築することができますが、jqueryも対象であり、new jquery()で構築されるべきです。なぜ私たちはjqueryオブジェクトを作成するにはnew jquery()ではなく、直接$(ele)と同様の方法でjqueryオブジェクトを構築しますか?内部はやはりnewを使って構築されています。jquery内部で構築されただけです。下のコードを見てください。

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

 Jquery.prototype = {
  version:'1.01'
 }
このまま内部でnewを使ってJqueryを構築するのは明らかに問題があります。そうすると、死のサイクルが形成されます。死循環の問題を解決するために、次のコードを見てください。

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
死のサイクルの問題は確かに解決されました。しかし、新たな問題が発見されました。aとbの両方のオブジェクトの属性は共通です。私はa.name属性を変更しました。
この問題を解決するために、私たちはb.nameを呼び出すたびに新しいオブジェクトを構築することができます。

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
このように処理した後、属性共有の問題はすでに解決されました。各オブジェクトにはそれぞれの属性があり、自由に変更できます。各オブジェクトは互いに影響しません。しかし、また新しい問題が発見されました。私たちのコンソールの印刷a.versionという属性が見られます。私たちはJquery()オブジェクトを作成しましたので、Jquery.prototypeの属性しか読めません。Jquery.prototype.init.prototypeの属性を読めません。解決方法は簡単です。Jquery.prototype.initJquery.prototype.init.prototypeに割り当てます。これはJqueryのプロトタイプの属性を全部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
私たちはコンソールの印刷aオブジェクトのバージョンのプロパティを見ることができます。もう読み取り、印刷できます。
これで、Jqueryの無new構築が完了しました。
ps:jQuery.fnはjQueryのprototypeです。jqueryのソースコードはこの文を見ることができます。Jquery.prototypejqueryと同じです。jqueryソースはこの文を見ることができます。Jquery.prototype.init.prototypeプロトタイプ
原型は何ですか?
JavaScriptでは、プロトタイプもオブジェクトであり、プロトタイプによってオブジェクトの属性継承が可能であり、JavaScriptのオブジェクトには「Prottype」という内部属性が含まれています。この属性に対応するものがプロトタイプです。
「prototype」と「_u u」についてproto_"この二つの属性は、時には混同される可能性があります。「Person.prototype」と「Person.u.」proto_"まったく違っています。
ここでは「プロタイプ」と「ウウウ」に対してproto_"簡単な紹介を行います。
全ての対象に対して、__uがあります。プロト.属性、この属性は対象の原型になります。
関数オブジェクトに対してプロト.属性以外にも、プロトタイプ属性があり、一関数を構成関数として使用してインスタンスを作成すると、その関数のプロトタイプ属性値がプロトタイプとしてすべてのオブジェクトインスタンスに割り当てられます。プロト.属性)

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"
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。