【js】 $.extend, $.fn.extend,（function($){….}）（jQuery）说明

最新推荐文章于 2024-07-05 14:31:43 发布

weixin_34071713

最新推荐文章于 2024-07-05 14:31:43 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/v512345/blog/846634

本文详细介绍了 jQuery 中的 $.extend 方法的使用方式及其不同参数组合的效果。包括如何使用该方法扩展 jQuery 对象的功能，实现对象合并及深拷贝与浅拷贝的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

1.1$.extend() 相当于为Jquery全局对象添加了一个静态方法

$.extend({
sayHello: function (name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
}
})
$.sayHello(); //调用
$.sayHello('Wayou'); //带参调用

1.2.extend(result,item1,item2…..)与extend({},item1,item2,……) extend(result,item1,item2…..)这个方法主要用来合并，将所有的参数项都合并result中，并返回result，但是这样就会破坏result的结构。 extend({},item1,item2,……)用这个方法，可以将所得的结果全部合并在{}中，并返回，而且还不会破坏原有的项的结构。

Var item={name:”olive”,age:23};
Var item1={name:”Momo”,sex:”gril”};
Var result=$.extend({},item,item1);

结果：

Result={name:”Momo”,age:23,sex:”gril”};

注：item1中的name：“Momo” 将item中的name：“olive”给覆盖了

1.3.extend(boolean,{},item1,item2….) extend方法还有带boolean型参数的重载。 boolean型参数为true表示深拷贝，为false时表示浅拷贝。具体可以通过一下示例来说明：示例：

var item={name：“olive”,age:23,address{provice:”河南”,city:”郑州”}};
var item1={sex:”girl”,address{city:”北京”}};
var result=$.extend(true,item,item1);
var result1=$.extend(false,item,item1);

结果：

Result={name：“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};
Result1={name：“olive”,age:23,sex:”gril”,address:{ city:”北京”}};

说明：以上结果说明，当参数为ture时，即为深拷贝，当子项item1中的子项有与item中的子项相同属性的值不一样时，item1中子项的值会将item子项中的值给覆盖，当子项item1的属性跟item中的属性不同时，会与item进行合并。当参数为false时，子项item1中的子项中与item中的子项属性相同时，item1中子项的属性值会将item中的值给完全覆盖。

1.4.$.fn.extend 每一个实例添加一个实例方法了 $.fn.extend({hello:function(value){alert(“hello “+value);}}); 这样写过之后，在获取每一个示例之后，都可以调用该方法： $(“#id”).hello(“Olive”);

2.（function($){….}）（jQuery） 我们先看第一个括号里边的内容：function($){….}，这不就是一个匿名的函数吗？但是它的形参比较奇怪，是$,这里主要是为了不与其它的库冲突。

这样我们就比较容易理解第一个括号内的内容就是定义了一个匿名函数，我们在调用函数的时候，都是函数名后边加上括号以及实参，但是由于操作符的优先级我们定义的匿名函数也需要用（）括起来。

现在我想大家已经很清楚这句话是什么意思了吧。第一个括号表示定义了一个匿名函数，然后第二个函数表示为该函数传递的参数，整个结合起来意思就是，定义了一个匿名函数，然后又调用该函数，该函数的实参为jQuery。

相当于：function fun($){…};fun(jQuery);

这种方法多用于存放开发的插件，执行其中的代码时，Dom对象并不一定加载完毕。于此相反的是$(function(){})，这种方法在使用时页面的Dom对象已经加载完毕了。事实上该方法的全写是：$(document).ready(function(){});

3.(function() { / code / })() 可以用它创建命名空间，只要把自己所有的代码都写在这个特殊的函数包装内，那么外部就不能访问，除非你允许(变量前加上window，这样该函数或变量就成为全局)。各JavaScript库的代码也基本是这种组织形式。

(function(){
function a(){
   alert("a");
}
})();

转载于:https://my.oschina.net/v512345/blog/846634