jQueryのプロトタイププロパティとプロトタイプメソッドの詳しい解説

jQueryのプロトタイププロパティとプロトタイプメソッドの詳しい解説_jquery

WBOY

リリース： 2016-05-16 15:51:07

オリジナル

1769 人が閲覧しました

まず、jQuery 1.7.1 で定義されているプロトタイプのプロパティとメソッドを見てみましょう。

最初はコンストラクター属性です

js のオブジェクト指向の部分に精通している開発者は、オブジェクト属性の作成を返すために使用される関数に精通していると思います。

簡単な例を示します。

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

ログイン後にコピー

継承を記述するときは、すべてのプロトタイプのプロパティとメソッドを別のオブジェクトリテラルに配置することを好みます。これにより、コンストラクター属性が「実際の」ポインターと不一致になります。例:

  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:jQueryの説明

セレクター属性

selector 属性は、jquey を js ライブラリとして使用する場合には役に立ちません。主に、jquery に基づくプラグインや変更を開発するために使用されます。この属性は、次のような現在の jquery オブジェクトを取得するためのセレクター文字列を返します。 🎜>

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

ログイン後にコピー

jquery 属性

このプロパティは、現在使用されている jQuery のバージョンを返します

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

ログイン後にコピー

長さ属性

この属性は、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,

ログイン後にコピー

サイズメソッド

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

ログイン後にコピー

このメソッドは jquery オブジェクトの長さ属性を返します。不要な関数呼び出しのオーバーヘッドを削減できる長さ属性を使用することをお勧めします。

toArray メソッド

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

ログイン後にコピー

jQuery コレクション内のすべての DOM 要素を配列に復元します。

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

ログイン後にコピー

まず、ここでのスライスメソッドは、Array のプロトタイプメソッドである jQuery のコンストラクターに保持されています

// 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 を渡すと、このメソッドは純粋な配列であるクリーンな配列を返すため、他のオブジェクトに遭遇したときに 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 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 &#63;

      // Return a 'clean' array
      this.toArray() :

      // Return just the object
      ( num < 0 &#63; this[ this.length + num ] : this[ num ] );
  },

ログイン後にコピー

このメソッドは、jquery オブジェクト内の要素の 1 つを検索し、jquery オブジェクトの代わりに元のノード要素オブジェクトを返すことによって機能します。これは、パラメーターが存在しない場合にパラメーターを受け入れる eq メソッドとは異なります。次に、toArray メソッドを呼び出して、すべての要素を含む配列を返します。数値が 0 より大きい場合は、それを長さに加算することで取得できます。メソッドでは、正と負の添え字をサポートする必要があります。良いアプローチです。書き込まれた内容が数値ではない場合、または現在のオブジェクトに含まれる要素の長さを超える場合は、unknown.

が返されます。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。