通过jQuery源码学习javascript

时间:2021-12-05 10:01:35
    昨天写了篇通过jQuery源码学习javascript(一),里面有一个定义对象C的方法,我早期也没有太注意这个方面的技术细节。后来我查了一下资料,发现里面有很多巧的地方。今天与大家分享。  转载至http://www.cnblogs.com/baochuan/archive/2012/11/22/2782343.html 巧妙1:函数   在javascript代码中函数是个不可多得的人才。    ♥ 它可以归置代码段,封装相对独立的功能。    ♥ 它也可以实现类,注入OOP思想。  jQuery就是一个函数,你也可以把它当成类(呵呵,本身就是类)。  通过jQuery源码学习javascript
(function(){
var jQuery = function() {
// 函数体
}
window.jQuery
= window.$ = jQuery;
})();
console.log(jQuery);
通过jQuery源码学习javascript

                                     通过jQuery源码学习javascript输出结果

     通过jQuery源码学习javascript

上面的空函数就是所谓的构造函数,构造函数在面向对象语言中是类的一个基本方法。

巧妙2:扩展原型   何为原型对象?我给出一篇博文大家可以去了解一下http://www.cnblogs.com/gnface/archive/2012/08/22/2651534.html   javascript为所有函数绑定一个prototype属性,由这个属性指向一个原型对象。我们在原型对象中定义类的继承属性和方法等。   原型对象是javascript实现继承的基本机制。 通过jQuery源码学习javascript
(function(){
var jQuery = function() {
// 函数体
}
jQuery.fn
= jQuery.prototype = {
// 扩展原型对象
jquery: "1.8.3",
test:
function() {
console.log(
'test');
}
}
window.jQuery
= window.$ = jQuery;
})();

(
new jQuery()).test();
通过jQuery源码学习javascript

 

  巧妙3:使用工厂方法来创建一个实例 

  上面的方法必须使用下面的方法才能进行调用,这样就会产生很多对象,从而浪费内存消耗。

(new jQuery()).test();

  jQuery源码使用了很柔和的方法,也是大家比较熟悉的工厂方法,进行调用。

通过jQuery源码学习javascript
(function(){
var jQuery = function() {
// 函数体
return jQuery.fn.init();
}
jQuery.fn
= jQuery.prototype = {
// 扩展原型对象
jquery: "1.8.3",
init:
function() {
return this;
},
test:
function() {
console.log(
'test');
}
}
window.jQuery
= window.$ = jQuery;
})();
jQuery().test();
通过jQuery源码学习javascript

通过jQuery源码学习javascript

假想1:让jQuery函数体直接返回该对象——我用this

通过jQuery源码学习javascript
(function(){
var jQuery = function() {
return this;
}
jQuery.fn
= jQuery.prototype = {
// 扩展原型对象
jquery: "1.8.3",
test:
function() {
console.log(
'test');
}
}
window.jQuery
= window.$ = jQuery;
})();
console.log(jQuery());
通过jQuery源码学习javascript

                                     通过jQuery源码学习javascript输出结果

通过jQuery源码学习javascript

发现这里的this指向Window对象。  

 

假想2:让jQuery函数体直接返回类的实例。

通过jQuery源码学习javascript
(function(){
var jQuery = function() {
return new jQuery();
}
jQuery.fn
= jQuery.prototype = {
// 扩展原型对象
jquery: "1.8.3",
test:
function() {
console.log(
'test');
}
}
window.jQuery
= window.$ = jQuery;
})();
console.log(jQuery());
通过jQuery源码学习javascript

                                     通过jQuery源码学习javascript输出结果

通过jQuery源码学习javascript

发现上面是一个递归死循环,出现内存外溢。



巧妙4:分隔作用域 

思考1:init()方法返回的this作用域是什么?

通过jQuery源码学习javascript
(function(){
var jQuery = function() {
// 函数体
return jQuery.fn.init();
}
jQuery.fn
= jQuery.prototype = {
// 扩展原型对象
jquery: "1.8.3",
init:
function() {
this.init_jquery = '2.0';
return this;
}
}
window.jQuery
= window.$ = jQuery;
})();
console.log(jQuery().jquery);
console.log(jQuery().init_jquery);
通过jQuery源码学习javascript

                                     通过jQuery源码学习javascript输出结果

  通过jQuery源码学习javascript

init()方法中的this作用域:this关键字引用了init()函数作用域所在的对象,同时也能够访问上一级对象jQuery.fn对象的作用。——这种思路会破坏作用域的独立性,对于jQuery框架来说,很可能造成消极影响。

思考2:怎么把init()中的this从jQuery.fn对象中分隔出来?——实例化init初始化类型。

通过jQuery源码学习javascript
(function(){
var jQuery = function() {
// 函数体
return new jQuery.fn.init();
}
jQuery.fn
= jQuery.prototype = {
// 扩展原型对象
jquery: "1.8.3",
init:
function() {
this.init_jquery = '2.0';
return this;
}
}
window.jQuery
= window.$ = jQuery;
})();
console.log(jQuery().jquery);
console.log(jQuery().init_jquery);
通过jQuery源码学习javascript

                                     通过jQuery源码学习javascript输出结果

    通过jQuery源码学习javascript

通过实例化init()初始化类型,限定了init()方法里的this,只在init()函数内活动,不让它超出范围。

巧妙5:原型传递   思考1:在巧妙4中,我们把init()中的this从jquery.fn对象中分隔出来。那我们如何能做到保证“巧妙4”的基础上,还能访问jQuery原型对象呢?——原型传递。   让jQuery的原型对象覆盖init()构造器的原型对象。
jQuery.fn.init.prototype = jQuery.fn;

全部代码:

通过jQuery源码学习javascript
(function(){
var jQuery = function() {
// 函数体
return new jQuery.fn.init();
}
jQuery.fn
= jQuery.prototype = {
// 扩展原型对象
jquery: "1.8.3",
init:
function() {
this.init_jquery = '2.0';
return this;
}
}
jQuery.fn.init.prototype
= jQuery.fn;
window.jQuery
= window.$ = jQuery;
})();
console.log(jQuery().jquery);
console.log(jQuery().init_jquery);
通过jQuery源码学习javascript

                                     通过jQuery源码学习javascript输出结果

通过jQuery源码学习javascript

妙棋

  把init()对象的prototype指针指向jQuery.fn。——这样init()里的this继承了jQuery.fn原型对象定义的方法和属性。