AngularJS extend用法详解及实例代码

AngularJS extend用法

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

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

Js代码

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));

运行结果:

Text代码

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"}}

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

Js代码

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));

运行结果:

Text代码

a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
b:{"name":"bijian","address":"shenzhen","family":{"amount":"150W","mainSource":"经营公司"}}
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.extend源码如下:

Js代码

/**
 * @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;
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

时间: 2016-11-12

angular.extend方法的具体使用

AngularJs的angular.extend()方法可以把一个或多个对象中的方法和属性扩展到一个目的对象中,使得这个对象拥有其他对象相同的方法和属性,如下图所示. angular.extends()方法的第一个参数是要被扩展的对象,后面可以传入一个或多个对象. 如果想要保存一个对象的状态,除了可以调用angular.copy()方法外,还可以把一个空对象{}作为第一个对象传入. 但要注意的是,angular.extends()是非递归的,也就是说:如果扩展的属性中有对象,那么二者同时引用同一

Angular工具方法学习

angular为我们提供了很多的工具方法. angular.bind 更改this指向 var obj1 = { name : 'obj1', show : function(str){ return this.name + str; } }; var obj2 = { name : 'obj2' }; var a = angular.bind(obj2,obj1.show,' is a object'); var b = angular.bind(obj2,obj1.show,[' is a

原生js实现复制对象、扩展对象 类似jquery中的extend()方法

jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,具体实例如下: 现有3个对象字面量: var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999}; 实现目标: 复制o1对象,把 o2,o3的对

浅谈jQuery中的$.extend方法来扩展JSON对象

$.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 结果 set

在Python中操作列表之list.extend()方法的使用

extend()方法追加序列内容到列表. 语法 以下是extend()方法的语法: list.extend(seq) 参数 seq -- 这是列表的元素 返回值 此方法不返回任何值,但添加内容到现有列表中 例子 下面的例子显示了extend()方法的使用 #!/usr/bin/python aList = [123, 'xyz', 'zara', 'abc', 123]; bList = [2009, 'manni']; aList.extend(bList) print "Extended L

jQuery中的deferred对象和extend方法详解

1 deferred对象 deferred对象是jQuery的回调函数解决方案,它是从jQuery1.5.0版本开始引入的功能 deferred对象的方法 (1) $.Deferred() 生成一个deferred对象. (2) deferred.done() 指定操作成功时的回调函数 (3) deferred.fail() 指定操作失败时的回调函数 (4) deferred.promise() 没有参数时,返回一个新的deferred对象,该对象的运行状态无法被改变:接受参数时,作用为在参数对

详解jQuery插件开发中的extend方法

Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,dest是要整合的空间可以使{} 或者不写 src是一个JSON表达式表示的javascript对象.... 因此里面可以添加方法属性等等... 我么通过不同的应用可以将我们自己的方法整合到jQuery空间中....实现插件开发 在jQuery中定义  jQuery.extend = jQuery.fn.extend  所以这两个函数式相同的  一.Jquery的扩展方法原型是: extend(dest,s

分析了一下JQuery中的extend方法实现原理

很久没有发表帖子了,今天突然分析了一下JQuery中的extend方法实现原理.目的为了提高自己对JQuery的认识,也想了解JavaScript高手是如何编写JS的,如有不足请指正.谢谢! 下面是JQuery.extend方法源代码: 复制代码 代码如下: jQuery.extend = jQuery.fn.extend = function() {      var options, name, src, copy, copyIsArray, clone,          target =

jQuery中extend()和fn.extend()方法详解

这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: 复制代码 代码如下: <!doctype html> <html>    <head>       <title></title>         <script src='jquery-1.7.1.js'></script>    </head>   

angular forEach方法遍历源码解读

angular中提供了forEach()方法用于遍历对象或数组,供大家参考,具体内容如下 function forEach(obj, iterator, context) { var key, length; if (obj) { if (isFunction(obj)) { for (key in obj) { // Need to check if hasOwnProperty exists, // as on IE8 the result of querySelectorAll is an