揭秘 jQuery 背后的故事：深挖 $ 原理和 extend 函数源码实现

前端

2023-11-19 23:12:44

jQuery $ 原理

作为jQuery的核心，扮演着至关重要的角色，它既是jQuery的别称，也是创建jQuery实例对象的函数。这种双重角色使成为开发者的强大工具。

jQuery 的别称

在页面中直接通过调用，就相当于 jQuery 的别称。这种方式非常方便，它允许您在不创建 jQuery 实例的情况下使用 jQuery 的方法和属性。

创建 jQuery 实例对象

使用 $() 可以创建 jQuery 实例对象。例如，以下代码创建了一个包含所有

元素的 jQuery 实例对象：

var $p = $("p");

这个实例对象可以用来访问和操作页面中的所有

元素。

jQuery extend 函数源码实现

extend 函数是 jQuery 中非常有用的一个函数，它允许您将一个对象扩展到另一个对象中。这意味着您可以将一个对象的属性和方法复制到另一个对象中。

以下是对 extend 函数的源码实现的简要概述：

jQuery.extend = function(target, source, deep) {
  if (deep === undefined) {
    deep = true;
  }

  for (var key in source) {
    if (deep && typeof source[key] === "object" && target[key]) {
      jQuery.extend(target[key], source[key]);
    } else {
      target[key] = source[key];
    }
  }

  return target;
};

参数说明

target： 要扩展的对象。
source： 要从其扩展属性的对象。
deep： 一个布尔值，指示是否应深度扩展对象。如果为 true，则 extend 函数将递归地将 source 对象的属性扩展到 target 对象的属性中。如果为 false，则 extend 函数将只扩展 source 对象的直接属性到 target 对象的属性中。

用法示例

以下是对 extend 函数的使用示例：

var obj1 = {
  name: "John",
  age: 30
};

var obj2 = {
  job: "developer",
  skills: ["JavaScript", "HTML", "CSS"]
};

jQuery.extend(obj1, obj2);

console.log(obj1);