jQuery原型属性constructor,selector,length,jquery和原型方法size,get,toArray源码分析
首先看一下在jQuery1.7.1中定义的原型属性和方法有哪些？
init方法作为实际的构造函数已经详细分析过了，需要了解可以参考http://www.cnblogs.com/yy-hh/p/4492887.html 除此方法之外还有扩展方法extend也已经分析过了有兴趣可以看下http://www.cnblogs.com/yy-hh/p/4546301.html
首先是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); //
这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.
jQuery原型属性constructor,selector,length,jquery和原型方法size,get,toArray源码分析的更多相关文章
- jQuery使用（）：Callbacks回调函数列表之异步编程(含源码分析)
Callbacks的基本功能回调函数缓存与调用 特定需求模式的Callbacks Callbacks的模拟源码 一.Callbacks的基本功能回调函数缓存与调用 Callbacks即回调函数集合,在 ...
- jQuery使用（）：Deferred有状态的回调列表（含源码）
deferred的功能及其使用 deferred的实现原理及模拟源码 一.deferred的功能及其使用 deferred的底层是基于callbacks实现的,建议再熟悉callbacks的内部机制前 ...
- jQuery原型方法first,last,eq,slice源码分析
这4个方法中前3个方法很常用大家都见过,但是slice方法可能会以为是数组方法,其实slice也是jQuery的一个原型方法,只不过是底层方法是为其他方法服务的(更具体点是为eq方法服务的),首先还是 ...
- jQuery原型方法.pushStack源码分析
这次分析的方法跟前面不同,虽然pushStack也是原型方法之一,但是我们几乎从不用在页面调用,在参考手册里面也没有这个方法的使用说明,但是这个方法还是非常重要的,在使用很多jQuery的其他方式都会 ...
- jQuery 源码分析(十三) 数据操作模块 DOM属性 详解
jQuery的属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性) DO ...
- jQuery 2.0.3 源码分析core - 整体架构
拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery ...
- jQuery.extend()方法和jQuery.fn.extend()方法源码分析
这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: <!doctype html> ...
- jQuery源码分析系列 : 整体架构
query这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! ...
- jQuery-1.9.1源码分析系列（二）jQuery选择器
1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...
随机推荐
- 《BI那点儿事》Microsoft 线性回归算法
Microsoft 线性回归算法是 Microsoft 决策树算法的一种变体,有助于计算依赖变量和独立变量之间的线性关系,然后使用该关系进行预测.该关系采用的表示形式是最能代表数据序列的线的公式.例如 ...
- WebStorm 9 自动编译 LESS 产出 CSS 和 source maps
1.双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选“Enable JavaScript source maps” 及“Enable ...
- Testing - 测试基础 - 方法
选择和使用测试方法和工具 按照测试需求用途(或测试技巧)选择 在软件开发生命周期和软件测试流程中适当地选择 按照测试人员实际技能选择 选择可提供的和可执行的 测试方法 类别及技巧 目标 使用方法 举例 ...
- Swift泛型Protocol对比C#泛型Interface
本篇纯属抬杠之作,之前我们提到了Swift的泛型Protocol使用associatedtype关键字,而不是使用<Type>语法的泛型参数.这其中有什么好处呢? 我就这个问题搜索了一些回 ...
- php的<?php ?>标签匹配
在公司实习了没有多久就开始和同事发现了一个问题,就是之前的人写过的项目经常莫名其妙的出错,仔细的看项目的源代码的时候发现项目中并没有逻辑上的错误,而且各种关系以及数据都没有问题,这是为什么呢.再次认真 ...
- [Core] .NET Core & VS Code 之路(1) Hello World
目录 相关链接 dotnet命令 VS Code Hello World Web Hello World 总结 其实本篇上个月已经写好, 只是 但是,不忘初心方得始终 相关链接 Learn .NET ...
- Hichart 资料收集
Hichart简单使用Highcharts选项配置详细说明文档(zz) http://www.helloweba.com/view-blog-156.html by 澳米科技 Highcharts提 ...
- windbg学习进阶之——windbg环境变量配置
接触性能调优以来一直想学下windbg分析dump,每次看老师几个命令就能找到很底层的问题原因那简直就是羡慕加崇拜啊~但是这接近一年了,愣是没啥进展呢,主要就是在今天整理的这部分卡住了...这理由找的 ...
- 别误用IsDigit与IsNumber函数(转)
1.起因 最近发现程序中有一段控制TextBox数字输入的代码,相信大家都不会太陌生,如下: void int_KeyPress(object sender, KeyPressEventArgs e) ...
- pymssql examples
http://pymssql.org/en/latest/pymssql_examples.html Example scripts using pymssql module. Basic featu ...