问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jQuery.extend

头像
Markh5
    1081221

    1.jQuery.fn.extend 与 jQuery.extend 区别?

    理解为jQuery.extend 将合并后的对象添加在jQuery全局中;
    jQuery.fn.extend 将合并后的对象添加在jQuery实例化的对象中;

    有没有详细的实例化解释??

    2.jQuery.extend([deep],src,obj1,obj2)?

    1)

    jQuery.extend(true,{city:'Bj',name:'Mark'},{city:'Sh',job:'Fe'});

jQuery,extend(false,{city:'Bj',name:'Mark'},{city:'Sh',job:'Fe'});


//true
return {city:'Sh',job:'Fe',name:'Mark'};


//false
return {city:'Sh',job:'Fe'};

    当true时，可否理解为 有相同属性存在时保留?

    2)

    jQuery.extend(true,{city:'Bj',name:'Mark'},{color:'Red',job:'Fe'});

jQuery,extend(false,{city:'Bj',name:'Mark'},{color:'Red',job:'Fe'});

//true and false
return {color:'Red',job:'Fe'};
    jqueryjquery插件
    阅读 3.6k
    4 个回答
    得票最新
    头像
    边城
      59.8k157274

      做个实验

      var a = {
    name: "hello",
    props: {
        a1: 1,
        a2: 2
    }
};

var b = $.extend({}, a);
console.log(b.props === a.props);
// true

var c = $.extend(true, {}, a);
console.log(c.props === a.props);
// false

var d = $.extend(false, {}, a);
console.log(JSON.stringify(d));
// {"name":"hello","props":{"a1":1,"a2":2}}
console.log(d.props === a.props);
// true

      可以看到，第一个参数 false 和第一个参数不是布尔型的情况是一样的。

      官方文档说，第一个参数 false 的时候如果想要只拷贝目标对象存在的属性，忽略不存在的的属性，请用 lodash。所以这里的 false 的不带这个参数是一样的效果。

      如果是 true 表示深度拷贝，深度的意思就是，如果源对象中某个属性是对象，而将这个对象拷贝一份赋值，而不是简单的赋值其引用。上面实验中的 c 就很说明问题了，c.props === a.props 的结果是 false，说明其 props 属性是新建的一个对象。

      头像
      jesse131
        348515

        楼主的demo错了啊

        jQuery.extend(false,{city:'Bj',name:'Mark'},{city:'Sh',job:'Fe'});  
//return {city:'Sh',job:'Fe',name:'Mark'};

        建议看看官方文档的demo

        var object1 = {apple: 0,banana: {weight: 52, price: 100},cherry: 97};
var object2 = {banana: {price: 200},durian: 100};
$.extend(object1, object2);
//{apple: 0, banana: {price:200}, cherry: 97, durian: 100}
$.extend(true, object1, object2);
//{apple: 0, banana: {weight: 52, price:200}, cherry: 97, durian: 100}

        或者这里jQuery插件开发总结

        头像
        前端懂交互
          38821016

          1.依然是官方文档，jQuery.extend()是合并2个对象。并且返回一个新的对象。jQuery.fn.extend()是对jQuery实例方法扩充。类似于：$.ajax（）这样的全局方法：

          <html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.fn.extend demo</title>
  <style>
label { display: block; margin: .5em; }
     </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 
<label><input type="checkbox" name="foo"> Foo</label>
<label><input type="checkbox" name="bar"> Bar</label>
 
<script>
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
 
// Use the newly created .check() method
$( "input[type='checkbox']" ).check();
</script>
 
</body>
</html>

          2.官方文档说了，第一个参数不支持传入false，传入true的时候是递归合并

          意思是：如果你这个对象下面还有对象依然可以用递归的方式查到，然后进行合并，合并的方式是一样的楼上给了一个官方的例子可以看。（也就是深拷贝）

          不管你有没有带[deep]参数，合并的方式是一致的。

          总结一下这两个方法基本都应用在写jQuery插件上面。不同的是第一个方法已经做好了闭包避免变量的污染。第二个方法还需要自己去创建(function($) { $.fn.func = function(){} });这样的闭包，同样第二个方法为更加灵活一些，方便理解。

          头像
          imingyu
            816513

            1.传递一个参数：向jquery本身扩展

            var obj = $.extend({
    hello:function(){
        alert("hello");
    }
});
$.hello();//alert("hello");
obj;//jQuery

            2.传递两个参数，第二个的参数的属性会覆盖第一个参数的属性，并返回第一个参数.

            var a={name:"Jeck"};
var b={
    name:"Tom",
    hello:function(){
        alert("hello");
    }
};
var obj = $.extend(a,b);
$.hello();//无法找到方法，报错
obj===a;//true
obj;/*
{
    name:"Tom",
    hello:function(){
        alert("hello");
    }
}
*/

            3.传递三个参数，三个参数都是对象的情况下，第二个和第三个的属性都会合并到第一个对象上（注意此时不会做递归覆盖），并返回第一个对象；

            var e={
    work:"上海浦东",
    home:"上海宝山"
};
var d={
    birthday:"1992-6-8",
    address:e
}
var a={
    name:"Jeck",
    info:d
};
var b={
    name:"Tom",
    hello:function(){
        alert("hello");
    },
    info:{
        age:20,
        birthday:"1990-5-23"
    }
};
var c={
    name:"Alan",
    hello:function(){
        alert(this.name);
    }
};
var obj = $.extend(a,b,c);
obj===a;//true
obj;/*
{
    name:"Alan",
    hello:function(){
        alert(this.name);
    },
    info:{
        age:20,
        birthday:"1990-5-23"
    }//注意，此处并没有把address扩展过来，应为不是递归扩展
}
*/
obj.hello();//alert("Alan")

            4.传递三个参数，第一个参数是bool型，extend函数会做递归处理，将第三个对象的属性覆盖到第二个对象上，并返回第二个对象；

            var c={
    work:"上海浦东",
    home:"上海宝山"
};
var a={
    name:"Jeck",
    address:c
};
var b={
    name:"Tom",
    hello:function(){
        alert("hello");
    },
    address:{
        home:"上海闸北"
    }
};
var obj = $.extend(true,a,b);
obj===a;//true
obj;/*
{
    name:"Tom",
    hello:function(){
        alert("hello");
    },
    address:{
        work:"上海浦东",
        home:"上海闸北"
    }
}
*/

            最后，$.fn.extend是向jquery.fn扩展方法或者属性用的。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题