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 相关文章推荐
js脚本学习 比较实用的基础
Sep 07 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
简单的js表格操作
Sep 24 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
专升本自我鉴定
2013/10/10 职场文书
管理科学大学生求职信
2013/11/13 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
投标授权委托书范文
2014/08/02 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
义卖募捐活动总结
2015/05/09 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书