开发者社区> 唐玄奘> 正文

兼容值类型的JavaScript对象Clone方法

简介:
+关注继续查看
 对象的克隆是OOP中常用的一个方法,可是JavaScript的对象(各种数据类型都是)却没有提供一个Clone方法。上次我实现了一个Clone方法,可是一直有个小毛病,就是遇到"值类型"就晕菜了。你或许会觉得值类型也Clone,搞笑吧?可是JavaScript动态类型语言,其实你在调用时可能更本不知道它是什么类型,能克隆"值类型"将会使代码具有很好的兼容性。

    当然由于我们可以使用typeof方法获取对象的基本类型,然后一个switch,该干嘛干嘛不就搞定了吗?这个... 我希望我的Clone能不去判断每种具体的类型,而尽量使用JavaScript语言提供的机制来完成,这也是上次那个Clone方法不能Clone值类型的原因。

    昨天麻袋同学给出了一个很棒的解决值类型Clone问题的方法,使用代码:
None.gif objClone = new this.constructor(this.valueOf());
    代替我原来的:
None.gif objClone = new this.constructor();

    这样一来值类型Clone的问题迎刃而解,原理(麻袋解释的):
None.gif 对于 date, boolean, number 这三种基本的数据类型,执行 
None.gif var objClone = new this.constructor(); 
None.gif 的时候,得到的是默认值。而真实的值又没有属性可引用到,所以,只能在初始化的时候,以参数形式赋默认值。 
None.gif var objClone = new this.constructor(this.valueOf()); 

    不过后来麻袋发现它的代码处理Object的时候有问题,于是给出了:
None.gif var objClone; 
None.gif if ( this.constructor == Object ) 
None.gif    objClone = new this.constructor(); 
None.gif else 
None.gif    objClone = new this.constructor(this.valueOf()); None.gif

    不能克隆Object的理论依据(from Script56.chm):
    obj = new Object([value]) 
    参数
    obj 
    必选项。要赋值为 Object 对象的变量名。 
    value 
    可选项。任意一种 JScript 基本数据类型。(Number、Boolean、或 String。)如果 value 为一个对象,返回不作改动的该对象。如果 value 为 null、undefined,或者没有给出,则产生没有内容的对象。
 
    上面红字中的"对象",因该指的是:new Object()这样的实例,用代码来翻译就是:
None.gif  var obj = new Object();
None.gif  obj.asdf = 'asdf';
None.gif  obj2 = new Object(obj);
None.gif  alert(obj===obj2);

    结果是啥?true!

    我在原来那个Clone的测试中,设计我的测试代码的第一个数据类型时,出了点错误,我用Literal的语法方式写的obj其实是Object的实例。本来我是想测试用户定义类型,应该这么弄:
None.gif  function JSClass()
None.gif  {
None.gif      this.abc = 'abc';
None.gif      this.faint = ['f', 'a', 'i', 'n', 't'];
None.gif      this.toString = function()
None.gif      {
None.gif          return 'abc:' + this.abc + ', faint:[' + this.faint + ']';
None.gif      };
None.gif  }
None.gif  var jsClass = new JSClass();
None.gif  var classClone = jsClass.Clone();
None.gif  var classClone2 = jsClass.Clone();
None.gif  classClone2.abc = 'def';
None.gif  for ( var i=0 ; i < classClone2.faint.length ; ++i ) classClone2.faint[i] = '-'; 
None.gif  Render('JSclass', jsClass, classClone, classClone2, true);
 
     这个JSClass也是适合使用new this.consturctor(this.valueOf())这种方式来Clone,这时的参数不会影响它生成的对象的。

     结合麻袋的修改,兼容版的JavaScript Clone方法出来了emembarrassed.gif
None.gif // Authors Birdshome, 麻袋@博客园  
None.gif 
Object.prototype.Clone = function()
None.gif {
None.gif    var objClone;
None.gif    if ( this.constructor == Object ) objClone = new this.constructor(); 
None.gif    else objClone = new this.constructor(this.valueOf()); 
None.gif    for ( var key in this )
None.gif    {
None.gif        if ( objClone[key] != this[key] )
None.gif        { 
None.gif            if ( typeof(this[key]) == 'object' )
None.gif            { 
None.gif                objClone[key] = this[key].Clone();
None.gif            }
None.gif            else
None.gif            {
None.gif                objClone[key] = this[key];
None.gif            }
None.gif        }
None.gif    }
None.gif    objClone.toString = this.toString;
None.gif    objClone.valueOf = this.valueOf;
None.gif    return objClone; 
None.gif }    

    至于需要不要把Object的默认方法都copy一遍,我也说不清楚,就暂时copy这两个最容易被重写的吧,不然要列一大排地说。

    测试结果附图:
   JScriptClone2.gif
    测试代码:
ContractedBlock.gif    <script language="javascript">dot.gif</script>

本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript 创建对象的七种方式
JavaScript 创建对象的七种方式
76 0
JavaScript创建对象的方式!
  JavaScript创建对象的方式!JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点。
661 0
JavaScript 创建对象的方式
对象直接量 对象直接量是由若干 名/值 对的映射表,名值对中间用冒号分隔,名值对之间用逗号分隔,整个映射表用花括号括起来。属性名可以是JavaScript标识符也可以是字符串直接量(也可以是空字符串),属性的值可以是任意类型的JavaScript表达式,表达式的值即是改属性的值,该值可以是原始值,也可以是对象值。
695 0
[转载]javascript创建对象的几种方式
原文链接:http://qingfeng825.iteye.com/blog/1935648 1. 工厂方法:能创建并返回特定类型对象的工厂函数(factory function). function createCar(sColor) {    // 或者 var car = new Object;    var car = new Object();    // 对象属性    car.
763 0
JavaScript OOP 创建对象的7种方式
原文:JavaScript OOP 创建对象的7种方式 我写JS代码,可以说一直都是面向过程的写法,除了一些用来封装数据的对象或者jQuery插件,可以说对原生对象了解的是少之又少。所以我拿着《JavaScript高级程序设计 第3版》恶补了一下,这里坐下总结笔记,属于菜鸟级别,大神请直接无视。
688 0
JavaScript OOP 创建对象的7种方式
我写JS代码,可以说一直都是面向过程的写法,除了一些用来封装数据的对象或者jQuery插件,可以说对原生对象了解的是少之又少。所以我拿着《JavaScript高级程序设计 第3版》恶补了一下,这里坐下总结笔记,属于菜鸟级别,大神请直接无视。
784 0
javascript中创建对象的几种方式
原文:javascript中创建对象的几种方式 javascript中提供了通过Object构造函数或对象字面量方式来创建单个的对象,当我们想要创建很多对象的时候,简单的通过这两种方法就会产生大量的重复。
1060 0
javascript中创建对象的几种方式
前言:          随着web 2.0 的兴起(最具代表性的是Ajax技术了),javascript不再是程序员眼中的“玩具语言”。 编程在不断的简化,可是“用户体验、性能、兼容性、可扩展......”要求却在不断提高,随之涌现出Prototype、jQuery、ExtJs、Dojo等优秀的框架(类库),大大简化了web开发。
839 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载