美文网首页
菜鸟分析一下 Number String Object Arra

菜鸟分析一下 Number String Object Arra

作者: JosephScript | 来源:发表于2021-05-13 14:59 被阅读0次

    菜鸟一枚,之前大概知道原型链的概念,但是对于一些项目中经常用到的一些数据类型的形成,有着非常浓厚的兴趣,特别是之前面试的时候别人问 字符串的 toString 怎么来的,字符串上增加方法怎么增加。带着懵逼的心态开始自己在编译器以及浏览器开发者模式进行了console验证。

    首先我看了一下字符串的源头到底有多深

    console.log(''.__proto__)  // 输出: [String: '']
    console.log(''.__proto__.__proto__) // 输出: {}
    console.log(''.__proto__.__proto__.__proto__)  // 输出:null
    

    看到 null 我就知道应该是查到头了,然后回想了一下 null 在之前看的文章理论上是 Object 向上查找的结果,于是非常傻的猜测一下:

    console.log(''.__proto__.__proto__ === Object.prototype)
    

    然后:


    这个输出结果有意思,那种猜测的事情被验证为是对的的那种感觉,太tmd爽了。

    再次声明,本人底子不是很稳,这些知识点可能是大佬们做前端之前就必须会的一些东西,但是我的工作经历来说 这些不是必须知道的事情 也就没有去研究

    接着说,看到这个 Object 就是,想到了一些熟悉的朋友 String Number Array 等等,所以我感觉我好像 通过了自己的猜想慢慢的得出了一些基础知识:

    console.log(''.__proto__ === String.prototype) // true
    

    果然,所以其他的几个 我感觉应该也不难猜测了

    const num = 1
    console.log(''.__proto__ === String.prototype) // true
    console.log(num.__proto__ === Number.prototype) // true
    console.log([].__proto__ === Array.prototype) // true
    console.log({}.__proto__ === Object.prototype) // true
    

    这么些东西的记过看来吧,想起了文章开头写的:

    console.log(''.__proto__)  //  [String: '']
    console.log(''.__proto__.__proto__) // {}
    console.log(''.__proto__.__proto__.__proto__)  // null
    

    所以,应该大差不差的会有:

    console.log(String.prototype.__proto__ === Object.prototype) // true
    console.log(Number.prototype.__proto__ === Object.prototype) // true
    console.log(Array.prototype.__proto__ === Object.prototype) // true
    

    我现在大概知道,为什么要说 “万物皆是对象” 了。

    我这个人就是学东西 连着线和回忆学习的,看到了Object 又想起了 Object.keys Object.values hi类的 api,但是 Object 不是一个构造函数么?

    console.log(typeof Object) // function
    

    function 为什么可以直接以 , 的形式获得这些属性呢?

    带着我的疑问,我查阅了 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object,看的过程中看到了一句话:

    几乎自己把自己看成了一个傻子,人家官方都有这个解释,一句话把我刚才上面逼逼叨叨的一堆都解释了,可能这就是差别阅读吧,了解了一定东西的人和完全不了解的人看到同一句话的得到的东西是不同的,以前我不信,现在我信了,所以人家学霸是怎么来的 付出多少的努力也是我们看不到的。好了扯远了~
    咳咳 继续
    继续往下看看到了:

    等一下,静态方法 好熟悉的词 之前看 https://es6.ruanyifeng.com/#docs/function 还是哪里看到过这个词,然后通过百度中检索,大概是回忆起来了,就是 class 中定义的方法,如果没有实例化是不能访问到的,除非在方法前定义 static 关键字,这个方法就可以直接访问好像是。
    带着疑问 试一下

    class opp{
      static one(){
    
      }
      two(){}
    }
    
    console.log(opp.one) // [Function: one]
    console.log(opp.two) // undefined
    

    嗯对 没错 大概看到这里,我就知道了 Object 的一些方法 在 Object 内部大概是什么个形式了。

    不对 ,好像漏掉了好多东西,基础类型还有很多咧

    console.log(true.__proto__ === Boolean.prototype) // true
    console.log(Boolean.prototype.__proto__ === Object.prototype) // true
    console.log(function(){}.__proto__ === Function.prototype) // true
    console.log(Function.prototype.__proto__ === Object.prototype) // true
    console.log(undefined.__proto__) // Cannot read property '__proto__' of undefined
    // 嗯, 所以 undefined 是完全不存在的意思 或者是 未定义 
    
    

    完结 撒花
    玻璃心 不接受吐槽

    相关文章

      网友评论

          本文标题:菜鸟分析一下 Number String Object Arra

          本文链接:https://www.haomeiwen.com/subject/jxztjltx.html