浅谈jQuery构造函数分析

在我的上一篇文章里面 阐述了jQuery的大致框架，知道了所有代码都是写在了一个自调用匿名函数里面，并且传入了window对象，源码是这样的：

(function( window, undefined ) {...})( window );

我们通过alert(jquery) 知道它是一个对象，那么这个对象是怎么构造出来的呢？我们使用$(document)类似的写法获取元素，就好像直接调用了普通的方法一样，jQuery就是普通的函数吗？如果是构造函数为什么不是 new $(document)的常见形式呢？

其实jQuery是面向对象js库，也有构造函数，每次调用jQuery方法是就会实例化一个jQeury对象，但是jQuery的写法却非常高明。

首先先谈谈js面向对象：  js虽然不是面向对象的语言，却又很多面向对象的写法，这里推荐大家看一下图灵的《javascript高级程序设计》中的面向对象的程序设计部分。在众多方法中比较常使用的写法是构造加原型方式，下面举例：

var Person=function(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype={
 constructor:Person,
 init:function(msg){
  this.say(msg);
 },
 say:function(msg){
 alert(this.name+'说'+msg);
 }
};
var tom=new Person('tom',23);
tom.init('你好');// tom说你好

其实jQuery也是采用的这种方式只不过用了更聪明的写法，一起再看看jQuery的构造函数有什么不同

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},

从源码中可以看到在jQuery真正的函数是init方法，当我们调用jQuery时会返回new init()的结果而不直接new jQuery() .

jQuery.fn是啥呢，在后面我们会看到这样一句代码

jQuery.fn = jQuery.prototype = {...

这样就很好理解了，其实jQuery.fn就是原型对象也就是说在jQuery原型里面有一个init方法，这个方法是真正的构造函数。这样写的好处就是不需要在写$().init()这样的操作，直接就初始化了，但是还有一个问题就是既然init才是构造函数那我们写在jQuery上面的那么方法实例不是不能调用吗?init的实例化自然只能调用init的方法啦，往后看到这样一句代码

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

之前讲过jQuery.fn=jQuery.protype,这就意味着jQuery的原型对象赋给了init的原型，这样jQuery的原型方法自然init也就都有了，通过这样构造方式S使得使用jQuery方法非常简单既不需要new jQuery()的操作也不需要手动初始化就行调用普通函数一样简单。

赞 (0)

相关推荐

  • jQuery入门 构造函数

    jQuery入门 构造函数

    JQuery优点 ◦体积小(v1.2.3 15kb) ◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器(IE6,FF,Safari,Opera) ◦链式代码 ◦强大的事件.样式支持 ◦强大的AJAX功能 ◦易于扩展,插件丰富 jQuery的构造函数接收四种类型的参数: jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式(ID,DOM元素名,CSS表达式,XPath表达式)找出文档

  • jQuery.prototype.init选择器构造函数源码思路分析

    一.源码思路分析总结 概要: jQuery的核心思想可以简单概括为"查询和操作dom",今天主要是分析一下jQuery.prototype.init选择器构造函数,处理选择器函数中的参数: 这个函数的参数就是jQuery()===$()执行函数中的参数,可以先看我之前写的浅析jQuery基础框架一文,了解基础框架后,再看此文. 思路分析: 以下是几种jQuery的使用情况(用于查询dom),每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象),该对象包含查询

  • jQuery构造函数init参数分析

    在我的上一篇随笔里面分析了jQuery的构造函数,jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用jQuery的原型方法,就好像是jQuery的实例一样.下面就来看看init这个幕后的构造函数是怎么写的: init: function( selector, context, rootjQuery ) { ... } 可以看到这个方法接受3个参数,其前两个参数是jQuery方法传递过来的 var

  • jQuery构造函数init参数分析续

    如果selector是其他字符串情况就比较多了比较复杂了 // Handle HTML strings if ( typeof selector === "string" ) {...} 开始分不同的情况处理 // Are we dealing with HTML string or an ID? if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 )

  • jquery 构造函数在表单提交过程中修改数据

    先贴代码 <script type="text/javascript"> function appendText(){ var content = $("#textarea").val(); var new_content = content + "wap"; $("#textarea").attr("value",new_content); }; </script> 然后再在 fo

  • 浅谈jQuery构造函数分析

    在我的上一篇文章里面 阐述了jQuery的大致框架,知道了所有代码都是写在了一个自调用匿名函数里面,并且传入了window对象,源码是这样的: (function( window, undefined ) {...})( window ); 我们通过alert(jquery) 知道它是一个对象,那么这个对象是怎么构造出来的呢?我们使用$(document)类似的写法获取元素,就好像直接调用了普通的方法一样,jQuery就是普通的函数吗?如果是构造函数为什么不是 new $(document)的常

  • 浅谈jquery中的each方法$.each、this.each、$.fn.each

    jquery.each 方法 方法一 $("img").each(function(i,elem){ // i 下标 从零开始, // elem == this // $(elem).toggleClass("example"); $(this).toggleClass("example"); }); 方法二 $.each([1,2,3,4],function(){ //$(this)==数组中的每一个数组(如果数组是对象,就是对象) }); 方

  • 浅谈jQuery before和insertBefore的区别

    jQuery 中利用before和insertBefore可以达到在指定元素前插入指定内容,写法上有区别 先看一个例子: 在<div class='div1'>div1</div>前面插入<div>toInsertContent</div> 实现: $('<div>toInsertContent</div>').insertBefore($('.div1')); 或者 $('.div1').before('<div>toI

  • 浅谈jQuery中的$.extend方法来扩展JSON对象

    $.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 结果 set

  • 浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用

    • 依赖的脚本文件 <script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="../Javascript/jquery.form.js" type="text/javascript"></script> • ajaxSubmit 和ajaxForm区

  • 浅谈jQuery hover(over, out)事件函数

    hover(over, out)事件函数 当鼠标移动一个匹配的元素上面,会触发指定的第一个函数 当鼠标移出这个元素时,会触发指定的第二个函数 over(function):鼠标移到元素上触发的函数 out(function):鼠标移出元素触发的函数 <nav class="main-nav"> <a href="/"><span>首页</span></a> <a href="/about&q

  • 浅谈jQuery animate easing的具体使用方法(推荐)

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: •properties:一组包含作为动画属性和终值的样式属性和及其值的集合 •duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

  • 浅谈c++构造函数问题,初始化和赋值问题

    默认构造函数(就是没有参数的构造函数) The Default Constructor The default constructor is the constructor used to create an object when you don't provide explicit initialization values. That is, it's the constructor used for declarations like this: Stock stock1;  // us

  • 浅谈jQuery中事情的动态绑定

    在jQuery的开发过程中,我们往往需要处理各种事件,例如click(),hover()等.在jQuery的API中,我们可以使用不同的方法来将这些事件绑定到特定的元素中.今天这篇文章中,我们将要介绍如何使用bind(),on(),live()和delegate()方法来绑定特定的事件,什么情况下使用,什么情况下不适用它们.希望能够帮助大家更好的了解和使用jQuery的时间处理方法. 一.bind()方法 使用较早版本jQuery的教程或者应用中,我们往往使用bind()方法来将事件绑定到特定的

  • 浅谈js构造函数的方法与原型prototype

    把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法. •函数内的方法: 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们通过构造函数new出来的对象需要我们操作构造函数内部的私有变量的话, 我们这个时候就要考虑使用函数内的方法. •prototype上的方法: 当我们需要通过一个函数创建大量的对象,并且这些对象还都有许多的方法的时候;这时我们就要考虑在函数的prototype上添加这些方法. 这种情况下我们代码的

随机推荐