jQuery原型属性和原型方法详解


Posted in Javascript onJuly 07, 2015

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

jQuery原型属性和原型方法详解

jQuery原型属性和原型方法详解

首先是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.

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
jQuery Selector选择器小结
May 06 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 Javascript
在JavaScript中访问字符串的子串
Jul 07 #Javascript
jQuery.each使用详解
Jul 07 #Javascript
JavaScript中字符串拼接的基本方法
Jul 07 #Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 #Javascript
浅谈JavaScript中运算符的优先级
Jul 07 #Javascript
浏览器中url存储的JavaScript实现
Jul 07 #Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 #Javascript
You might like
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
php使用正则验证中文
2016/04/06 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python KMeans聚类问题分析
2018/02/23 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
项目考察欢迎辞
2014/01/17 职场文书
家长对孩子评语
2014/01/30 职场文书
索桥的故事教学反思
2014/02/06 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
民事起诉状范文
2015/05/19 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书