jQuery中extend函数详解

当我们在使用jQuery时，常常会用到extend函数。那么这个函数是干什么用的呢？如何使用呢？本文将详细讲解jQuery中的extend函数。

一、什么是extend函数？

在jQuery中，extend函数是一个非常常用的函数，它用于把一个或多个对象的属性合并到一个目标对象中。同时，extend函数还支持深拷贝和浅拷贝两种方式。

二、extend函数的语法形式

extend函数有多种语法形式，其中最基本的形式如下所示：

$.extend(target, obj1, obj2, ...);

三、extend函数的详细说明

我们来看一下函数中各个参数的含义：

• target：目标对象，新的属性将被添加到该对象中。
• obj1：第一个对象，其属性将被合并到目标对象中。
• obj2：第二个对象，其属性将被合并到目标对象中。
• ...：第n个对象，其属性将被合并到目标对象中。

在实际使用中，我们可以使用如下方式来实现深拷贝：

var deepCopy = function(target, source) { 
  for (var key in source) { 
    var copy = source[key]; 
    if (source === copy) continue; 
    if (typeof copy === "object") { 
      target[key] = deepCopy(target[key] || {}, copy); 
    } else { 
      target[key] = copy; 
    } 
  } 
  return target; 
}; 

var obj1 = { 
  a: {
    b: 1
  }, 
  b: 2, 
  c: [1, 2, 3]
};

var obj2 = deepCopy({}, obj1); 
obj2.a.b = 2;
console.log(obj1.a.b); // 1，说明深拷贝成功

在上述代码中，我们定义了一个deepCopy函数，用于实现深拷贝。然后我们使用extend函数将两个对象合并，其中第一个参数是空对象，表示将对象合并到一个新的对象中。最后我们修改了新对象中的属性值，从而验证深拷贝成功。

四、示例说明

4.1 用extend实现简单的继承

// 父类
function Animal(name) {
  this.name = name;
  this.type = "animal";
}

Animal.prototype.say = function () {
  console.log(this.name + " is a " + this.type);
};

// 子类
function Dog(name) {
  Animal.call(this, name); // 继承自父类
  this.bark = function () {
    console.log("Woof Woof");
  };
}

Dog.prototype = $.extend({}, Animal.prototype, { // 在浅拷贝的基础上添加新属性
  type: "dog" // 修改type属性
});

var dog = new Dog("Puppy");
dog.say(); // "Puppy is a dog"
dog.bark(); // "Woof Woof"

在上述代码中，我们定义了一个Animal类和一个Dog类。通过使用extend函数，我们将Animal类的prototype浅拷贝到Dog类的prototype原型中，并修改了type属性的值。最后，我们创建了一个Dog类的实例，可以发现继承和修改type属性都已经成功。

4.2 extend多个对象合并

var obj1 = {
  name: "obj1",
  age: 20
};

var obj2 = {
  name: "obj2",
  sex: "male"
};

var obj3 = {
  address: "Beijing",
  job: "developer"
};

var newObj = $.extend({}, obj1, obj2, obj3);
console.log(newObj); // 输出 {name: "obj2", age: 20, sex: "male", address: "Beijing", job: "developer"}

在上述代码中，我们定义了三个对象obj1、obj2、obj3。然后，我们对它们进行了拓展，并将结果保存在newObj对象中。通过输出newObj的值，我们可以看到对象被成功合并的结果。