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.
最新文章
- 3.羽翼sqlmap学习笔记之Cookie注入
- 虚拟机下运行linux通过nat模式与主机通信、与外网连接
- Unity资源Assetmport New Asset对话框
- COJ983 WZJ的数据结构(负十七)
- re模块使用
- linux第10天 msg消息队列
- hihoCoder hiho一下 第四十八周 题目1 : 拓扑排序&#183;二
- 一步步实现Promise
- jsp <;%! %>; 与 <;% %>; 区别
- css基本框架
- OC动态创建的问题变量数组.有数组,在阵列13要素,第一个数据包阵列,每3元素为一组,分成若干组,这些数据包的统一管理。最后,一个数组.(要动态地创建一个数组).两种方法
- C++ RCSP智能指针简单实现与应用
- react-native-echarts在打包时出现的坑
- Linux之使用mount挂载ISO镜像
- 关于chrome密码保存框的神坑,这样子解决就行
- python opencv SIFT,获取特征点的坐标位置
- LSM
- Javascript中的对象(八)
- iOS - 抖音效果
- 菜鸟学Java(七)——Ajax+Servlet实现无刷新下拉联动
热门文章
- OFA &; OMF
- backbone库学习-Collection
- [java] 汇率换算器实现(3)
- 实例演示Android异步加载图片
- Microsoft Azure News(3) Azure新的基本实例上线 (Basic Virtual Machine)
- Java魔法堂:解读基于Type Erasure的泛型
- JS魔法堂:mmDeferred源码剖析
- C#中简单的继承和多态
- JAVA - IDEA快捷键(精简版)
- [Asp.net 5] Localization-简单易用的本地化-全球化信息