「JS」类型系统

作者: Rella7 | 来源:发表于2018-10-10 14:35 被阅读0次

「JS」类型系统
媒体查询
JavaScript-变量、值与类型
## JS初识
【js类型判断】包装类以及isArray,instanceof,
JS判断移动设备系统类型
TypeScript 笔记
Js基础知识-手动实现深拷贝
TypeScript
JS变量类型，存储方式以及特点

标准类型
- 原始类型（值类型）
  - Undefined undefined
  - Null null
  - Boolean true
  - String 'hello'
  - Number 123
- 引用类型（对象类型）
  - Object
- 原始类型和引用类型的区别
对象类型（构造器类型）
- 内置对象类型
- 普通对象类型
- 自定义对象类型
变量转换表
类型识别
- typeof
- Object.prototype.toString
- constructor
- instanceof

javascript 类型系统可以分为标准类型和对象类型（构造器类型），进一步标准类型又可以分为原始类型和引用类型，而对象类型又可以分为内置对象类型、普通对象类型、自定义对象类型。

javascript-variable-type.jpg

标准类型

标准类型共包括了6个分别是：

原始类型（值类型）：

Undefined undefined

Undefined 值：undefined 出现场景：
- 以声明为赋值的变量 var obj;
- 获取对象不存在的属性 var obj = {x: 0}; obj.y;
- 无返回值函数的执行结果 function f(){}; var obj = f();
- 函数参数没有传入 function f(i){console.log(i)}; f();
- void(expression)
Null null

Null 值：null 出现场景：
- 获取不存在的对象 document.getElementById('not-exist-element')
Boolean true

Boolean 值：true, false 出现场景：
- 条件语句导致的系统执行的隐式类型转换 if(隐式转换){}
- 字面量或变量定义 var bool = true;
String 'hello'

String 值：字符串出现场景：
- var str = 'Hello, world!';
Number 123

Number 值：整型直接量，八进制直接量（0-），十六进制直接量（0x-)，浮点型直接量出现场景：
- 1026
- 3.14
- 1.2e5
- 0x10

引用类型（对象类型）：

Object

Object 值：属性集合出现场景：

var obj = {name: 'Xinyang'};

var obj = {};
<!-- 原始类型变量的包装类型如下 -->
var bool = new Boolean(true);
var str = new String("hello");
var num = new Number(1);
var obj0 = new Object();

原始类型和引用类型的区别：

原始类型储存在栈（Stack）中储存变量的值，而引用类型在栈中保存的是所引用内容储存在堆（Heap）中的值。类似于指针的概念，引用类型并非储存变量真实数值而是地址，所以对已引用类型的复制其实只是复制了相同的地址而非实际的变量值。

对象类型（构造器类型）

对象类型（构造器类型）：Boolean Date Number Object Array Date Error Function RegExp

变量转换表

Value	Boolean	Number	String
undefined	false	NaN	"undefined"
null	false	0	"null"
true	true	1	"true"
false	false	0	"false"
''	false	0	''
'123'	true	123	'123'
'1a'	true	NaN	'1a'
0	false	0	"0"
1	true	1	"1"
Infinity	true	Infinity	"Infinity"
NaN	false	NaN	'NaN'
{}	true	NaN	"[object Object]"

类型识别

typeof：
- 可以是标准类型（Null 除外）
- 不可识别具体的对象类型（Function 除外）
Object.prototype.toString：
- 可是识别标准类型及内置对象类型（例如，Object, Date, Array）
- 不能识别自定义对象类型

constructor：

可以识别标准类型（Undefined/Null 除外）
可识别内置对象类型
可识别自定义对象类型

function getConstructiorName(obj) {
  return obj && obj.constructor && obj.constructor.toString().match(/function\s*([^(]*)/)[1];
}
getConstructiorName([]) === "Array"; // true

instanceof：
- 不可判别原始类型
- 可判别内置对象类型
- 可判别自定义对象类型

下面我们写一个HTML来检验一下：

<html>
<head>
    <title>JavaScript类型判断</title>
    <meta charset="utf-8">
    <style type="text/css">
        .red{
            background-color:red;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        /* Standard Type */
        var a;    //undefined
        var b = document.getElementById("no_exist_element"); //null
        var c = true;    //Boolean
        var d = 1;    //Number
        var e = "str";     //String
        var f = {name : "Tom"};    //Object

        /* Object Type */
        var g = new Boolean(true);    //Boolean Object
        var h = new Number(1);    //Number Object
        var i = new String("str");    //String Object
        var j = new Object({name : "Tom"}); //Object Object
        var k = new Array([1, 2, 3, 4]);    //Array Object
        var l = new Date();    //Date Object
        var m = new Error();
        var n = new Function();
        var o = new RegExp("\\d");

        /* Self-Defined Object Type */
        function Point(x, y) {
          this.x = x;
          this.y = y;
        }

        Point.prototype.move = function(x, y) {
          this.x += x;
          this.y += y;
        }

        var p = new Point(1, 2);

        /* Use the Prototype.toString() to judge the type */
        function type(obj){
            return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
        }
    </script>
    <table border="1" cellspacing="0">
        <tr>
            <td></td>
            <td>typeof</td>
            <td>toString</td>
            <td>constructor</td>
            <td>instanceof</td>
        </tr>
        <tr>
            <td>undefined</td>
            <td><script type="text/javascript">document.write(typeof a)</script></td>
            <td><script type="text/javascript">document.write(type(a))</script></td>
            <td class="red"><script type="text/javascript">document.write(a.constructor)</script></td>
            <td class="red"><script type="text/javascript">document.write(a instanceof "undefined")</script></td>
        </tr>
        <tr>
            <td>Null</td>
            <td class="red"><script type="text/javascript">document.write(typeof b);</script></td>
            <td><script type="text/javascript">document.write(type(b));</script></td>
            <td class="red"><script type="text/javascript">document.write(b.constructor);</script></td>
            <td class="red"><script type="text/javascript">document.write(b instanceof "null");</script></td>
        </tr>
        <tr>
            <td>Boolean</td>
            <td><script type="text/javascript">document.write(typeof c);</script></td>
            <td><script type="text/javascript">document.write(type(c));</script></td>
            <td><script type="text/javascript">document.write(c.constructor);</script></td>
            <td class="red"><script type="text/javascript">document.write(c instanceof "boolean");</script></td>
        </tr>
        <tr>
            <td>Number</td>
            <td><script type="text/javascript">document.write(typeof d);</script></td>
            <td><script type="text/javascript">document.write(type(d));</script></td>
            <td><script type="text/javascript">document.write(d.constructor);</script></td>
            <td class="red"><script type="text/javascript">document.write(d instanceof "number");</script></td>
        </tr>
        <tr>
            <td>String</td>
            <td><script type="text/javascript">document.write(typeof e);</script></td>
            <td><script type="text/javascript">document.write(type(e));</script></td>
            <td><script type="text/javascript">document.write(e.constructor);</script></td>
            <td class="red"><script type="text/javascript">document.write(e instanceof "string");</script></td>
        </tr>
        <tr>
            <td>Object</td>
            <td><script type="text/javascript">document.write(typeof f);</script></td>
            <td><script type="text/javascript">document.write(type(f));</script></td>
            <td><script type="text/javascript">document.write(f.constructor);</script></td>
            <td class="red"><script type="text/javascript">document.write(f instanceof "object");</script></td>
        </tr>
        <tr><td colspan="5">-----------------------</td></tr>
        <tr>
            <td>Boolean Object</td>
            <td class="red"><script type="text/javascript">document.write(typeof g);</script></td>
            <td><script type="text/javascript">document.write(type(g));</script></td>
            <td><script type="text/javascript">document.write(g.constructor);</script></td>
            <td><script type="text/javascript">document.write(g instanceof Boolean);</script></td>
        </tr>
        <tr>
            <td>Number Object</td>
            <td class="red"><script type="text/javascript">document.write(typeof h);</script></td>
            <td><script type="text/javascript">document.write(type(h));</script></td>
            <td><script type="text/javascript">document.write(h.constructor);</script></td>
            <td><script type="text/javascript">document.write(h instanceof Number);</script></td>
        </tr>
        <tr>
            <td>String Object</td>
            <td class="red"><script type="text/javascript">document.write(typeof i);</script></td>
            <td><script type="text/javascript">document.write(type(i));</script></td>
            <td><script type="text/javascript">document.write(i.constructor);</script></td>
            <td><script type="text/javascript">document.write(i instanceof String);</script></td>
        </tr>
        <tr>
            <td>Object Object</td>
            <td class="red"><script type="text/javascript">document.write(typeof j);</script></td>
            <td><script type="text/javascript">document.write(type(j));</script></td>
            <td><script type="text/javascript">document.write(j.constructor);</script></td>
            <td><script type="text/javascript">document.write(j instanceof Object);</script></td>
        </tr>
        <tr>
            <td>Array Object</td>
            <td class="red"><script type="text/javascript">document.write(typeof k);</script></td>
            <td><script type="text/javascript">document.write(type(k));</script></td>
            <td><script type="text/javascript">document.write(k.constructor);</script></td>
            <td><script type="text/javascript">document.write(k instanceof Array);</script></td>
        </tr>
        <tr>
            <td>Date Object</td>
            <td class="red"><script type="text/javascript">document.write(typeof l);</script></td>
            <td><script type="text/javascript">document.write(type(l));</script></td>
            <td><script type="text/javascript">document.write(l.constructor);</script></td>
            <td><script type="text/javascript">document.write(l instanceof Date);</script></td>
        </tr>
        <tr>
            <td>Error Object</td>
            <td class="red"><script type="text/javascript">document.write(typeof m);</script></td>
            <td><script type="text/javascript">document.write(type(m));</script></td>
            <td><script type="text/javascript">document.write(m.constructor);</script></td>
            <td><script type="text/javascript">document.write(m instanceof Error);</script></td>
        </tr>
        <tr>
            <td>Function Object</td>
            <td><script type="text/javascript">document.write(typeof n);</script></td>
            <td><script type="text/javascript">document.write(type(n));</script></td>
            <td><script type="text/javascript">document.write(n.constructor);</script></td>
            <td><script type="text/javascript">document.write(n instanceof Function);</script></td>
        </tr>
        <tr>
            <td>RegExp Object</td>
            <td class="red"><script type="text/javascript">document.write(typeof o);</script></td>
            <td><script type="text/javascript">document.write(type(o));</script></td>
            <td><script type="text/javascript">document.write(o.constructor);</script></td>
            <td><script type="text/javascript">document.write(o instanceof RegExp);</script></td>
        </tr>
        <tr><td colspan="5">-----------------------</td></tr>
        <tr>
            <td>Point Objct</td>
            <td class="red"><script type="text/javascript">document.write(typeof p);</script></td>
            <td class="red"><script type="text/javascript">document.write(type(p));</script></td>
            <td><script type="text/javascript">document.write(p.constructor);</script></td>
            <td><script type="text/javascript">document.write(p instanceof Point);</script></td>
        </tr>
    </table>
</body>
</html>

执行的结果如下：

javascript-type-judge.png

其中红色的单元格表示该判断方式不支持的类型。

「JS」类型系统
标准类型原始类型（值类型）Undefined undefinedNull nullBoolean trueStri...
媒体查询
使用JS判断设备类型（判断设备使用iOS还是Android系统）的示例，代码如下：
JavaScript-变量、值与类型
1.关于JS类型的几点说明： JS是动态类型+弱类型的语言； JS的变量、属性在运行期决定类型； JS存在隐式类型...
## JS初识
## JS初识 # js初识 # js注释 # 变量 # 变量的命名 JS数值的类型 # Number类型 # S...
【js类型判断】包装类以及isArray,instanceof,
谈到JS的类型判断，首先我们先了解JS当中的数据类型内容。 JS数据基本类型和引用类型基本类型：undefine...
JS判断移动设备系统类型
TypeScript 笔记
TypeScript 是 JS 的超集，强调变量类型。让JS更加接近强类型语言基础类型相比于原始JS，多了 a...
Js基础知识-手动实现深拷贝
本文将手动实现引用类型的深拷贝关于值类型与引用类型可阅读下方文章：JS基础类型直通车：Js基础知识-变量类型Js基...
TypeScript
是一门基于JS之上的编程语言，它解决了JS类型系统的不足，通过使用TypeScript可以大大提高代码的可靠程度（...
JS变量类型，存储方式以及特点
1.JS变量类型 JS变量类型分为基本类型和引用类型基本类型：基本类型有Undefined，String，Num...