快捷導(dǎo)航

jQuery原型屬性和原型方法詳解

更新時(shí)間：2015年07月07日 10:04:57 投稿：hebedich

這邊文章主要給大家介紹了jQuery原型屬性constructor,selector,length,jquery和原型方法size,get,toArray，十分的詳細(xì)，有需要的小伙伴可以參考下。

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

首先是constructor屬性

相信熟悉js面向?qū)ο蟛糠值拈_(kāi)發(fā)人員都熟悉，就是用來(lái)返回對(duì)象屬性創(chuàng)建的函數(shù)，舉個(gè)簡(jiǎn)單的例子：

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

我們寫(xiě)繼承的時(shí)候喜歡把所有的原型屬性和方法放在一個(gè)單獨(dú)的對(duì)象字面量中，這樣就會(huì)導(dǎo)致constructor屬性與“實(shí)際”指向不符合例如：

  function Person(){

    }

    Person.prototype={
      say:function(msg){
        alert(msg); 
      }
    }

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

這個(gè)時(shí)候的指向就會(huì)變化因?yàn)樽置媪繉?duì)象是Object的一個(gè)實(shí)例自然constructor屬性就會(huì)執(zhí)行Object為了糾正這個(gè)“錯(cuò)誤”通常需要手動(dòng)修改回來(lái)這就是源碼，源碼中constructor:jQuery的解釋

selector屬性

selector屬性對(duì)于使用jquey作為js庫(kù)來(lái)說(shuō)沒(méi)有用處它主要是用于開(kāi)發(fā)基于jquery的插件或者改造使用，該屬性會(huì)返回獲取當(dāng)前的jquery對(duì)象的選擇器字符串，例如：

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

jquery屬性

該屬性返回當(dāng)前使用的jQuery版本

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

length屬性

該屬性返回jquery對(duì)象包含的元素個(gè)數(shù)例如：

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

這4個(gè)屬性源碼如下：

  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對(duì)象的length屬性?xún)烧叨酝扑]使用length屬性，可以減少不必要的函數(shù)調(diào)用開(kāi)銷(xiāo)

toArray方法

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

把jQuery集合中所有DOM元素恢復(fù)成一個(gè)數(shù)組。

alert($('li').toArray());
[<li id="foo">, <li id="bar">]

首先這里的slice方法在jQuery的構(gòu)造函數(shù)里面已經(jīng)被保留下來(lái)，就是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,

通過(guò)call方法實(shí)現(xiàn)對(duì)象冒充，傳入?yún)?shù)0表示不進(jìn)行截取，由于此方法會(huì)返回一個(gè) clean array 也就是純數(shù)組這樣就實(shí)現(xiàn)了從jquery對(duì)象到純數(shù)組的轉(zhuǎn)變，在以后遇到其他類(lèi)數(shù)組形式時(shí)也可以采用此方法進(jìn)行轉(zhuǎn)換例如：

<!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>

所以學(xué)習(xí)jqeury源碼除了對(duì)使用jquery有幫助之外還能學(xué)到很多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對(duì)象的元素?cái)?shù)組中找到其中的某一個(gè)并且返回js原聲node元素對(duì)象而不是jquery對(duì)象，這是跟eq方法不同的地方，此方法接受一個(gè)參數(shù)如果參數(shù)不存則調(diào)用toArray方法返回包涵所有元素的數(shù)組，如果是大于0的數(shù)直接通過(guò)下下標(biāo)的方式獲取即可如果是負(fù)數(shù)則通過(guò)與長(zhǎng)度相加獲得我們寫(xiě)某些方法需要支持正負(fù)數(shù)下標(biāo)的一個(gè)很好的方法。如果寫(xiě)的不是數(shù)字，或者超過(guò)當(dāng)前對(duì)象所包含的元素長(zhǎng)度會(huì)返回undefined.

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: