javascript 之扩展对象 jQuery.extend

川长思鸟来 2023-08-17 15:17 82阅读 0赞

在JQuery的API手册中，extend方法挂载在JQuery 和 JQuery.fn两个不同的对象上，但在JQuery内部代码实现的是相同的，只是功能各不相同。

官方解释：

*  **jQuery.extend** Merge the contents of two or more objects together into the first object. 把两个或者多个对象合并到第一个对象当中；
 *  **jQuery.fn.extend** Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods. 把对象挂载到 jQuery 的 prototype 上以扩展一个新的 jQuery **实例方法** 。

一、合并对象

语法：jQuery.extend(target \[,object1\] \[,objectN\]);

案例：这只是浅度拷贝

var obj1={ name :'Tom',age:21};
    var obj2={name:'Jerry',sex:'boy'};
    console.log($.extend({},obj1,obj2));
    输出：{name: "Jerry", age: 21, 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对象等）

三、jQuery.fn.extend 和 jQuery.extend 的区别

概念： 类方法 和 实例方法

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

实例方法：必须创建实例，然后才能通过实例调用 **实例方法**

说明：**jQuery** 是一个封装的很好的类，可以使用jQuery选择器来创建jQuery来创建jQuery的实例，比如：使id选择器$('\#btn')来创建一个实例

区别：

1、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);
    jQuery.max(4,5)

2、jQuery.fn.extend=jQuery.prototype.extend;相当于对实例方法的扩展

$.fn.extend({
       setRed:function(){
           $(this).css("color","red");  
       }
    })
    
    $('.tip').setRed();
    说明：$(".tip")创建了一个jQuery实例，通过它可以调用成员方法setRed

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

改良后的代码
    $.fn.extend(){
       red:function(){
           return $(this).css("color","red");
       }
    }

转载于:https://www.cnblogs.com/zmztya/p/11338471.html