jquery 源码初探,一步步实现自己的jquery(二)

16 篇文章 0 订阅
15 篇文章 0 订阅
一般的情况下,假如你创建一个js类的实例,需要这样调用构造函数,比如
    
(function(){
TestClass=function (param1,param2){
this.result='start';
this.attr1=param1;
this.attr2=param2;
}
TestClass.fn=TestClass.prototype={
add:function(){
this.result=parseInt(this.attr1)+parseInt(this.attr2);
alert(this.result);
},
equals:function(){
if(this.attr1==this.attr2){
this.result=true;
}else{
this.result=false;
}
alert(this.result);
}
}
})()
var test=new TestClass(1,2);
test.add();
test.equals();
//TestClass(1,2).add();

此时你不能像jquery一样用jQuery("x").add()或者$("").add(),那么这个是怎么办到的呢很简单,改版如下:

(function(){
TestClass=function (param1,param2){
return new TestClass.fn.init(param1,param2);
}
TestClass.fn=TestClass.prototype={
add:function(){
this.result=parseInt(this.attr1)+parseInt(this.attr2);
alert(this.result);
},
equals:function(){
if(this.attr1==this.attr2){
this.result=true;
}else{
this.result=false;
}

alert(this.result);
},
init:function(param1,param2){
this.result='start';
this.attr1=param1;
this.attr2=param2;
return this;
}
}
TestClass.fn.init.prototype=TestClass.fn;
})()
TestClass(1,5).equals();



改动很简单:
[list]
[*] 1,构造函数变成return new TestClass.fn.init(param1,param2);
[*] 2,在TestClass.fn里面加init方法,完成初始化
[*] 3,加上TestClass.fn.init.prototype=TestClass.fn;这句话,表示让init方法的prototype指向TestClass的prototype,这样构造函数返回的对象就具有了TestClass.prototype里面定义的方法。
[/list]
此时,你就可以直接 TestClass(1,5).equals();这样调用了,当然了,把TestClass换成$也是可行的,只要加上这句

var $=TestClass;
window.$=$;
window.TestClass=TestClass;

下篇讲解稍微进阶一点的知识。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值