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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
JS编程小常识很有用
Nov 26 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
javascript实现左右缓动动画函数
Nov 25 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
详解angular element()方法使用
2017/04/08 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
layui实现三级联动效果
2019/07/26 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
在Django的上下文中设置变量的方法
2015/07/20 Python
python selenium循环登陆网站的实现
2019/11/04 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
Python字符串及文本模式方法详解
2020/09/10 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
Python是如何进行类型转换的
2013/06/09 面试题
教师专业理论水平的自我评价分享
2013/11/09 职场文书
仓管岗位职责范本
2014/02/08 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
商场父亲节活动方案
2014/08/27 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书