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动态加载当前时间的方法
Feb 09 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
vue自定义指令和动态路由实现权限控制
Aug 28 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
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
python list中append()与extend()用法分享
2013/03/24 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
超简单的Python HTTP服务
2019/07/22 Python
python 追踪except信息方式
2020/04/25 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
Overload和Override的区别
2012/09/02 面试题
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
在校学生职业规划范文
2014/01/08 职场文书
公司活动总结范文
2014/07/01 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
寒假生活随笔
2015/08/15 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
Nginx HTTP跳转至HTTPS
2022/05/15 Servers
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js