AngularJS extend用法詳解及實(shí)例代碼

更新時(shí)間：2016年11月15日 14:32:01 投稿：lqh

這篇文章主要介紹了AngularJS extend用法詳解的相關(guān)資料,并附實(shí)例代碼，幫助大家學(xué)習(xí)理解，需要的朋友可以參考下

AngularJS extend用法

angular.extend:依次將第二個(gè)參數(shù)及后續(xù)的參數(shù)的第一層屬性（不管是簡單屬性還是對象）拷貝賦給第一個(gè)參數(shù)的第一層屬性，即如果是對象，則是引用的是同一個(gè)對象，并返回第一個(gè)參數(shù)對象。

實(shí)例一：var r = angular.extend(b, a);將對象a的第一層屬性（不管是簡單屬性還是對象）拷貝賦給對象b的第一層屬性，即如果是對象，則是引用的是同一個(gè)對象，并返回對象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));

運(yùn)行結(jié)果：

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

實(shí)例二：var r = angular.extend(b, a, z);相繼將對象a、z的第一層屬性（不管是簡單屬性還是對象）拷貝賦給對象b的第一層屬性，即如果是對象，則是引用的是同一個(gè)對象，并返回對象b

Js代碼

var a = { 
  name : 'bijian', 
  address : 'shenzhen', 
  family : { 
    num : 6, 
    amount : '80W' 
  } 
}; 
var z = { 
  family : { 
    amount : '150W', 
    mainSource : '經(jīng)營公司' 
  } 
}; 
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));

運(yùn)行結(jié)果：

Text代碼

a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}} 
b:{"name":"bijian","address":"shenzhen","family":{"amount":"150W","mainSource":"經(jīng)營公司"}} 
r:{"name":"bijian","address":"shenzhen","family":{"amount":"150W","mainSource":"經(jīng)營公司"}} 
a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}} 
b:{"name":"bijian","address":"hanzhou","family":{"amount":"180W","mainSource":"經(jīng)營公司"}} 
r:{"name":"bijian","address":"hanzhou","family":{"amount":"180W","mainSource":"經(jīng)營公司"}}

再多的實(shí)例也不如源代碼來的簡單、直接和準(zhǔn)確，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; 
}

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: