AngularJS extend用法詳解及實(shí)例代碼
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;
}
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全的問題解決
這篇文章主要給大家介紹了關(guān)于Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全問題的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
angularjs實(shí)現(xiàn)時(shí)間軸效果的示例代碼
本篇文章主要介紹了angularjs實(shí)現(xiàn)時(shí)間軸效果的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
angularjs封裝bootstrap時(shí)間插件datetimepicker
這篇文章主要介紹了angularjs封裝bootstrap時(shí)間插件datetimepicker 的相關(guān)資料,需要的朋友可以參考下2016-06-06
AngularJS入門教程之?dāng)?shù)據(jù)綁定原理詳解
這篇文章主要介紹了AngularJS數(shù)據(jù)綁定原理,較為詳細(xì)的分析了AngularJS數(shù)據(jù)綁定的原理、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
AngularJs定時(shí)器$interval 和 $timeout詳解
這篇文章主要介紹了AngularJs定時(shí)器$interval 和 $timeout詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
Angular5中調(diào)用第三方j(luò)s插件的方法
下面小編就為大家分享一篇Angular5中調(diào)用第三方j(luò)s插件的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Angular實(shí)現(xiàn)的簡單定時(shí)器功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的簡單定時(shí)器功能,結(jié)合實(shí)例形式分析了AngularJS定時(shí)器功能的簡單實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2017-12-12

