`

angular.extend用法实例

阅读更多

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

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

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

运行结果:

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

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

运行结果:

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源码如下:

/**
 * @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;
}
分享到:
评论

相关推荐

    AngularJS extend用法详解及实例代码

    AngularJS中的extend方法是用于合并两个或多个对象的内容到第一个对象中。...通过以上详细解析,我们了解了`angular.extend`在AngularJS中的使用方法和实例演示,希望对学习AngularJS的读者有所帮助。

    讲解JavaScript的Backbone.js框架的MVC结构设计理念

    Backbone允许你定义实例方法和静态方法来增强Model的功能。此外,Backbone还提供了丰富的API来处理HTTP请求,与后端服务器进行数据交互。 通过这些知识点,开发者可以更深入地理解和运用Backbone.js框架,以实现...

    精通JavaScript.jQuery\书中实例\第14章

    这通常涉及使用`.fn.extend()`方法。 6. **链式操作**:jQuery的一个显著特性是链式调用,即多个方法可以连续在同一选择集上执行,如`$(selector).css('color', 'red').addClass('highlight')`。 7. **选择器**:...

    jQuery 源码+实例+注释

    本教程旨在通过源码解析、实例演示和详细注释,帮助新手快速掌握 jQuery 的核心概念和用法。 一、jQuery 基础 1. **选择器**: jQuery 的核心功能之一是其强大的选择器,允许开发者以 CSS 语法选择页面中的元素。...

    jquery-3.4.1.rar

    3. **链式操作**:jQuery对象返回的是jQuery实例,因此可以连续调用多个方法,如`$('p').addClass('highlight').css('color', 'red')`。 4. **插件开发**:通过$.fn.extend(),可以创建自己的jQuery插件,扩展...

    The_Anatomy_of_BackboneJS

    通过Backbone.Model.extend方法可以创建一个新的模型类,然后通过new关键字创建模型的实例。模型提供了获取和设置属性的方法,比如todoItem.get('description')和todoItem.set({status:'complete'})。此外,模型还...

    《JavaScript动态网页设计经典实例教程》共给网上下载的代码

    《JavaScript动态网页设计经典实例教程》是一本深入探讨JavaScript在网页设计中应用的教程,它旨在帮助读者通过实例学习和掌握这一重要的前端编程语言。JavaScript是互联网上最广泛使用的脚本语言,它使得网页能够...

    prototype框架

    它提供`Class.create`方法来创建新的类,`Object.extend`用于继承现有类,并且支持构造函数和实例方法。 ### 6. JSON支持 Prototype库内置了JSON(JavaScript Object Notation)的支持,包括`JSON.parse`和`JSON....

    强大Vue.js组件浅析

    1. **组件定义**:在Vue.js中,组件通过`Vue.extend`方法创建,它接受一个包含各种选项的对象,如模板、数据、方法等。例如: ```javascript var MyComponent = Vue.extend({ template: '<div>A custom component...

    code-project-vuejsTypeScript.zip

    这个项目可能是为了帮助Angular开发者理解和迁移至Vue.js,通过TypeScript的使用,让他们能快速上手。你可以通过阅读源代码,了解如何在Vue.js中定义和使用TypeScript,同时也可以参考官方文档和社区资源,如: - ...

    Angularjs的启动过程分析

    接下来,AngularJS通过extend函数向其全局对象angular添加一系列方法和属性,例如:bootstrap、copy、extend、equals、element、forEach、injector、noop、bind等。这些方法和属性为AngularJS提供了丰富的功能,如...

    Learning jQuery

    2. 使用插件:通过`$.fn.extend()`将插件添加到jQuery对象上,然后通过$(selector).pluginName()方式调用。 3. 常用插件:如jQuery UI提供丰富的UI组件,jQuery Validation插件用于表单验证。 六、jQuery与现代Web...

    简介AngularJS中使用factory和service的方法

    服务是通过构造函数创建的,它们是单例对象,可以继承自JavaScript的构造函数或使用`angular.extend()`进行扩展。比如`CalcService`: ```javascript mainApp.service('CalcService', function(MathService) { ...

    jquery 源码及API(CHM)下载

    本资源包含jQuery的源码及API文档,对于深入理解jQuery的工作原理和使用方法非常有帮助。 首先,jQuery的核心理念是“Write Less, Do More”,它通过提供简洁的API,使得开发者可以快速地实现复杂的页面交互。在API...

    jQuery实战中文版

    通过深入学习《jQuery实战中文版》,开发者不仅能掌握jQuery的基本用法,还能了解如何在实际项目中高效应用,提高开发效率,同时为向更高级的前端框架如React, Angular, Vue等打下坚实的基础。书中实例丰富,理论与...

    jquery学习资料

    4. **事件绑定**: 使用`on()`方法可以绑定各种事件,如`$("#button").on("click", function() {...})`为按钮添加点击事件。 5. **事件委托**: 当动态生成元素时,使用事件委托`$(document).on("event", "selector",...

    多選下拉列表框

    3. jQuery或Vue/React/Angular等框架:这些前端框架提供了更丰富的API和插件,使得多选下拉框功能更加便捷且可定制化。 二、自定义控件源码 在某些情况下,开发者可能需要自定义多选下拉列表框以满足特定需求。这...

    jquery-1.4.2

    2. **链式操作**: jQuery对象返回的是一个jQuery实例,允许连续调用方法,如`$("#myElement").addClass("highlight").fadeIn()`,这种链式操作极大地提高了代码的可读性。 3. **DOM操作**: jQuery 提供了一系列方法...

    JavaScript 类型检查库 types.js.zip

    在实际使用中,TypesJS 可以与各种开发模式和框架结合,如 MVC、React、Vue 或 Angular,帮助确保数据在传递过程中保持正确性。在进行单元测试和集成测试时,它也能作为验证输入和输出的重要工具。 总的来说,...

Global site tag (gtag.js) - Google Analytics