AngularJS extend用法詳解及實例代碼
AngularJS extend用法
angular.extend:依次將第二個參數(shù)及后續(xù)的參數(shù)的第一層屬性(不管是簡單屬性還是對象)拷貝賦給第一個參數(shù)的第一層屬性,即如果是對象,則是引用的是同一個對象,并返回第一個參數(shù)對象。
實例一: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));
運行結(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"}}
實例二: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 : '經(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));
運行結(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)營公司"}}
再多的實例也不如源代碼來的簡單、直接和準確,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實現(xiàn)圖片上傳預(yù)覽路徑不安全的問題解決
這篇文章主要給大家介紹了關(guān)于Angular4實現(xiàn)圖片上傳預(yù)覽路徑不安全問題的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧。2017-12-12
angularjs封裝bootstrap時間插件datetimepicker
這篇文章主要介紹了angularjs封裝bootstrap時間插件datetimepicker 的相關(guān)資料,需要的朋友可以參考下2016-06-06
AngularJS入門教程之數(shù)據(jù)綁定原理詳解
這篇文章主要介紹了AngularJS數(shù)據(jù)綁定原理,較為詳細的分析了AngularJS數(shù)據(jù)綁定的原理、使用技巧與相關(guān)注意事項,需要的朋友可以參考下2016-11-11
AngularJs定時器$interval 和 $timeout詳解
這篇文章主要介紹了AngularJs定時器$interval 和 $timeout詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Angular5中調(diào)用第三方j(luò)s插件的方法
下面小編就為大家分享一篇Angular5中調(diào)用第三方j(luò)s插件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02

