当我们通过上面的知识了解了jQuery的大体框架之后，那么我们对于jQuery的学习就可以具体到诸如css/val/attr等方法是如何实现这样的程度，那么源码学习起来就会轻松很多，也会节约更多的时间。也给一些对于源码敬而远之的朋友提供了一个学习的可能。

有一个朋友留言给我，说她被静态方法，工具方法和实例方法这几个概念困扰了很久，到底他们有什么区别？

其实在上一篇文章中，关于封装一个对象，我跟大家分享了一个非常非常干货，但是却只有少数几个读者老爷get到的知识，那就是在封装对象时，属性和方法可以具体放置的三个位置，并且对于这三个位置的不同做了一个详细的解读。

而在实现jQuery扩展方法的想法中，一部分方法需要扩展到jQuery构造函数中，一部分方法需要扩展到原型中，当我们通读jQuery源码，还发现有一些方法放在了模块作用域中，至于为什么会有这样的区别，建议大家回过头去读读前一篇文章。

而放在构造函数中的方法，因为我们在使用时，不需要声明一个实例对象就可以直接使用，因此这样的方法常常被叫做工具方法，或者所谓的静态方法。工具方法在使用时因为不用创建新的实例，因此相对而言效率会高很多，但是并不节省内存。

而工具方法的特性也和工具一词非常贴近，他们与实例的自身属性毫无关联，仅仅只是实现一些通用的功能，我们可以通过$.each与$('p').each这2个方法来体会工具方法与实例方法的不同之处。

在实际开发中，我们运用得非常多的一个工具库就是lodash.js，大家如果时间充裕一定要去学习一下他的使用。

$.ajax() $.isFunction() $.each() ... ...

而放在原型中的方法，在使用时必须创建了一个新的实例对象才能访问，因此这样的方法叫做实例方法。也正是由于必须创建了一个实例之后才能访问，所以他的使用成本会比工具方法高很多。但是节省了内存。

$('#test').css() $('#test').attr() $('p').each()

这样，那位同学的疑问就很简单的被搞定了。我们在学习的时候，一定不要过分去纠结一些概念，而要明白具体怎么回事儿，那么学习这件事情就不会在一些奇奇怪怪的地方卡住了。

所以通过$.extend扩展的方法，其实就是对工具方法的扩展，而通过$.fn.extend扩展的方法，就是对于实例方法的扩展。那么我们在使用的时候就知道如何准确的去使用自己扩展的方法了。

jQuery插件的实现

我在初级阶段的时候，觉得要自己编写一个jQuery插件是一件高大上的事情，可望不可即。但是通过对于上面的理解，我就知道扩展jQuery插件其实是一件我们自己也可以完成的事情。

在前面我跟大家分享了jQuery如何实现，以及他们的方法如何扩展，并且前一篇文章分享了拖拽对象的具体实现。所以建议大家暂时不要阅读下去，自己动手尝试将拖拽扩展成为jQuery的一个实例方法，那么这就是一个jQuery插件了。

具体也没有什么可多说的了，大家看了代码就可以明白一切。

// Drag对象简化代码，完整源码可在上一篇文章中查看 ; (function() { // 构造 function Drag(selector) {} // 原型 Drag.prototype = { constructor: Drag, init: function() { // 初始时需要做些什么事情 this.setDrag(); }, // 稍作改造，仅用于获取当前元素的属性，类似于getName getStyle: function(property) {}, // 用来获取当前元素的位置信息，注意与之前的不同之处 getPosition: function() {}, // 用来设置当前元素的位置 setPostion: function(pos) {}, // 该方法用来绑定事件 setDrag: function() {} } // 一种对外暴露的方式 window.Drag = Drag; })(); // 通过扩展方法将拖拽扩展为jQuery的一个实例方法 (function ($) { $.fn.extend({ becomeDrag: function () { new Drag(this[0]); return this; // 注意：为了保证jQuery所有的方法都能够链式访问，每一个方法的最后都需要返回this，即返回jQuery实例 } }) })(jQuery);

后续文章内容一个大概预想

去年年末的时候就有了想要将JavaScript基础知识总结一下的这样一个想法，可是JavaScript基础知识确实并非全部是层层递进的关系，有很多碎片化的东西，所以之前一直没有找到一个合适的整理方法。

直到在segmentfault中我在给题主建议如何快速学习一门诸如

配图与本文无关

柯里化是函数的一个比较高级的应用，想要理解它并不简单。因此我一直在思考应该如何更加表达才能让大家理解起来更加容易。想了很久，决定先抛开柯里化这个概念不管，补充两个重要、但是容易被忽略的知识点。

一、补充知识点之函数的隐式转换

JavaScript作为一种弱类型语言，它的隐式转换是非常灵活有趣的。当我们没有深入了解隐式转换的时候可能会对一些运算的结果会感动困惑，比如4 + true = 5。当然，如果对隐式转换了解足够深刻，肯定是能够很大程度上提高对js的使用能力。只是我没有打算将所有的隐式转换规则分享给大家，这里暂时只分享一下，函数在隐式转换中的一些规则。

来一个简单的思考题。

function fn() { return 20; } console.log(fn + 10); // 输出结果是多少？

稍微修改一下，再想想输出结果会是什么？

function fn() { return 20; } fn.toString = function() { return 10; } console.log(fn + 10); // 输出结果是多少？

还可以继续修改一下。

function fn() { return 20; } fn.toString = function() { return 10; } fn.valueOf = function() { return 5; } console.log(fn + 10); // 输出结果是多少？// 输出结果分别为 function fn() { return 20; }10 20 15

当使用console.log，或者进行运算时，隐式转换就可能会发生。从上面三个例子中我们可以得出一些关于函数隐式转换的结论。