JavaScript手撕深拷贝、instanceof的原理

        

        在写代码之前,我们首先要了解一些JavaScript的基础知识。

JavaScript有哪些数据类型?

        JavaScript有7种数据类型:Number,Boolean,String,null,undefined,Symbol,Object。前6种是值类型数据,最后的Object是引用类型数据,这里要注意的是,Array和Function并不是基本数据类型哦,它本质也是一种对象,不信各位可以直接在控制台打印Array instanceof Object,说明Array是基于Object衍生出来的类型。

typeof操作符能识别哪些数据类型?

  • typeof能识别所有值类型,但是这里有一个需要特别注意,typeof null 返回的‘object’,并不会返回null。
  • typeof能识别引用类型数据,但都统一返回‘object’(Function除外)。
  • typeof还能识别Function,这个是除基本数据类型之外额外能识别的类型,但Function不是基本数据类型哦。

instanceof的原理

        typeof无法帮我们区分数组和对象,那该怎么办呢?使用过程中数组和对象还是有很大不同的,这时,instanceof就能帮助我们区分数组和对象,具体的使用方式是,A instanceof B,A是一个对象,B是一个构造方法,instanceof的作用就是检查B的原型是否出现在A的原型链上,如果是,返回true,不是就返回false,知道了这些原理,我们就可以简单封装一个函数来模拟instanceof的功能。

function instance_of(A, B) {
  const pro= B.prototype; // 构造函数的原型
  while(true) {
    if (A=== null) {
      return false;
    }
    if (A=== pro) {
      return true;
    }
    // 沿着原型链查询
    A= A.__proto__; 
  }
}

手撕JavaScript深拷贝

        废话不多说,直接上代码把,要是看不懂,说明JavaScript一些基础知识掌握不牢,建议再复习下变量,原型链等知识。

function deepClone(obj) {
    //递归前第一件事,检查返回条件:不是引用类型,无需继续深入拷贝,返回
    if(typeof obj !== 'object' || typeof obj === null)
        return obj
    let res
    //判断拷贝的是数组,还是对象
    if(obj instanceof Array)
        res=[]
    else
        res={}
    //遍历数组或对象
    for (const key in obj) {
        //for..in会遍历到原型上的属性,用hasOwnProperty()过滤掉
        if (obj.hasOwnProperty(key)) {
            res[key]=deepClone(obj[key])
        }
    }
    return res
}

  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论

打赏作者

喵星人咩野

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值