资讯专栏INFORMATION COLUMN

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

toddmark / 449人阅读

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

基本类型

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
  • Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWi

    摘要:但是这里写死了,我们要让这个自定义通用一些,可以定义一个必传参数文本内容,修改如下可以看到我们定义了一个变量,通过构造函数让外部传进来。具体更多构造函数写法可以查看官网。自定义使用我们以之前的为例进行讲解。 前言 上一篇我们对 Flutter UI 有了一个基本的了解。 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWi...

    王军 评论0 收藏0
  • Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明

    摘要:即学即用环境搭建这一篇我们通过的一个来了解下。就是对应设备第二列所显示的字符串。同时设备会自动更新如下命令行运行热重载功能体现通过运行的项目。其中一个是由于网络原因导致每次运行都要下载版本因此耗时巨大。 前言 上一篇文章我们搭建好了 Flutter 的开发环境。 Flutter 即学即用——01 环境搭建 这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter。 开发系统...

    animabear 评论0 收藏0
  • Flutter 即学即用系列博客——04 Flutter UI 初窥

    摘要:坏处就是视觉干扰。这个是自动产生的,不可删除。通过的修改初步熟悉界面的写法。通过一个具体的小控件初窥的写法和使用方法。表示完全不透明。更多阅读即学即用系列博客环境搭建即学即用系列博客一个纯说明即学即用系列博客在旧有项目引入 前面三篇可以算是一个小小的里程碑。 主要是介绍了 Flutter 环境的搭建、如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter。 这...

    番茄西红柿 评论0 收藏0

发表评论

0条评论

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