How to use extend in jQuery

This article shares with you a detailed explanation of how to use extend in jQuery. The content is quite good. I hope it can help friends in need

Method introduction

In the jQuery API manual, the extend method is mounted on two different objects: jQuery and jQuery.fn, but the internal code implementation of jQuery is the same, but the functions are different. Are not the same.

Let’s take a look at the official explanation first:

• jQuery.extend Merge the contents of two or more objects together into the first object. Merge two or more objects into the first object;

• jQuery.fn.extend Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods. Mount the object to jQuery's prototype to extend a new jQuery Instance method.

Although there is no official mention of the extension method function of jQuery.extend, it also has the function of extending jQuery Class method .

Merge objects

First of all, let me introduce the usage of extend function in Merge objects.

jQuery.extend(target [, object1] [, objectN])

Merge object1 ... objectN to the target object. If there is only one parameter, the target object will be merged into the jQuery object.

var obj1 = {
    name: 'Tom',
    age: 21
}

var obj2 = {
    name: 'Jerry',
    sex: 'boy'
}

$.extend(obj1, obj2); // {name: "Jerry", age: 21, sex: "boy"}

obj1 // {name: "Jerry", age: 21, sex: "boy"}
obj2 // {name: "Jerry", sex: "boy"}

上述代码展示的是将 obj2 对象合并到 obj1 对象中，这种方法会 改变 obj1 对象的结构。如果你 不想改变 合并目标对象的结构，你可以这么做。

var obj1 = {
    name: 'Tom',
    age: 21
}

var obj2 = {
    name: 'Jerry',
    sex: 'boy'
}

$.extend({}, obj1, obj2); // { name: "Jerry", age: 21, sex: "boy" }

obj1 // { name: "Tom", age: 21 }
obj2 // { name: "Jerry", sex: "boy" }

深浅拷贝

jQuery.extend([deep], target, object1 [, objectN])

和上面的讲述的不同的是，该方法多了一个类型为 boolean 的 [deep] 传参，当其为 true 时，将 object1 , objectN 深度复制 后合并到 target 中。

首先，我们理解一下什么叫做 深度复制 。看看其和 浅度复制 有什么区别。

var obj1 = {
    name: "John",
    location: {
        city: "Boston",
        county: "USA"
    }
}

var obj2 = {
    last: "Resig",
    location: {
        state: "MA",
        county: "China"
    }
}

$.extend(false, {}, obj1, obj2); // { name: "John", last: "Resig", location: { state: "MA", county: "China" }}

$.extend(true, {}, obj1, obj2); // { name: "John", last: "Resig", location: { city: "Boston", state: "MA", county: "China" }}

由此可见，执行 深度复制 会递归遍历每个对象中含有复杂对象（如：数组、函数、json对象等）的属性值进行复制，而且 浅度复制便不会这么做。

方法扩展

上述的 extend 方法中的 target 参数是可以省略的。如果省略了，则该方法就只能传入一个 object 参数，该方法功能是将该 object 合并到调用 extend 方法的对象中。

我们通常会使用这种方式来对 jQuer进行一些方法上的扩展。

引子

jQurey 提供了两种方法扩张方式，分别为jQuery.fn.extend(object)和jQuery.extend(object).

想要搞清楚两种扩展方式之间的区别的话，先要了解什么是jQuery.fn.

本猿参考了 jQuery 的源码，发现其中玄机：

jQuery.fn = jQuery.prototype = {　　　
    init: function(selector, context) {
        // ...
    };
}

jQuery.fn = jQuery.prototype这句代码明确指出jQuery.fn指代的就是 jQuery 的原型。

其次，我们要引入两个概念 类方法 和 实例方法 。

• 类方法 是直接可以使用类引用，不需要实例化就可以使用的方法。一般在项目中 类方法 都是被设置为工具类使用；

• 实例方法 必须先创建实例，然后才能通过实例调用该 实例方法 。

jQuery可以看做是这个封装得非常好的类，而我们可以使用jQuery选择器来创建 jQuery 的实例。比如：使 id 选择器$('#btn')来创建一个实例。

区别

jQuery.extend(object)相当于对 类方法 的扩展。

jQuery.extend({
    /* 返回两个元素中较小的值 */
    min: function(a, b) {
        return a < b ? a : b;
    },
    /* 返回两个元素中较大的值 */
    max: function(a, b) {
        return a > b ? a : b;
    }
});

jQuery.min(2, 3); // 2 
jQuery.max(4, 5); // 5

jQuery.fn.extend(object)是对jQuery.prototype上的扩展。

jQuery.fn.extend = jQuery.prototype.extend

这种方式相当对 实例方法 的扩展。

举个栗子：
开发一个简单的小功能，使用该方法可以使选定元素内的文字变红。

$.fn.extend({
    setRed: function() {
        $(this).css("color", "red");
    }
});

$('.tip').setRed();

$(".tip")创建了一个jQuery实例，通过它可以调用成员方法setRed.

上述代码可以实现预想的扩展，但最好返回this 以满足 jQuery 链式操作 的需要。

改良之后，代码如下：

$.fn.extend({
    red: function() {
        return $(this).css("color", "red");
    }
});

The above is the detailed content of How to use extend in jQuery. For more information, please follow other related articles on the PHP Chinese website!