angular.extend

最新推荐文章于 2021-03-15 19:02:18 发布

小幸福～^_^～

最新推荐文章于 2021-03-15 19:02:18 发布

阅读量2.6k

点赞数

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/xiaoxingfu0604/article/details/79193412

版权

angularjs 专栏收录该内容

6 篇文章

订阅专栏

本文详细解析了 Angular.extend 方法的工作原理，重点介绍了深拷贝与浅拷贝的区别，通过具体实例展示了如何使用该方法进行对象的扩展与属性的合并。

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

angular.extend:依次将第二个参数及后续的参数的第一层属性（不管是简单属性还是对象）拷贝赋给第一个参数的第一层属性，即如果是对象，则是引用的是同一个对象，并返回第一个参数对象。

语法：jQuery.extend( [deep ], target, object1 [, objectN ] ) 描述: 将两个或更多对象的内容合并到第一个对象，在这里指向写写对深浅拷贝的理解！！！深浅拷贝对应的参数就是[deep]，是可选的，为true或false。默认情况是false（浅拷贝），并且false是不能够显示的写出来的。如果想写，只能写true（深拷贝）~~ 什么是深、浅拷贝呢？ 1. 在默认情况下，通过`$.extend()`合并操作不是递归的（浅拷贝）;如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。然而，如果将 `true` 作为该函数的第一个参数，那么会在对象上进行递归的合并（深拷贝）。 2. 浅拷贝（false 默认）：如果第二个参数对象有的属性第一个参数对象也有，那么不会进行相同参数内部的比较，直接将第一个对象的相同参数覆盖。 3. 深拷贝（true）：如果第二个参数对象有的属性第一个参数对象也有，还要继续在这个相同的参数向下一层找，比较相同参数的对象中是否还有不一样的属性，如果有，将其继承到第一个对象，如果没有，则覆盖。

实例一：var r = angular.extend(b, a);将对象a的第一层属性（不管是简单属性还是对象）拷贝赋给对象b的第一层属性，即如果是对象，则是引用的是同一个对象，并返回对象b

var a = {
    name : 'bijian',
    address : 'shenzhen',
    family : {
        num : 6,
        amount : '80W'
    }
};
var b = {};

var r = angular.extend(b, a);
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('r:' + JSON.stringify(r));

b.address = 'hanzhou';
b.family.amount = '180W';
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('r:' + JSON.stringify(r));

运行结果：

a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
b:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
r:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}

a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"180W"}}
b:{"name":"bijian","address":"hanzhou","family":{"num":6,"amount":"180W"}}
r:{"name":"bijian","address":"hanzhou","family":{"num":6,"amount":"180W"}}//注意的是：

angular.extends()是非递归的，也就是说：如果扩展的属性中有对象，那么二者同时引用同一个对象

实例二：var r = angular.extend(b, a, z);相继将对象a、z的第一层属性（不管是简单属性还是对象）拷贝赋给对象b的第一层属性，即如果是对象，则是引用的是同一个对象，并返回对象b

var a = { name : 'bijian',
    address : 'shenzhen',
    family : {
        num : 6,
        amount : '80W'
    }
};
var z = {
    family : {
        amount : '150W',
        mainSource : '经营公司'
    }
};
var b = {};

var r = angular.extend(b, a, z);
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('r:' + JSON.stringify(r));
b.address = 'hanzhou';
b.family.amount = '180W';
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('r:' + JSON.stringify(r));
运行结果：

a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
b:{"name":"bijian","address":"shenzhen","family":{"amount":"150W","mainSource":"经营公司"}} //因为

extend是浅拷贝，所以z中的对象直接把a中的对象覆盖
r:{"name":"bijian","address":"shenzhen","family":{"amount":"150W","mainSource":"经营公司"}} 

a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}} 
b:{"name":"bijian","address":"hanzhou","family":{"amount":"180W","mainSource":"经营公司"}}
r:{"name":"bijian","address":"hanzhou","family":{"amount":"180W","mainSource":"经营公司"}}

//注意的是：angular.extends()是非递归的，也就是说：如果扩展的属性中有对象，那么二者同时引用同一个对象

实例三：

[html]view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dialog插件测试页面</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
var object1 = {
apple: 0,
banana: {
weight: 52,
price: 100
},
cherry: 97
};
var object2 = {
banana: {
price: 200
},
durian: 100
};
//默认情况浅拷贝
//object1--->{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
//object2的banana覆盖了object1的banana，但是weight属性未被继承
//$.extend(object1, object2);
//深拷贝
//object1--->{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
//object2的banana覆盖了object1的banana，但是weight属性也被继承了呦
$.extend(true,object1, object2);
console.log('object1--->'+JSON.stringify(object1));
</script>
</head>
<body>
</body>
</html>


再多的实例也不如源代码来的简单、直接和准确，angular.extend源码如下：

/**
 * @ngdoc function 
 * @name angular.extend 
 * @function * * @description 
 * Extends the destination object `dst` by copying all of the properties from the `src` object(s) 
 * to `dst`. You can specify multiple `src` objects. 
 * @param {Object} dst Destination object. 
 * @param {...Object} src Source object(s). 
 * @returns {Object} Reference to `dst`. 
 */ 
function extend(dst) { 
    var h = dst.$$hashKey; 
    forEach(arguments, function(obj){
        if (obj !== dst) {
            forEach(obj, function(value, key){
                dst[key] = value; }); 
        } 
    });  
    setHashKey(dst,h);
    return dst; 
}