這篇文章主要為大家展示了“jquery中如何實(shí)現(xiàn)無new構(gòu)建”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jquery中如何實(shí)現(xiàn)無new構(gòu)建”這篇文章吧。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請域名、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、上虞網(wǎng)站維護(hù)、網(wǎng)站推廣。

前言

當(dāng)我們想要?jiǎng)?chuàng)建一個(gè)對象，我們可能使用new方法去構(gòu)建一個(gè)對象，那按道理jquery也是一個(gè)對象，應(yīng)該也是用new jquery()來構(gòu)建呀為什么我們創(chuàng)建jquery對象不用new jquery()而是直接使用類似$(ele)的方式去構(gòu)建出來一個(gè)jquery對象呢？其實(shí)內(nèi)部還是使用了new來構(gòu)建的，只是jquery內(nèi)部幫我們構(gòu)建了而已，請看下面代碼

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

 Jquery.prototype = {
  version:'1.01'
 }

直接這樣內(nèi)部使用new來構(gòu)建Jquery，很明顯是有問題的，這樣的話就形成了死循環(huán)。為了解決死循環(huán)的問題，請看下面代碼：

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

死循環(huán)的問題確實(shí)解決了，但是又發(fā)現(xiàn)了新的問題，可以看到a和b兩個(gè)對象的屬性是公用的,我修改a.name屬性為na，b.name屬性也跟著變?yōu)榱薾a，其原因就是this都是指向Jquery的

為了解決這個(gè)問題，我們可以每次調(diào)用Jquery()的時(shí)候都構(gòu)建一個(gè)新的對象，改進(jìn)代碼如下：

function Jquery(selector, context) {
 return new Jquery.prototype.init(selector, context); //注意看，這里多了個(gè)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

這樣處理之后，屬性共享的問題已經(jīng)解決了，每個(gè)對象都有各自的屬性，可以自由修改，每個(gè)對象互不影響，但是又又又發(fā)現(xiàn)了新的問題，可以看到我們控制臺(tái)打印a.version這個(gè)屬性的時(shí)候是讀取不到這個(gè)屬性的，原因就在于此時(shí)Jquery.prototype和Jquery.prototype.init.prototype是互不相干的，我們創(chuàng)建的是Jquery.prototype.init對象,所以只能讀到Jquery.prototype.init.prototype上的屬性而讀取不到Jquery.prototype上的屬性的(該例指version這個(gè)屬性)，解決辦法很簡單，就是把Jquery.prototype賦值給Jquery.prototype.init.prototype，這樣就相當(dāng)于把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; //畫龍點(diǎn)睛之筆

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

可以看到，我們控制臺(tái)打印a對象的version屬性，已經(jīng)可以讀取并且打印出來了。

至此，已經(jīng)完成了Jquery的無new構(gòu)建。

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

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

原型 prototype

認(rèn)識(shí)一下什么是原型？

在JavaScript中，原型也是一個(gè)對象，通過原型可以實(shí)現(xiàn)對象的屬性繼承，JavaScript的對象中都包含了一個(gè)" [[Prototype]]"內(nèi)部屬性，這個(gè)屬性所對應(yīng)的就是該對象的原型。

對于"prototype"和"__proto__"這兩個(gè)屬性有的時(shí)候可能會(huì)弄混，"Person.prototype"和"Person.__proto__"是完全不同的。

在這里對"prototype"和"__proto__"進(jìn)行簡單的介紹：

對于所有的對象，都有__proto__屬性，這個(gè)屬性對應(yīng)該對象的原型

對于函數(shù)對象，除了__proto__屬性之外，還有prototype屬性，當(dāng)一個(gè)函數(shù)被用作構(gòu)造函數(shù)來創(chuàng)建實(shí)例時(shí)，該函數(shù)的prototype屬性值將被作為原型賦值給所有對象實(shí)例（也就是設(shè)置實(shí)例的__proto__屬性）

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

以上是“jquery中如何實(shí)現(xiàn)無new構(gòu)建”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文標(biāo)題：jquery中如何實(shí)現(xiàn)無new構(gòu)建-創(chuàng)新互聯(lián)
瀏覽地址：http://chinadenli.net/article12/ddicgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、軟件開發(fā)、網(wǎng)站制作、靜態(tài)網(wǎng)站、建站公司、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)