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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
JavaScript的一些小技巧分享
Jan 06 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
十大“创意”战术!
2020/03/04 星际争霸
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
详解PHP中的PDO类
2015/07/06 PHP
yii用户注册表单验证实例
2015/12/26 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
python 爬取小说并下载的示例
2020/12/07 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
数学专业毕业生自荐信
2013/11/10 职场文书
汽修专业学生自我鉴定
2013/11/16 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
新闻记者个人求职的自我评价
2013/11/28 职场文书
设计大赛策划方案
2014/06/13 职场文书
西游降魔篇观后感
2015/06/15 职场文书
“5.12”护士节主持词
2015/07/04 职场文书