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字符串判断方法整理
Oct 18 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
jquery实现轮播图效果
Feb 13 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 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
DOMXML函数笔记
2006/10/09 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
php 的反射详解及示例代码
2016/08/25 PHP
JavaScript 基础问答三
2008/12/03 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
利用js编写网页进度条效果
2017/10/08 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
Python3 处理JSON的实例详解
2017/10/29 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
如何使用python传入不确定个数参数
2020/02/18 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
介绍一下常见的木马种类
2014/11/15 面试题
学生自我鉴定格式及范文
2014/09/16 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
MySQL里面的子查询的基本使用
2021/08/02 MySQL