zoukankan      html  css  js  c++  java
  • jQuery原型属性constructor,selector,length,jquery和原型方法size,get,toArray源码分析

    首先看一下在jQuery1.7.1中定义的原型属性和方法有哪些?

           

    init方法作为实际的构造函数已经详细分析过了,需要了解可以参考http://www.cnblogs.com/yy-hh/p/4492887.html  除此方法之外还有扩展方法extend也已经分析过了有兴趣可以看下http://www.cnblogs.com/yy-hh/p/4546301.html

    首先是constructor属性  

    相信熟悉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对象的选择器字符串,例如:

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

    jquery属性

    该属性返回当前使用的jQuery版本

    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.

  • 相关阅读:
    JDBC的PreparedStatement是什么?
    ArrayList、LinkedList、Vector 的区别。
    final finally finalize区别
    面向对象三大特性
    JDBC访问数据库的基本步骤是什么?
    报表中的地图怎么做?
    报表工具如何实现“点击查看原图”
    玩转报表排名之组内排名
    动态隐藏行
    OUT 了??还没玩转报表超链接
  • 原文地址:https://www.cnblogs.com/yy-hh/p/4613961.html
Copyright © 2011-2022 走看看