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延时重复执行函数 lLoopRun.js
Jun 29 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
Vue中props的使用详解
Jun 15 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
JQuery animate动画应用示例
May 14 jQuery
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
React路由管理之React Router总结
2018/05/10 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python 类的特殊成员解析
2018/06/20 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python增加图像对比度的方法
2019/07/12 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
光声世纪笔试题目
2012/08/25 面试题
与UNIX有关的几个名词
2015/09/17 面试题
新任教师自我鉴定
2014/02/24 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
青年志愿者活动总结
2014/04/26 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
门店店长岗位职责
2015/04/14 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
教师外出学习心得体会
2016/01/18 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
如何理解及使用Python闭包
2021/06/01 Python
Pygame Time时间控制的具体使用详解
2021/11/17 Python
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技