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ù)覽路徑不安全問題的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12angularjs封裝bootstrap時間插件datetimepicker
這篇文章主要介紹了angularjs封裝bootstrap時間插件datetimepicker 的相關(guān)資料,需要的朋友可以參考下2016-06-06AngularJS入門教程之數(shù)據(jù)綁定原理詳解
這篇文章主要介紹了AngularJS數(shù)據(jù)綁定原理,較為詳細的分析了AngularJS數(shù)據(jù)綁定的原理、使用技巧與相關(guān)注意事項,需要的朋友可以參考下2016-11-11AngularJs定時器$interval 和 $timeout詳解
這篇文章主要介紹了AngularJs定時器$interval 和 $timeout詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05Angular5中調(diào)用第三方j(luò)s插件的方法
下面小編就為大家分享一篇Angular5中調(diào)用第三方j(luò)s插件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02