JavaScript Object的extend是一个常用的功能

通常在函数里面给了参数对象的默认值，这个时候就需要通过extend来把传入的参数覆盖进默认参数,如：
代码:


代码如下:

giant.ui.imageshow = function(options) {
this.opts = $.extend({}, giant.ui.imageshow.defaults, options);
}
giant.ui.imageshow.defaults = {
id:"imageshow",
isAuto:true,
speed:3000
};

Jquery 的框架中给了一个extend工具：
jQuery.extend(target,obj1,[objN])
用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
用于简化继承。
Extend one object with one or more others, returning the original, modified, object.
This is a great utility for simple inheritance.
返回值--Object
参数
target (Object) : 待修改对象。
object1 (Object) : 待合并到第一个对象的对象。
objectN (Object) : (可选) 待合并到第一个对象的对象。
但框架中内置的这个extend有明显的缺陷，那就是不能继承对象中的对象。还是举一个例子来说明：
代码:


代码如下:

var obj1 = {},
var obj2={name:"karry",email:"karry@a.com",tel:{homeTel:"158255",officeTel:"02112585"}}
obj1 = $.extend({},obj1 ,obj2 );

结果obj1 只有name 和email属性，而有与tel本身就是一个对象，tel里面的homeTel和officeTel没有继承过去。
我的目标就是实现这种对子对象的子属性也一起复制(继承)的功能，不管他嵌套有多深。
首先我们看看这个方法的参数，有三个参数，target 目标对象，source 源对象，deep 是否复制(继承)对象中的对象，如果deep为true则继承所有，为false则和jquery的实现方式一样，不会继承子对象。
代码:


代码如下:

Object.extend = function(target, /*optional*/source, /*optional*/deep) {}

我只把第一个参数target设为必选参数，而source 和deep都设为可选参数。这样就会遇到一个问题，如果使用的时候只传如两个参数，怎么确认第二个参数是 对应的source还是deep?所以我需要判断传入的第二个参数的类型。
代码:


代码如下:

target = target || {}; //target默认为空
var sType = typeof source;
//如果第二个参数的类型为未定义或者为布尔值
if( sType === 'undefined' || sType === 'boolean' ) {
deep = sType === 'boolean' ? source : false;
source = target; //把target赋值给source，
target = this; //这里的this指的是Object
}

有人可能对最后面的两行代码有疑问，我的处理方式是这样的。如果target和source两个参数都存在，且source不是布尔值，那么，就把source对象的内容复制给target.否则，把target对象复制给Object对象。deep默认为false.
为了安全起见，我们还需要判断一下，如果souce满足了上面的条件，但它不是Object对象，或者它是一个Function对象(这涉及到一些其他的问题)，我们也没办法对其进行复制的。这个时候我们把souce设为空的Object,也就是并不进行复制操作。
代码:


代码如下:

if( typeof source !== 'object' && Object.prototype.toString.call(source) !== '[object Function]' )
source = {};

注：Function对象在执行typeof 操作时 也会返回“object”,但我们没办法对其进行正确的复制（至少在我这个方法里面不行），所以我必须剔除出来。
下面就是循环进行复制了。这里利用了递归。
代码:


代码如下:

var i=1,option;
// 外层循环就是为了把依次修改options，先设为target,后设为source
while(i <= 2) {
options = i === 1 ? target : source;
if( options != null ) {
//内层循环复制对应的属性
for( var name in options ) {
var src = target[name], copy = options[name];
if(target === copy)
continue;
//如果deep设为true,且该属性是一个对象
if(deep && copy && typeof copy === 'object' && !copy.nodeType)
//递归
target[name] = this.extend(src ||(copy.length != null ? [] : {}), copy, deep);
else if(copy !== undefined)
target[name] = copy;
}
}
i++;
}

这里利用了递归的方式，依次复制对象里面的对象。这个功能就做完了。全部代码如下：
代码:


代码如下:

/*
* @param {Object} target 目标对象。
* @param {Object} source 源对象。
* @param {boolean} deep 是否复制(继承)对象中的对象。
* @returns {Object} 返回继承了source对象属性的新对象。
*/
Object.extend = function(target, /*optional*/source, /*optional*/deep) {
target = target || {};
var sType = typeof source, i = 1, options;
if( sType === 'undefined' || sType === 'boolean' ) {
deep = sType === 'boolean' ? source : false;
source = target;
target = this;
}
if( typeof source !== 'object' && Object.prototype.toString.call(source) !== '[object Function]' )
source = {};
while(i <= 2) {
options = i === 1 ? target : source;
if( options != null ) {
for( var name in options ) {
var src = target[name], copy = options[name];
if(target === copy)
continue;
if(deep && copy && typeof copy === 'object' && !copy.nodeType)
target[name] = this.extend(src ||
(copy.length != null ? [] : {}), copy, deep);
else if(copy !== undefined)
target[name] = copy;
}
}
i++;
}
return target;
};

使用示例：
代码:


代码如下:

var source = {id:1, name:'Jack Source'}, target = {name:'Jack Target', gender:1,tel:{homeTel:"158255",officeTel:"02112585"}};
var newObj1 = Object.extend(target, source);

赞 (0)

相关推荐

  • 原生js实现复制对象、扩展对象 类似jquery中的extend()方法

    jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,具体实例如下: 现有3个对象字面量: var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999}; 实现目标: 复制o1对象,把 o2,o3的对

  • JavaScript 用cloneNode方法克隆节点的代码

    JavaScript 用cloneNode方法克隆节点的代码

    很多时候我们会用for 来生成多个结构相同的节点结构,这样我们需要写很多createElement.setAttribute.appendChild 等代码. 但其实我们只需要有一个html 的模板,就可以用cloneNode 方法对已有的节点进行克隆,包括其子节点. 以下是cloneNode 方法原型: newElement oldElement.cloneNode(bool deep); 这个方法只有一个参数deep,布尔值,如果为true,则克隆oldElement 这个及其子节点,否则只

  • javascript中clone对象详解

    开发中,打断对象间的引用关系,只想下个副本的情况无处不在,clone一个对象就在所难免了. JavaScript中,简单的方法就是用JSON函数,将对象stringify成字符串,再parse成一个新对象.要么就是从网上搜个代码,开源社区里面clone的代码还是有不少的. 代码虽然可以找得到,但,东西永远是别人的,动手学着码永远是个不变的主题. 自己写了两个克隆的函数: cloneOwn:克隆自定义对象的自有属性,不包括继承的属性,属性可以是基本数据类型和数组,自定义的对象,可以制定要克隆的属性

  • JavaScript 深层克隆对象详解及实例

    JavaScript 深层克隆对象详解及实例

     JavaScript 深层克隆对象 今天做项目,有个需求需要用到深层克隆对象,并且要求在原型链上编程 于是心血来潮索性来复习一下这个知识点,在网上找了相应的知识, 克隆对象,这名词看着高大上,其实也没什么,便是拷贝一个长的一模一样的对象 也许有初学的小伙伴在想,那还不简单么,so easy var obj1 = {name: 'payen'}; var obj2 = obj1; 这可并不是克隆对象,obj1和obj2根本就是同一个对象, 他俩指向同一个内存地址空间,拿到了同样的一个小房子 这是

  • js克隆对象、数组的常用方法介绍

    Ext的两种克隆的方法: 可以克隆对象.数据等:var newJson = Ext.clone(json); 只能克隆数组:var newJson = Ext.Array.clone(json); JQuery的方法: 深复制[可以迭代]:var newJson = jQuery.extend(true,{}, json); 浅复制[不能迭代]:var newJson = jQuery.extend({}, json); var newJson = $.map(json,function (n)

  • javascript克隆对象深度介绍

    js一般有两种不同数据类型的值: 基本类型(包括undefined,Null,boolean,String,Number),按值传递: 引用类型(包括数组,对象),按址传递,引用类型在值传递的时候是内存中的地址. 克隆或者拷贝分为2种: 浅度克隆:基本类型为值传递,对象仍为引用传递. 深度克隆:所有元素或属性均完全克隆,并于原引用类型完全独立,即,在后面修改对象的属性的时候,原对象不会被修改. 复制代码 代码如下: function cloneObject(obj){ var o = obj.c

  • JS扩展类，克隆对象与混合类实例分析

    本文实例讲述了JS扩展类,克隆对象与混合类.分享给大家供大家参考,具体如下: 1.类扩展 /* EditInPlaceField类 */ /* 扩展函数 */ function extend(subClass, superClass) { var F = function() {}; F.prototype = superClass.prototype; subClass.prototype = new F(); subClass.prototype.constructor = subClass

  • Javascript Object.extend

    既然是类,那么就有抽象类,具体类,类的继承,同时,类的成员可以有实例成员和静态成员.下面来看一下prototype是怎么做到这些的. 先看prototype中的以下的代码: 复制代码 代码如下: var Abstract = new Object(); Object.extend = function(destination, source) { for (property in source) { destination[property] = source[property]; } retu

  • JavaScript验证图片类型(扩展名)的函数分享

    前台调用如下 复制代码 代码如下: OnClientClick="return fucCheckJpgAndGif(form1.File1.value);" --其中File1为上传文件控件 函数代码: 复制代码 代码如下: function fucCheckJpgAndGif(strFileName) {    if (strFileName != "") {        var strtype = strFileName.substring(strFileNa

  • JavaScript Object的extend是一个常用的功能

    通常在函数里面给了参数对象的默认值,这个时候就需要通过extend来把传入的参数覆盖进默认参数,如: 代码: 复制代码 代码如下: giant.ui.imageshow = function(options) { this.opts = $.extend({}, giant.ui.imageshow.defaults, options); } giant.ui.imageshow.defaults = { id:"imageshow", isAuto:true, speed:3000

  • JavaScript实现创建自定义对象的常用方式总结

    本文实例讲述了JavaScript实现创建自定义对象的常用方式.分享给大家供大家参考,具体如下: 1. 对象字面量方式 对象字面量方式是创建自定义对象的首选模式,简单方便. var per = { name:'zhangsan', age:25, job:'html', sayName:function(){ alert(this.name); } } 缺点:使用同一个接口创建很多对象,会产生大量的重复代码.比如我想再创建一个per1对象,我就得把上面的代码再重新写一遍,改变不同的属性值. 2.

  • JavaScript实现继承的6种常用方式总结

    目录 1.原型链继承 2.借用构造函数继承 3.组合继承(经典继承) 4.原型式继承 方法一:借用构造函数 方法二:Object.create() 5.寄生式继承 6.寄生组合式继承 7.ES6.Class实现继承 JavaScript想实现继承的目的:重复利用另外一个对象的属性和方法. 1.原型链继承 让一个构造函数的原型是另一个类型的实例,那么这个构造函数new出来的实例就具有该实例的属性. 当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依

  • Ajax中数据传递的另一种模式 javascript Object Notation思想（JSON）

    Ajax是"异步javascript和XML"的缩写已经众所周知,然而虽然XML是看上去的重要组成部分,它却不是必须的.一位资深的软件工程师Douglas Crock ford 开发了一个内建于 javascript 的数据格式,称为javascript 对象表示(JSON,javascript Object Notation),意思是直接使用Ajax对象来传递信息,可以读作"Jason". 1. 什么是 JSON JSON概念很简单,JSON 是一种轻量级的数据格

  • 删除Javascript Object中间的key

    这个也不会,回家种田去吧你 复制代码 代码如下: delete thisIsObject[key] or delete thisIsObject.key 顺便我们来谈谈delete的用法 几个礼拜前, 我有了个机会去翻阅Stoyan Stefanov的 Object-Oriented Javascript 一书. 这本书在亚马逊上拥有很高的评价(12篇评论, 5颗星), 所以我很好奇地想看看它到底是不是那么值得推荐的一本书, 于是我开始阅读函数的那章. 我非常欣赏这本书解释事物的方式, 例子们被

  • javascript object oriented 面向对象编程初步

    用 new Object() 来创建对象在javascript里有几种创建对象的方法,在不同的场合可用不同的方法.最简单的就是用 new 操作符,例如: 复制代码 代码如下: <script language="javascript" type="text/javascript">  <!-- person = new Object()  person.name = "Tim Scarfe"  person.height = &

  • 深入剖析JavaScript:Object类型

    在JavaScript中,引用类型是一种数据结构,用于将数据和功能组织在一起. 对象是某个特定引用类型的实例.对象的创建方式: var person = new Object(); 上面的例子创建了Object引用类型的一个新实例,然后把该实例保存在变量person中. 创建对象有构造函数和对象字面量两种方式. 1.构造函数方式 使用new操作符后跟Object构造函数. var p = new Obejct(); p.name = "萧萧弈寒"; p.age = 18: 2.对象字面

  • javascript中对Date类型的常用操作小结

    javascript中对Date类型的常用操作小结 /** 3. * 日期时间脚本库方法列表: 4. * (1)Date.isValiDate:日期合法性验证 5. * (2)Date.isValiTime:时间合法性验证 6. * (3)Date.isValiDateTime:日期和时间合法性验证 7. * (4)Date.prototype.isLeapYear:判断是否闰年 8. * (5)Date.prototype.format:日期格式化 9. * (6)Date.stringToD

  • JavaScript中发出HTTP请求最常用的方法

    JavaScript具有很好的模块和方法来发送可用于从服务器端资源发送或接收数据的HTTP请求.在本文中,我们将介绍一些在JavaScript中发出HTTP请求的流行方法. Ajax Ajax是发出异步HTTP请求的传统方式.可以使用HTTP POST方法发送数据,并使用HTTP GET方法接收数据.我们来看看发送GET请求.我将使用JSONPlaceholder,这是一个免费的在线REST API,适用于以JSON格式返回随机数据的开发人员. 要在Ajax中进行HTTP调用,您需要初始化一个新

随机推荐