jQuery.fn.extend(object)

概述

在 jQuery 下添加实例方法

参数

参数	说明
object	扩展 jQuery 实例方法的对象，里面包含着函数

示例

目的：在 jQuery 下增加两个实例方法

代码：

const aMin = function (a, b) {return a < b ? a : b;
};
const aMax = function (a, b) {return a > b ? a : b;
};$.fn.extend({ aMin, aMax });

结果：

$().aMin(1, 2)   // 1
$().aMax(2, 3)   // 3

$.fn.extend() 的原理是在 jQuery 函数下增加实例方法。

打印 jQuery

可以看到，方法是添加到 jQuery.prototype 下面的，所以要通过 $().xxx 来调用。

源码

jQuery.extend = jQuery.fn.extend = function () {var options, name, src, copy, copyIsArray, clone,target = arguments[0] || {},i = 1,length = arguments.length,deep = false;if (typeof target === "boolean") {deep = target; target = arguments[1] || {};i = 2;}if (typeof target !== "object" && !jQuery.isFunction(target)) {target = {};}if (length === i) {target = this;--i;}for (; i < length; i++) {if ((options = arguments[i]) != null) {for (name in options) {src = target[name];copy = options[name];if (target === copy) {continue;}if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {if (copyIsArray) {copyIsArray = false;clone = src && jQuery.isArray(src) ? src : [];} else {clone = src && jQuery.isPlainObject(src) ? src : {};}target[name] = jQuery.extend(deep, clone, copy);} else if (copy !== undefined) {target[name] = copy;}}}}return target;};

把 $.fn.extend(object) 情况单独提取出来。

实现思路：循环遍历参数 object，把里面的函数添加到 jQuery.prototype 下。

$.extend = function () {/* options: 扩展目标({ aMin, aMax })target: 被扩展目标(静态方法情况下，target 为 jQuery，实例方法情况下，target 为 jQuery.fn)*/let options, name, copy, target,i = 1,                       // 扩展目标在参数的位置，默认为 1(第一个参数)length = arguments.length,   // 1 参数长度// 判断是否是添加静态方法或者实例方法情况if (length === i) {target = this;   // target = jQuery.fn--i;             // 0}// i = 0; length = 1for (; i < length; i++) {if ((options = arguments[i]) != null) {   // options = { aMin: function(){...}, aMax: function(){...} }for (name in options) {                 // name = aMin、aMaxcopy = options[name];                 // function(){ // aMin }、function() { // aMax }target[name] = copy;                  // jQuery.fn[aMin] = function(){ // aMin }、jQuery.fn[aMax] = function(){ // aMax }}}}return target;   // 此时，jQuery.fn 下就有 aMin 和 aMax 两个实例方法。
}