资讯专栏INFORMATION COLUMN

JavaScript学习之对象拷贝

Aklman / 1116人阅读

摘要:对象拷贝可遍历属性浅拷贝简单的浅拷贝可以用,对存取器定义的对象也试用深拷贝属性描述对象的拷贝这是个浅拷贝深拷贝不可遍历属性对象的拷贝例如拷贝获得共同的原型,与是兄弟关系说明也继承了原型,同级别简洁化版

对象拷贝 可遍历属性

浅拷贝

</>复制代码

  1. if(typeof Object.prototype.copy != "function") {
  2. Object.prototype.copy = function () {
  3. var obj = {};
  4. for(var i in this) {
  5. this.hasOwnProperty(i) ? obj[i] = this[i] : false;
  6. //if(this.hasOwnProperty(i)) {
  7. // obj[i] = this[i];
  8. //}
  9. }
  10. return obj
  11. }
  12. }
  13. var o ={a : 1, b : 2,c : {c : 3}};
  14. console.log(o.copy());

简单的浅拷贝,可以用Object.assign,对存取器定义的对象也试用

</>复制代码

  1. var o ={a : 1, b : 2,c : {d : {get t() {return 123}}}};
  2. console.log(Object.assign(o));

深拷贝

</>复制代码

  1. if(typeof Object.prototype.deepCopy != "function") {
  2. Object.prototype.deepCopy = function () {
  3. var obj = {};
  4. for(var i in this) {
  5. if(this.hasOwnProperty(i)) {
  6. if(typeof this[i] === "object") {
  7. obj[i] = this[i].deepCopy()
  8. }
  9. else{
  10. obj[i] = this[i];
  11. }
  12. }
  13. //this.hasOwnProperty(i) ? obj[i] = this[i] : false;
  14. }
  15. return obj
  16. }
  17. }
  18. var o ={a : 1, b : 2, c : {d : {e : 4}}};
  19. var deepO = o.deepCopy();
  20. //o.c.d.e = 5;
  21. o.c.d = 3;
  22. console.log(deepO); //{a : 1, b : 2, c : {d : {e : 4}}}
  23. console.log(o); //{a : 1, b : 2, c : {d : 3}}
属性描述对象的拷贝

这是个浅拷贝

</>复制代码

  1. var o = {get c() {return 123}};
  2. if(typeof Object.prototype.extend != "function") {
  3. Object.prototype.extend = function () {
  4. var obj = {};
  5. for(var property in this) {
  6. if(this.hasOwnProperty(property)) {
  7. Object.defineProperty(
  8. obj,
  9. property,
  10. Object.getOwnPropertyDescriptor(this, property)
  11. );
  12. }
  13. }
  14. return obj;
  15. }
  16. }
  17. var cpo = o.extend();
  18. console.log(cpo);

深拷贝

</>复制代码

  1. var o = {a : 1, b : 2,c : {d : {get t() {return 123}}}};
  2. if(typeof Object.prototype.deepExtend != "function") {
  3. Object.prototype.deepExtend = function () {
  4. var obj = {};
  5. for(var property in this) {
  6. if(this.hasOwnProperty(property)) {
  7. if(typeof this[property] === "object") {
  8. obj[property] = this[property].deepExtend();
  9. }
  10. else{
  11. Object.defineProperty(
  12. obj,
  13. property,
  14. Object.getOwnPropertyDescriptor(this, property)
  15. );
  16. }
  17. }
  18. }
  19. return obj;
  20. }
  21. }
  22. var cpo = o.deepExtend();
  23. o.c.d = {get t() {return 456}};
  24. console.log(cpo); //{a : 1, b : 2,c : {d : {get t() {return 123}}}}
  25. console.log(o); //{a : 1, b : 2,c : {d : {get t() {return 456}}}}
不可遍历属性对象的拷贝

例如拷贝Object.prototype

</>复制代码

  1. if(typeof Object.prototype.allCopy != "function") {
  2. Object.prototype.allCopy = function () {
  3. //获得共同的原型,target与this是兄弟关系
  4. var target = Object.create(Object.getPrototypeOf(this));
  5. var property = Object.getOwnPropertyNames(this);
  6. property.forEach(function (elem) {
  7. Object.defineProperty(
  8. target,
  9. elem,
  10. Object.getOwnPropertyDescriptor(this, elem)
  11. )
  12. },this);
  13. return target;
  14. }
  15. }
  16. console.log(Object.prototype.allCopy());
  17. console.log(Object.allCopy().prototype); //说明也继承了原型,同级别
  18. //{allCopy: ƒ, constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, …}
  19. //{allCopy: ƒ, constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, …}

简洁化版

</>复制代码

  1. if(typeof Object.prototype.allCopy != "function") {
  2. Object.prototype.allCopy = function () {
  3. var target = Object.create(Object.getPrototypeOf(this), Object.getOwnPropertyDescriptors(this));
  4. return target;
  5. }
  6. }
  7. console.log(Object.prototype.allCopy());
  8. console.log(Object.allCopy().prototype);
  9. //{allCopy: ƒ, constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, …}
  10. //{allCopy: ƒ, constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, …}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98205.html

相关文章

  • JavaScript习之Object(下)相关方法

    摘要:它不区分该属性是对象自身的属性,还是继承的属性。那么我们要遍历对象所有属性,包括继承以及不可遍历的属性,用加原型遍历实现类似的用递归 Object静态方法 Object自身方法,必须由Object调用,实例对象并不能调用 Object.getPrototypeOf() 作用是获取目标对象的原型 function F() {}; var obj = new F(); console.lo...

    amuqiao 评论0 收藏0
  • JavaScript习之JSON对象

    摘要:原始类型的值只有四种字符串数值必须以十进制表示布尔值和不能使用和。字符串必须使用双引号表示,不能使用单引号。数组或对象最后一个成员的后面,不能加逗号。 JSON对象 补充记录一下,有些方法很需要熟练记忆的 JSON对象的规定 JSON对象对值有严格的规定 复合类型的值只能是数组或对象,不能是函数、正则表达式对象、日期对象。原始类型的值只有四种:字符串、数值(必须以十进制表示)、布尔值和...

    banana_pi 评论0 收藏0
  • jQuery源码习之extend

    摘要:源码学习之用于合并对象,可选择是否深复制。尽管官方文档明确指出第一个参数是的调用情况并不支持,但是这个版本的源码中,判断第一个参数的类型虽有限定是类型,但却未对其值真假加以限定。调用方式源码和指向同一个函数,在函数内部,对调用情况进行区分。 jQuery源码学习之extend $.extend用于合并对象,可选择是否深复制。使用时,第一个参数为合并后的对象。如果要进行深拷贝,则参数1为...

    quietin 评论0 收藏0
  • React习之漫谈React

    摘要:事件系统合成事件的绑定方式合成事件的实现机制事件委派和自动绑定。高阶组件如果已经理解高阶函数,那么理解高阶组件也很容易的。例如我们常见的方法等都是高阶函数。对测试群众来说,从质量保证的角度出发,单元测试覆盖率是 事件系统 合成事件的绑定方式 `Test` 合成事件的实现机制:事件委派和自动绑定。 React合成事件系统的委托机制,在合成事件内部仅仅是对最外层的容器进行了绑定,并且依赖...

    darkbug 评论0 收藏0
  • Javascript习之继承

    摘要:继承是面向对象编程语言中的一个重要的概念,继承可以使得子类具有父类的属性和方法或者重新定义追加属性和方法等。但是在中没有类的概念,是基于原型的语言,所以这就意味着对象可以直接从其他对象继承。 继承是面向对象编程语言中的一个重要的概念,继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等。但是在Javascript中没有类的概念,是基于原型的语言,所以这就意味着对象可以直接...

    CHENGKANG 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<