ホームページ > 記事 > ウェブフロントエンド > jQueryのプロトタイププロパティとプロトタイプメソッドの詳しい解説_jquery

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

WBOYオリジナル: 2016-05-16 15:51:071731ブラウズ

まず、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.

が返されます。

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript スクリプトを使用してスクロール効果を実現する方法次の記事：JavaScript スクリプトを使用してスクロール効果を実現する方法

続きを見る

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

関連記事