jquery中如何實現無new構建

這篇文章主要為大家展示了“jquery中如何實現無new構建”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“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屬性為na，b.name屬性也跟著變為了na，其原因就是this都是指向Jquery的

為了解決這個問題，我們可以每次調用Jquery()的時候都構建一個新的對象，改進代碼如下：

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.prototype和Jquery.prototype.init.prototype是互不相干的，我們創建的是Jquery.prototype.init對象,所以只能讀到Jquery.prototype.init.prototype上的屬性而讀取不到Jquery.prototype上的屬性的(該例指version這個屬性)，解決辦法很簡單，就是把Jquery.prototype賦值給Jquery.prototype.init.prototype，這樣就相當于把Jquery原型上的屬性全部賦值到了Jquery.init的原型上，請看下面代碼：

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對象的version屬性，已經可以讀取并且打印出來了。

至此，已經完成了Jquery的無new構建。

ps：jQuery.fn其實就是jQuery的prototype，jquery源碼可以看到該條語句：jQuery.fn = jQuery.prototype = {};

　　$()和jquery()其實是一樣的，jquery源碼可以看到該條語句： window.jQuery = window.$ = jQuery;

原型 prototype

認識一下什么是原型？

在JavaScript中，原型也是一個對象，通過原型可以實現對象的屬性繼承，JavaScript的對象中都包含了一個" [[Prototype]]"內部屬性，這個屬性所對應的就是該對象的原型。

對于"prototype"和"__proto__"這兩個屬性有的時候可能會弄混，"Person.prototype"和"Person.__proto__"是完全不同的。

在這里對"prototype"和"__proto__"進行簡單的介紹：

對于所有的對象，都有__proto__屬性，這個屬性對應該對象的原型

對于函數對象，除了__proto__屬性之外，還有prototype屬性，當一個函數被用作構造函數來創建實例時，該函數的prototype屬性值將被作為原型賦值給所有對象實例（也就是設置實例的__proto__屬性）

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"

以上是“jquery中如何實現無new構建”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！