资讯专栏INFORMATION COLUMN

JavaScript即学即用教程[1]-类型系统

toddmark / 528人阅读

摘要:如图反而,由于这些的都是继承自,所以原型链拐向了。因此这样一个实例,他顺着原型链是找到了如图选学内容如果我们刨根问底,去寻找和的根源的话,那这个问题又稍微有点复杂了。

基本类型

Number, Boolean, String, null, undefined

什么样的变量是 undefined

声明了变量却没赋值

未声明的变量

包装类型

其实js里面也有像java,c#里所谓的包装类型

var a = 123
var b = a.toString()

请问a既然是一个简单的基本类型,内存栈上的4个字节的数字类型,为什么有toString方法呢?
显然,这里也发生了包装,其过程大概是这样的:

var tmp = new Number(a)
var b = tmp.toString()
引用类型

JS中一切皆对象,我们可以统称为除了基本类型的这些其他元素,都叫做对象。因为他们都可以有自身的属性、自身的方法。

不过,从面向对象的角度来看,我们还是应该像学习Java那样,对js里的对象进行一下划分。我对js里的类型划分是这样的定义的:

除了基本类型,都是引用类型。引用类型有内置的如Date,Array,Object等,也有自己创建的类型如Person, Dog等等。

然而,js又是一个偏函数式的语言,那么,在js里函数承担什么角色呢。

它其实既能当做构造函数创建一个类的定义,如Dog

又能当做一个全局函数,来提供给别人使用。如parseInt。当然,全局其实也可以看做是window对象的一个方法:window.parseInt

函数又能当做一个对象的方法,像其他面向对象语言那样,如arr.slice()

函数还能作为参数传递,像很多函数式语言一样。如arr.map(function (item,index) {})

所以,JavaScript既能搞得来面向对象,又能充分发挥函数的灵活性,岂不美哉。

类型判断

typeof能够返回的结果只有: "undefined", "bollean", "number", "string","object","function"
可见,包含了基本类型的所有类型,除了null,null这种基本类型会被判定为"object",而其他所有引用类型也会被判定为"object"或"function".

因此,使用typeof可以用来判定基本类型中的 stirng, number, boolean, undefined

而遇到引用类型,则需要用更严格的方法来判定:

instanceof 可以判定一个引用类型是否属于某个类型。而所有引用类型其实都继承自Object,所以任何引用类型instanceof Object都是true。

我的总结

其实JavaScript中,就只有基本类型和其他类型。而其他类型都有一个公共的父类,叫做Function类型。哪怕Js中的Object,也是Function类型的一个实例。

Function类型的实例比较特殊,因为Function类型的实例还是一个Function,比如Object、Array、Date都是Function类型的实例。所以JS中,Function的实例,才相当于其他语言当中的类,class

重点来了

由于Array、Date,都是从Function继承而来,所以他们都会继承/享有Function.prototype上的东西。
而Array、Date的实例,都是从Array、Date继承而来,因此实例会继承Array或Date的prototype上的东西.
然而,实例却跟Function没有任何关系,因为js中继承是依靠原型继承的,Array.prototype跟Function扯不上关系,那Array的实例也跟Function没有半毛钱关系。如图:

反而, 由于Array、Date这些class的prototype都是继承自Object,所以原型链拐向了Object。因此var arr = new Array()这样一个实例,他顺着原型链是找到了Object.prototype. 如图:

选学内容

如果我们刨根问底,去寻找Object和Function的根源的话,那这个问题又稍微有点复杂了。

我们知道Object类型,是继承自Function.prototype的, Array是继承自Object.prototype。而Object.prototype继承自谁呢?

答案是Object.prototype是继承自null

而Function继承自自己的Function.prototype, 即:
Function.__proto__ == Function.prototype

Function.prototype 却不是一个对象,而是一个函数, 但奇特的是Function.prototype这个函数并没有prototype属性,只知道该函数继承自Object.prototype (所以这个函数怎么造出来的呢?竟然继承自一个对象,看来是这里揭示了为何js里一切皆对象把,连Function往上找源头都最终找到它继承自Object.prototype)

所以,最终的结果如图所示:

再上一张比较全的图:

这张图上少画了一笔,最上方的空函数,其__proto__也应该指向Object.prototype,。

所以,js中所有类型的根源,竟然是Object.prototype顶上的那个null....

而typeof null 又是 "object",所以在js当中,一切皆对象!!!

没了

本文同步发表在 知乎专栏 青檬前端 和 我的博客

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

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

相关文章

  • 即学即用系列一:纯函数

    摘要:于是就有了即学即用这个系列的文章。系列第一篇,就从纯函数开始,由于我是前端方向,所以就从语言中的纯函数说起。并行代码纯函数是健壮的,改变执行次序不会对系统造成影响,因此纯函数的操作可以并行执行。 最近一直在思考如何通过文章或者培训快速提升团队的编码能力,总结下来其实技术的学习分为两类:一种是系统性的学习,比如学习一门语言,学习一个开发框架,这更需要自己从入门到进阶再到实践一步步系统性的...

    Hanks10100 评论0 收藏0
  • 即学即用,轻松搞定这些选择器!(下)

    摘要:伪元素选择器和伪类一样,伪元素也用于向选择器添加特殊的效果。另外,伪元素前的是伪元素选择器的标识,不能省略。伪元素的使用在后面添加内容并设置该内容的背景颜色这是使用伪元素添加的内容设置添加的内容伪元素选择器可以是任意类型的选择器。 showImg(https://segmentfault.com/img/bVbkWXI?w=900&h=383); 在上一篇文章中,我们讲到基础选择器中的...

    caspar 评论0 收藏0

发表评论

0条评论

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