phpstudy集成环境

 首页 > jQuery.extend

jQuery.extend

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'};

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扩展方法或者属性用的。

做个实验

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 属性是新建的一个对象。

楼主的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插件开发总结

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(){} });这样的闭包，同样第二个方法为更加灵活一些，方便理解。

【热门文章】
【热门文章】