JS案例:继承和深复制

简介: JS案例:继承和深复制

继承:

// 寄生组合式继承(圣杯)
      Father.prototype.name = 'Hello' //在Father类中添加一个name属性
      function Father() {} //构造Father类
      function Son() {} //构造Son类
      var inherit = (function () { //新建一个立即执行函数,(类似雅虎网站的继承写法)
        function F() {} //使用闭包产生私有函数
        return function (father, son) { //返回继承函数
          F.prototype = father.prototype; //私有函数取出父类的原型
          son.prototype = new F(); //实例化私有函数,并将对象赋给子类的原型
          son.prototype.superClass = father; //自定义子类的超类等于父类
          son.prototype.constructor = son; //将子类的构造函数指向自己,否则是父类(因为原型链上的constructor是父类)
        }
      }())
      inherit(Father, Son) //调用函数
      Son.prototype.age = 'World' //改变子类的原型(目的:测试父类原型与子类原型是否绑定)
      var son = new Son(); //实例化子类对象
      var father = new Father(); //实例化父类对象
      console.log(son, father)
      console.log(son.name, father.name); //此时父子类都有该属性。打印(Hello Hello)
      console.log(son.age, father.age) //子类独有属性,父类无此属性。打印(World undefined)

深复制:

简易版:

var obj = {
        a: 1,
        b: 'hello',
        c: function () {
          console.log(this.a, this.b);
        },
        d: [1, 2, 3, 4, 'a', 'b', false],
        e: {
          a: 11,
          b: '11',
          c: {
            arr: [5, 4, 1, 2, 3],
            obj: {
              z: 'hello',
              y: 'world'
            }
          }
        }
      }
      var obj1 = {}
      obj1 = JSON.parse(JSON.stringify(obj))
      console.log(obj1);

1.webp.jpg


进阶版:(缺点:遇到不可枚举项时无法遍历,对象中有set和get时只会将结果输出)

var obj = {
        a: 1,
        b: 'hello',
        c: function () {
          console.log(this.a, this.b);
        },
        d: [1, 2, 3, 4, 'a', 'b', false],
        e: {
          a: 11,
          b: '11',
          c: {
            arr: [5, 4, 1, 2, 3],
            obj: {
              z: 'hello',
              y: 'world'
            }
          }
        },
        f: null,
        g: undefined,
        set count(val) {
          this.f = val;
        },
        get count() {
          return this.f
        }
      }
      var obj1 = {}
      function copyObj(org, tag) { //org是原对象(obj),tag是复制后的对象(obj1)
        var tag = tag || {}; //初始化要复制的对象
        for (var key in org) { //遍历对象
          if (typeof org[key] === 'object' && org[key] !== null) { //若遍历的每一项非空且为对象,则为引用值,则继续下一步
            if (org[key].toString() === '[object Object]') {//若引用值.toString等于[object Object],说明该值数据类型为对象
              tag[key] = {};
            } else {//否则为数组
              tag[key] = [];
            }
            copyObj(org[key], tag[key])//再次执行函数
          } else { //若每一项除了typeof为obj以外的值都是原始值,直接赋值即可
            tag[key] = org[key];
          }
        }
        return tag; //递归结束后返回对象
      }
      copyObj(obj, obj1)
      obj.e.c.obj.z = 'world';//改变复制后的值观察复制后的对象是否发生改变
      obj.e.c.obj.y = 'hello';
      console.log(obj, obj1);

1.webp.jpg

终极版深复制:(解决进阶版的问题)

      var obj = {
        a: 1,
        b: 'hello',
        c: function () {
          console.log(this.a, this.b);
        },
        d: [1, 2, 3, 4, 'a', 'b', false],
        e: {
          a: 11,
          b: '11',
          c: {
            arr: [5, 4, 1, 2, 3],
            obj: {
              z: 'hello',
              y: 'world'
            }
          }
        },
        f: null,
        g: undefined,
        set count(val) {
          this.f = val;
        },
        get count() {
          return this.f
        }
      }
      var obj1 = {}
      function copyObj(org, tag) {
        var tag = tag || {}; //初始化要复制的对象
        var name = Object.getOwnPropertyNames(org); //获取该对象的属性名,以字符串数组返回
        for (var i = 0; i < name.length; i++) { //遍历对象
          var desc = Object.getOwnPropertyDescriptor(org, name[i]); //获取对象的属性描述对象,无引用关系,返回另一个对象,改变时原对象不发生变化(复制的关键)
          if (typeof desc.value === 'object' && desc.value !== null) { //若遍历的每一项非空且为对象,则为引用值,则进行下一步
            var obj = desc.value.toString() === '[object Object]' ? {} : []; //判断是数组还是对象
            Object.defineProperty(tag, name[i], { //设置对象属性值,前三个的值是返回true或false
              configurable: desc.configurable, //是否可删除可替换
              enumerable: desc.enumerable, //是否可枚举可遍历
              writable: desc.writable, //是否可写入
              value: obj //对象的值
            });
            copyObj(desc.value, obj); //再次执行函数
          } else {
            Object.defineProperty(tag, name[i], desc); //否则直接将该对象的属性值进行复制(原始值)
          }
        }
        return tag;
      }
      copyObj(obj, obj1)
      obj.e.c.obj.z = 'world'; //改变复制后的值观察复制后的对象是否发生改变
      obj.e.c.obj.y = 'hello';
      console.log(obj, obj1);

1.webp.jpg


相关文章
|
6天前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
3月前
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
15天前
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种,每种方式都有其优缺点和适用场景。在实际开发中,我们需要根据具体的需求和情况选择合适的继承方式,以实现代码的复用和扩展。
|
9天前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
9天前
|
JavaScript 前端开发 开发者
js实现继承怎么实现
【10月更文挑战第26天】每种方式都有其优缺点和适用场景,开发者可以根据具体的需求和项目情况选择合适的继承方式来实现代码的复用和扩展。
23 1
|
2月前
|
自然语言处理 JavaScript 前端开发
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式,包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等,并探讨了每种模式的实现方式及其优缺点。
一文梳理JavaScript中常见的七大继承方案
|
2月前
|
JavaScript 前端开发
js之class继承|27
js之class继承|27
|
2月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
|
2月前
|
JavaScript 前端开发 开发者
JavaScript 类继承
JavaScript 类继承
19 1
|
1月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战