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 tips提示效果
Apr 03 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
Require.js的基本用法详解
Jul 03 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 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导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
Vue之Watcher源码解析(1)
2017/07/19 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
python程序封装为win32服务的方法
2021/03/07 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
行政助理的职责
2013/11/14 职场文书
优秀教师工作感言
2014/02/16 职场文书
培训班主持词
2014/03/28 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
先进基层党组织材料
2014/12/25 职场文书
工作能力自我评价2015
2015/03/05 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android