jQuery构造函数简单介绍

快乐打工仔 分类:实例代码

在使用jQuery获取元素对象的时候,我们通常是用以下方式:

$("li")

上面的由于过于普通,可能很少人对它感觉特别奇怪。

不过上面的方法获取的也是一个实例对象,好像我们并没有用到new运算符来创建。

关于构造函数和new的作用可以参阅以下两个文章:

(1).构造函数可以参阅javascript构造函数一章节。

(2).new运算符可以参阅js new运算符的作用一章节。

其实jQuery是通过一个比较巧妙的方式来实现了构造函数的功能。

先看一段代码实例:

var Antzone=function(name,age){
  this.name=name;
  this.age=age;
}
Antzone.prototype={
 constructor:Antzone,
 init:function(msg){
  this.say(msg);
 },
 say:function(msg){
   console.log(this.name+msg);
 }
};
var antzone=new Antzone('犀牛前端部落',3); 
antzone.init('欢迎您');

其实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.fn.init()才是真正的构造函数,这样我们创建对象实例的时候就没必要new jQuery()。

看一下jQuery.fn的源码:

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

说明此函数是jQuery的原型对象,也就是说原型对象中有int()这么一个方法,利用它实现了实例化功能。

这里我们又有一个疑问,那就是既然init()才是构造函数,那么我们为jQuery添加的实例方法,会不会无法调用。

jQuery的解决方式如下:

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

把jQuery的圆形对象赋值给int()原型对象,那么int()也就具有jQuery的原型的所有方法。

jQuery构造函数简单介绍

回复

我来回复
  • 暂无回复内容