這次帶給大家無new建置詳解，使用無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"登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
兩個zTree怎樣互相連結
#怎麼用webpack寫jquery的環境配置
jackson解析json字串時大小寫自動轉換的方法
#jQuery EasyUI 折疊面板的使用
以上是無new建置詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
