2011-10-04 10 views
6

पहले मैंने सोचा था कि यह केवल इसे वापस करने से पहले jQuery ऑब्जेक्ट में ओबीजे [0], ओबीजे [1], ओबीजे [2], आदि असाइन कर रहा था, और लंबाई मैन्युअल रूप से असाइन की गई है। लेकिन नहीं, क्योंकि console.log एक सरणी लॉग करता है, न कि ऑब्जेक्ट।jQuery कैसे ऐरे-ऑब्जेक्ट्स बनाता है?

मैंने jQuery स्रोत पर एक त्वरित नज़र डाली लेकिन चूंकि मैं इससे परिचित नहीं हूं इसलिए मैंने इसे आसानी से क्रैक नहीं किया। jQuery.makeArray पहले पॉप अप किया गया, लेकिन यह जो मैं खोज रहा हूं उसके विपरीत यह साबित हुआ, आप वास्तव में इसका उपयोग करके ऑब्जेक्ट विधियों को खो देते हैं।

मेरा पहला अनुमान पहले सरणी शुरू कर रहा है, और उसके बाद ऑब्जेक्ट से सभी गुणों और विधियों की प्रतिलिपि बना रहा है।

क्या कोई भी jQuery स्रोत कोड अनुभव वाले किसी के पास इसका स्पष्ट उत्तर है?

+0

यह माना जाता है कि कैसे 'नोडलिस्ट' सरणी की तरह काम करता है लेकिन नहीं है। – BoltClock

+0

क्या ऐरे-ऑब्जेक्ट्स? आप कैसे जानते हैं कि यह एक सरणी लॉग करता है, न कि ऑब्जेक्ट? –

उत्तर

5

यह एक नया फ़ंक्शन बनाने और इसे अपने प्रोटोटाइप के रूप में एक नई सरणी के रूप में सरल करने जैसा आसान है।

function ArrayLike() {} 
ArrayLike.prototype = []; 
उदाहरण के लिए

तो:

function ArrayLike() {} 
ArrayLike.prototype = []; 
ArrayLike.prototype.fromArray = function(arr) { 
    for(var i = 0; i < arr.length; i++) 
     this.push(arr[i]); 
}; 
ArrayLike.prototype.foo = function() { 
    console.log("foo", this); 
}; 

var a = new ArrayLike(); 
a.fromArray([1, 2]); 
console.log(a); 
a.foo(); 

http://jsfiddle.net/Xeon06/fUgaf/

+0

यह उल्लेखनीय रूप से चिकना है। मैं इसके न्यूनतम संस्करण के बारे में एक प्रश्न पूछने जा रहा हूं। धन्यवाद। – Manngo

13

jQuery जो बनाता है (ईएस मानक में) सरणी जैसी वस्तुओं को बनाता है। विशेष रूप से, उनके पास एक लंबी संपत्ति होती है, और यह भी (जो लंबाई संपत्ति का उपयोग करती है) उनके पास पूर्णांक-आधारित सूचकांक के तहत प्रासंगिक आइटम होते हैं।

:

var arrayLike = {length: 3, 0:'first', 1:'second', 2:'third'}; 
Array.prototype.join.call(arrayLike, '|'); // "first|second|third" 

आप the standard (15.4.4) पर एक नज़र डालें, तो विशेष रूप से Array.prototype तरीकों आप निम्नलिखित टिप्पणी प्रत्येक और हर एक के अंतर्गत दिखाई देंगे:

यह रूप में सरल है

नोट * कार्य जानबूझकर सामान्य है; इसे की आवश्यकता नहीं है, यह मान एक ऐरे ऑब्जेक्ट है। इसलिए इसे विधि के रूप में उपयोग के लिए अन्य प्रकार की वस्तुओं में स्थानांतरित किया जा सकता है। चाहे * कार्य किसी मेजबान ऑब्जेक्ट को सफलतापूर्वक लागू किया जा सकता है कार्यान्वयन-निर्भर है।

आप इन एल्गोरिदम के विवरण को देखें, तो वे काफी सिर्फ लंबाई संपत्ति वस्तु पर पुनरावृति करने के लिए (हमारे मामले एक सरणी की तरह वस्तु में) का उपयोग करें और उन पूर्णांक आधारित पीछे मानों तक पहुंच चांबियाँ। इसी कारण से वे सामान्य हैं और प्रासंगिक गुणों के साथ नियमित जेएस वस्तुओं पर काम करते हैं।

अनिवार्य रूप से यह सभी jQuery करता है (अगर मुझे सही ढंग से याद है कि इमारत झींगा, jquery के सीएसएस चयनकर्ता इंजन में किया जाता है)। आप इसका परीक्षण कर सकते हैं/इसे विभिन्न तरीकों से साबित कर सकते हैं। उदाहरण के लिए, एक मानक js सरणी कुछ जादू जब लंबाई संपत्ति छोटा है करता है, लेकिन jQuery वस्तु नहीं करता है:

var arr = [1,2,3], $arr = $('div'); // assuming three divs 
arr.length=2; arr[2]; // undefined 
$arr.length=2; $arr[2]; // still references the div 

http://jsfiddle.net/cnkB9/

तो jQuery के makeArray jQuery सरणी जैसी वस्तु बदल देता है, और बनाता है यह एक वास्तविक देशी जेएस सरणी में है, लेकिन जैसा कि आपने कहा था, तो इसमें संलग्न सभी jquery विधियां नहीं हैं। What makes Firebug/Chrome console treat a custom object as an array? बताते हैं कि कि length संपत्ति की उपस्थिति और splice समारोह उस में सबसे शान्ति एक सरणी की तरह प्रकट करने के लिए अनुमति देते हैं:

कारण है कि यह सांत्वना में दिखाई देता है का सवाल है, मैं इस उत्कृष्ट जवाब को देखें। जैसा कि बताया गया है, यह एफएफ 4 के वेब कंसोल में मामला नहीं है, जो आपको दिखाता है कि यह मूल जेएस सरणी नहीं है। दिलचस्प बात यह है कि splice फ़ंक्शन को वास्तव में काम नहीं करना है, बस उपस्थित रहें, और एक फ़ंक्शन बनें।उदाहरण के लिए:

>> console.log({length:2,0:'some',1:'thing',splice:new Function}); 
["some", "thing"] 
5

कैसे एक सरणी एक देशी JavaScript श्रृंखला के साथ आपरेशन में एक jQuery चयनकर्ता द्वारा वापस बदलने के लिए की निम्नलिखित सरल कोड:

var $arr = $('option'); // assuming three options 
var arr = Array.apply(null, $arr); 
// arr contains [option, option] 

उपरोक्त कोड के लिए निम्नलिखित HTML को ध्यान में रखते हुए:

<html> 
    <head> 
     <script type="text/javascript" src="jquery-1.5.2.min.js"></script> 
    </head> 
    <body> 
     <select id="addSelection"> 
      <option value="Original Value">Original Value</option> 
      <option value="Two Value">Value two</option> 
      <option value="Three Value">Value three</option> 
     </select> 

     <br /> 

     <input id="btn" type="button" value="Changes" /> 
    </body> 
</hmtl> 
संबंधित मुद्दे