jQuery原型屬性constructor,selector,length,jquery和原型方法size,get,toArray源碼分析

時間 2019-11-12

標籤 jquery 原型屬性 constructor selector length 方法 size toarray 源碼分析欄目 JQuery 简体版

原文原文鏈接

首先看一下在jQuery1.7.1中定義的原型屬性和方法有哪些？html

init方法做爲實際的構造函數已經詳細分析過了，須要瞭解能夠參考http://www.cnblogs.com/yy-hh/p/4492887.html 除此方法以外還有擴展方法extend也已經分析過了有興趣能夠看下http://www.cnblogs.com/yy-hh/p/4546301.htmlnode

首先是constructor屬性 jquery

相信熟悉js面向對象部分的開發人員都熟悉，就是用來返回對象屬性建立的函數，舉個簡單的例子：數組

function Person(){}; var person=new Person(); alert(person.constructor); //function Person(){}

咱們寫繼承的時候喜歡把全部的原型屬性和方法放在一個單獨的對象字面量中，這樣就會致使constructor屬性與「實際」指向不符合例如：函數

   function Person(){ } Person.prototype={ say:function(msg){ alert(msg); } } var person=new Person(); person.say('hello'); alert(person.constructor); //function Object(){[native code]}

這個時候的指向就會變化由於字面量對象是Object的一個實例天然constructor屬性就會執行Object爲了糾正這個「錯誤」一般須要手動修改回來這就是源碼，源碼中constructor:jQuery的解釋源碼分析

selector屬性學習

selector屬性對於使用jquey做爲js庫來講沒有用處它主要是用於開發基於jquery的插件或者改造使用，該屬性會返回獲取當前的jquery對象的選擇器字符串，例如：this

var obj=$('div a'); console.log(obj.selector);//'div a'

jquery屬性spa

該屬性返回當前使用的jQuery版本prototype

console.log($('body').jquery);  //1.7.1

length屬性

該屬性返回jquery對象包含的元素個數例如：

console.log ( $('body') .length);  //1

這4個屬性源碼以下：

 constructor: jQuery, // Start with an empty selector
    selector: "", // The current version of jQuery being used
    jquery: "1.7.1", // The default length of a jQuery object is 0
    length: 0,

size方法

// The number of elements contained in the matched element set
    size: function() { return this.length; },

該方法就是返回jquery對象的length屬性二者而言推薦使用length屬性，能夠減小沒必要要的函數調用開銷

toArray方法

toArray: function() { return slice.call( this, 0 ); },

把jQuery集合中全部DOM元素恢復成一個數組。

alert($('li').toArray());

[<li id="foo">, <li id="bar">]

首先這裏的slice方法在jQuery的構造函數裏面已經被保留下來，就是Array的原型方法

// Save a reference to some core methods
87 toString = Object.prototype.toString, 88 hasOwn = Object.prototype.hasOwnProperty, 89 push = Array.prototype.push, 90 slice = Array.prototype.slice, 91 trim = String.prototype.trim, 92 indexOf = Array.prototype.indexOf,

經過call方法實現對象冒充，傳入參數0表示不進行截取，因爲此方法會返回一個 clean array 也就是純數組這樣就實現了從jquery對象到純數組的轉變，在之後遇到其餘類數組形式時也能夠採用此方法進行轉換例如：

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>jQuery源碼分析-原型屬性和方法</title>
    </head>
    <body>
       <div>
       </div>
       <div></div>     
    </body>
    <script src='jquery-1.7.1.js'></script>
    <script>
    var divs=document.getElementsByTagName('div'); console.log(divs); //[div, div]
    alert(divs instanceof Array);  //fasle
 alert(Array.prototype.slice.call(divs,0) instanceof Array); //true
    </script>
</html>

因此學習jqeury源碼除了對使用jquery有幫助以外還能學到不少js的使用技巧

get方法

// Get the Nth element in the matched element set OR
// Get the whole matched element set as a clean array
    get: function( num ) { return num == null ?

            // Return a 'clean' array
            this.toArray() : // Return just the object
            ( num < 0 ? this[ this.length + num ] : this[ num ] ); },

此方法的做品是從jquery對象的元素數組中找到其中的某一個而且返回js原聲node元素對象而不是jquery對象，這是跟eq方法不一樣的地方，此方法接受一個參數若是參數不存則調用toArray方法返回包涵全部元素的數組，若是是大於0的數直接經過下下標的方式獲取便可若是是負數則經過與長度相加得到咱們寫某些方法須要支持正負數下標的一個很好的方法。若是寫的不是數字，或者超過當前對象所包含的元素長度會返回undefined.