最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 搞懂手写new操作符背后的故事(基础)

    正文概述 掘金(搬砖小王)   2021-03-08   440

          大家好,我是搬砖小王,打算用故事叙述方式来写自己学习编程的经历,因为我自己是属于笨鸟类型的,所以写的东西过于基础和简单。为啥还要写?因为我坚信肯定还有更多的‘小王’还在不懂的苦海煎熬着。

    关于搞懂手写new操作符的故事

       搞懂手写new操作符的故事是发生在前些天水群,一个哥们在群里问了关于手写new操作符

                  搞懂手写new操作符背后的故事(基础)

    代码如下

    function  myNew(){
      const obj = new Object;
      //问的是[].shift.call(arguments)
      cosnt Con = [].shift.call(arguments);
      obj.__proto__= Con.prototype;
      const ret = Con.apply(obj,arguments)
      return typeof ret === "object" ? ret: obj
    }
    

          因为自己之前也有看过手写new操作符,所以我想不就是把arguments转化成数组吗?就草率的答了,但是越想越不对劲儿,要是转数组 Array.prototype.slice.call也可以啊,为什么不用呢,然后开启了小王烧笨脑模式,因为是深夜,所以没有问各路大佬,最后结合上下文,其他大牛的代码和shift方法,最后终于通了(此时已经是半夜2.30耗时1h)

    让我们一起回顾下菜鸟'小王'的心路历程吧~ 首先写下测试代码

    function Person(awsomeman){
     this.awsomeman= awsomeman
    }
    let testNew = myNew(Person,'搬砖小王')
    

        然后结合shift方法(返回数组第一个参数)

        再然后new的作用之一 通过new创建对象的[[Prototype]]连接到这个函数的prototype上

        所以关于[].shift.call(arguments)就解决啦~~~(开心五分钟)

    自问自答环节

    1. 还没有讲为啥Array.prototype.slice不行呢?

         答: 因为slice方法返回的是数组,在上述代码上下文里写不行

    2. 那你能不能来个slice版本的

    function myNew(ctor){
      let obj = Object.create(ctor.prototype);
      let arr = Array.prototype.slice.call(arguments,1)
      let res =  ctor.apply(obj,arr)
      return  res instancof Object ? res: obj 
    }
    

    3.人家的apply第二个参数直接写arguments,你为啥写转之后的arr

         答:因为我昨天晚上不知道apply方法 从es5就开始接受类数组参数了

    4.人家的是拿typeof判断类型,你为什么用instanceof?

         答:因为typeof不能很好的判断引用数据类型(可以判断基础数据类型除了null),instanceof本身是判断 xx是否为xx的实例(不能判断具体是属于哪种数据类型),具体判断数据类型的是Object.prototype.toString.call(你想判断的数据类型)

    5.为什么你没用__proto__ ,而是Object.create?

         答:因为不推荐使用__proto__ ,因为它从来没有被包括在ECMAScript语言规范中,只是浏览器中实现了它(呜呜不是嫡亲就是差点意思)

    面向“小王”环节(基础可跳)

    1.arguments是什么,为啥说他是类数组?

          答:arguments是对应于传递给函数的参数的类数组对象,为什么说是类数组呢,是因为他有索引(index)和长度(length)但却不是数组。参考会爆炸的女朋友和不会爆炸的女朋友

    2.说了半天new,new是作什么的,它很拽吗?

          答:new创建一个用户定义的对象类型的实例或者具有构造函数的内置对象的实例(读完就晕的定义)

    function Person (money){  this.money = money}const xw = new Person(0)console.log(xw.money) //output  0
    

       new 具体做了四件事也是上面手写的参考依据,如下:

    • 创建对象(就是这个{})
    • 链接该对象到另一个对象
    • 将我们新创建的对象作为this上下文
    • 如果该函数没有返回对象,则返回this

    3.最后一行代码?  :是啥?

        答:三元运算符,节省上下空间的,如果是truthly 执行?后面的语句,相反执行:后面的语句

    4.[].和上面的Array.prototype. 是一样的作用吗?

       答:是的

    Conclusion

          最近面试,发现自己学习的时候,不太会追求甚解,导致说什么东西都是讲个大概~这很不好,所以水了一篇关于搞懂手写new操作符的文章,方便自己加深印象也没准会帮助到另外一个自己更好的了解 new操作符的手写,因为我查阅资料的时候,发现各路大佬没有写很详细(我猜想大佬应该认为这些东西不用讲)导致我这样的小白,只能慢慢读懂。最后 欢迎大家的指正和探讨!!!


    起源地下载网 » 搞懂手写new操作符背后的故事(基础)

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元