您的位置：首页 > Web前端 > AngularJS

js、Jquery、AngularJs中的extend方法

2016-06-30 17:06 453 查看

1、js中的extend();

http://www.cnblogs.com/5201314/archive/2009/05/22/1487213.html

js虽然是脚本语言；但是同样支持与java、C#、C++等语言的继承；使用Object.extend()方法实现继承；

Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}

Prototype 对Object类进行的扩展主要通过一个静态函数Object.extend(destination, source)实现了JavaScript中的继承。从语义的角度, Object.extend(destination, source)方法有些不和逻辑, 因为它事实上仅仅实现了从源对象到目标对象的全息拷贝。不过你也可以这样认为：由于目标对象拥有了所有源对象所拥有的特性, 所以看上去就像目标对象继承了源对象(并加以扩展)一样。另外, Prototype对Object扩展了几个比较有用的静态方法, 所有其他的类可以通过调用这些静态方法获取支持；

Object.extend = function(destination, source) { // 一个静态方法表示继承, 目标对象将拥有源对象的所有属性和方法
for (var property in source) {
destination[property] = source[property];   // 利用动态语言的特性, 通过赋值动态添加属性与方法
}
return destination;   // 返回扩展后的对象
}

Object.extend(Object, {
inspect: function(object) {   // 一个静态方法, 传入一个对象, 返回对象的字符串表示
try {
if (object == undefined) return 'undefined'; // 处理undefined情况
if (object == null) return 'null';     // 处理null情况
// 如果对象定义了inspect方法, 则调用该方法返回, 否则返回对象的toString()值
return object.inspect ? object.inspect() : object.toString();
} catch (e) {
if (e instanceof RangeError) return '...'; // 处理异常情况
throw e;
}
},
keys: function(object) {     // 一个静态方法, 传入一个对象, 返回该对象中所有的属性, 构成数组返回
var keys = [];
for (var property in object)
keys.push(property);     // 将每个属性压入到一个数组中
return keys;
},
values: function(object) {   // 一个静态方法, 传入一个对象, 返回该对象中所有属性所对应的值, 构成数组返回
var values = [];
for (var property in object) values.push(object[property]); // 将每个属性的值压入到一个数组中
return values;
},
clone: function(object) {    // 一个静态方法, 传入一个对象, 克隆一个新对象并返回
return Object.extend({}, object);
}
});

2、Jquery中的extend();

http://api.jquery.com/jQuery.extend/

jq中目前最新版本的extend() 函数如下：

jQuery.extend( [deep ], target, object1 [, objectN ] )

参数的作用分别是：

//deep
Type: Boolean//如果为true则表示用递归方式进行深复制(If true, the merge becomes recursive (aka. deep copy).)

//target
Type: Object//目标对象(The object to extend. It will receive the new properties.)

//object1
Type: Object//复制源对象(An object containing additional properties to merge in.)

//objectN
Type: Object//多个复制源对象(Additional objects containing properties to merge in.)

当复制源的参数的个数是一个或者多个的时候；复制源的属性都会被添加到target对象中的去；如果参数为null或者undefined则会被忽略不进行复制操作；

如果只有一个参数；则表示目标对象被省略；这种情况下当前的jQ对象对假设自己是目标；通过这样做，您可以到 jQuery 命名空间添加新功能。这可用于希望将新方法添加到 JQuery 插件作者。

请牢记这个目标对象（第一个参数）将被修改，并还将从 $.extend() 返回。如果，然而，你想要保护两个原始对象，你可以通过传递一个空对象作为目标︰

var object = $.extend({}, object1, object2);

该方法的递归复制并不是默认的；默认不使用；只有显示地传递参数deep时才进行此项；没有定义的属性不会被复制；但是继承的属性会被复制；通过新的 MyCustomObject(args) 或如日期或正则表达式、内置 JavaScript 类型构造对象的属性不重新构造，并将作为普通对象显示在生成的对象或数组中。在进行深复制时；对象和数组进行扩展，但对象包装在基元类型，如字符串、布尔值和数字不会扩展。深部延伸周期性数据结构将导致错误。

Demo1：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.extend demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="log"></div>

<script>
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>

</body>
</html>

//{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

Demo2：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.extend demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="log"></div>

<script>
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};

// Merge object2 into object1, recursively
$.extend( true, object1, object2 );

// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>

</body>
</html>
//defaults -- {"validate":false,"limit":5,"name":"foo"}
//options -- {"validate":true,"name":"bar"}
//settings -- {"validate":true,"limit":5,"name":"bar"}

3、angularJs中的extend();

http://blog.csdn.net/itsonglin/article/details/47428955

同jq相似；angular中的扩展函数也可单个或者多个复制；angular.extends()方法的第一个参数是要被扩展的对象，后面可以传入一个或多个对象。

如果想要保存一个对象的状态，除了可以调用angular.copy()方法外，还可以把一个空对象｛｝作为第一个对象传入。

但要注意的是，angular.extends()是非递归的，也就是说：如果扩展的属性中有对象，那么二者同时引用同一个对象！

<!DOCTYPE html>
<html ng-app="extendApp">
<head>
<meta charset="UTF-8">
<title></title>

<script src="../js/angular.js"></script>
<script type="text/javascript">
angular.module("extendApp", [])
.controller("extendController", function($scope)
{
$scope.baby =
{
cry : function()
{
console.log("I can only cry!");
}
}

$scope.adult =
{
earn : function()
{
console.log("I can earn money!");
},

lover:
{
love:function()
{
console.log("I love you!");
}
}
}

$scope.human = {}

$scope.hehe = "hehe ";

$scope.extend = function()
{
angular.extend($scope.human, $scope.baby, $scope.adult);
$scope.human.cry();
$scope.human.earn();

<!-- 注意，这里修改了lover对象的love()方法，由于extends()方法不是深复制的，$scope.human
和$scope.adult其实引用的是同一个对象-->
$scope.human.lover.love = function()
{
console.log("I hate you!");
}

<!-- 这两行都会输出“I hate you !"，可怜的adult对象,
他把自己的lover分享给了human! -->
$scope.human.lover.love();
$scope.adult.lover.love();

}
});
</script>
</head>
<body>

<div ng-controller="extendController">

<button ng-click="extend()">点击我！</button>

</div>
</body>
</html>

console:

I can only cry!
I can earn money!
I hate you!
I hate you!

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： extend js-extend jquery angularjs 函数

相关文章推荐

新的分享

章节导航