浅析JavaScript语言类型

文章引用来源
极客时间版权所有: https://time.geekbang.org/column/article/78884

JavaScript中的每一个值都有它自己的类型,JavaScript规定了七种语言类型,他们是:

  • Undefined
  • Null
  • Boolean
  • String
  • Number
  • Symbol
  • Object

我们来谈谈这些类型的一部分关键知识点

Undefined和Null

思考这个问题:为什么有的编程规范要求用 void 0 代替 undefined?

undefined

  1. undefined类型表示未定义,它的值只有一个:undefined
  2. 任何变量赋值前都是undefined类型,值为undefined(而不是null)
  3. undefined是一个变量,而非一个关键字
  4. 需要表达这个值,可以用全局变量undefined,或者void运算

我们针对第三点来展开讨论,得出上述问题的答案。
undefined是一个变量,我们避免无意中被篡改,建议使用void 0来获取undefined(等价于void (0) )。我们一般不会把变量赋值为undefined,这样可以保证所有的值为undefined的变量,都是从未赋值的自然状态。

void运算

语法:void express 或者 void (express)
void运算符所做的是,执行表达式express,然后不论表达式是否有返回值,一律返回undefined。
void运算符如果使用括号,括号内必须有表达式,如果是void()会被视为执行名为void的函数,报错:SyntaxError。

死链接

我们有时候会用href="#"来表示死链接,但是这样会导致页面跳到最上面的视图,#包含了一个位置信息,默认的锚是#top,也就是网页的上端。在页面很长的时候会使用#来定位页面的具体位置,格式为:#+id

href=javascript:void(0)用来禁止a标签的跳转行为,javascript:是伪协议,表示url的内容通过JavaScript执行,void(0)表示不作任何操作。

<a href="javascript: void(0)" onClick="window.open()"><!--点击链接后页面不动,只打开链接-->
<a href="#" onClick="javascript: return false"><!--作用一样-->

Null

  1. 只有一个值,就是null
  2. 表示空值,是关键字,可以放心使用null关键字来获取null值。

String

  1. string的意义并非“字符串”,而是字符串的UTF16编码,字符串的最大长度实际上是受字符串编码长度影响的。最大长度:253 - 1 。
  2. 字符串是永远无法变更的,一旦字符串被构造出来,无法用任何方式改变字符串的内容。
  3. 字符串把每个UTF16单元当做一个字符来处理,所以处理非BMP(超出 U+0000 - U+FFFF 范围)的字符时,应该格外小心。这个设计继承自Java,现实中很少用到BMP之外的字符。

Number

思考下面问题:为什么在 JavaScript 中,0.1+0.2 不等于0.3

  1. number类型有264- 253+3 个值。
  2. 基本符合 IEEE 754-2008 规定的双精度浮点数规则,但也有额外几个表达的语言场景(比如不让除以0出错,引入了无穷大)。
    • NaN,占用了 9007199254740990,这原本是符合 IEEE 规则的数字
    • Infinity,无穷大
    • -Infinity,负无穷大
  3. 有+0和-0,加法运算中没有区别,但是除法要区分,“忘记检测除以 -0,而得到负无穷大”的情况经常会导致错误,而区分 +0 和 -0 的方式,正是检测 1/x 是 Infinity还是-Infinity
  4. 根据双精度浮点数定义,有效的整数范围是 -0x1fffffffffffff 至 0x1fffffffffffff,无法精确表示此范围外的整数。
  5. 根据双精度浮点数定义,非整数的Number类型无法用==来比较(三个等号也不行),正确的比较方法是用JavaScript提供的最小精度值:
console.log( 0.1 + 0.2 == 0.3);//false
//正确的比较方法
console.log( Math.abs(0.1 + 0.2 - 0.3) <= Number.EPSILON);//true

Symbol

  1. 表示独一无二的值,它是一切非字符串的对象key的集合。
  2. Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。

Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,但是即使描述相同,Symbol值也不相等。

let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false
  1. 一些标准中提到的 Symbol,可以在全局的 Symbol 函数的属性中找到。例如,我们可以使用 Symbol.iterator 来自定义 for…of 在对象上的行为:
var o = new Object

    o[Symbol.iterator] = function() {
        var v = 0
        return {
            next: function() {
                return { value: v++, done: v > 10 }
            }
        }        
    };

    for(var v of o) 
        console.log(v); // 0 1 2 3 ... 9

Object

问题:为什么给对象添加的方法能用在基本类型上?

  1. JavaScript对象的定义是“属性的集合”。属性分为数据属性和访问器属性,二者都是 key-value 结构,key可以是字符串或者Symbol类型。
  2. JavaScript的“类”仅仅是运行时对象的一个私有属性,而JavaScript中是无法自定义类型的
  3. Number、String 和 Boolean,三个构造器是两用的,当跟 new 搭配时,它们产生对象,当直接调用时,它们表示强制类型转换。
  4. Symbol 函数比较特殊,直接用 new 调用它会抛出错误,但它仍然是Symbol对象的构造器。
  5. 我们在原型上添加方法,都可以应用于基本类型。
    Symbol.prototype.hello = () => console.log("hello");

    var a = Symbol("a");
    console.log(typeof a); //symbol,a 并非对象
    a.hello(); //hello,有效

上述问题的答案是:运算符提供了装箱操作,它会根据基础类型构造一个临时对象,使得能够在基础类型上调用对应对象的方法。

装箱和拆箱

装箱转换:基本类型-->对象

  • 每一种基本类型,都在对象中有对应的类,装箱机制会频繁产生临时对象。
  • 使用object函数,可以显示调用装箱能力。
  • 每一类装箱对象皆有私有的 Class 属性,这些属性可以Object.prototype.toString 获取。在 JavaScript 中,没有任何方法可以更改私有的Class 属性,因此 Object.prototype.toString 是可以准确识别对象对应的基本类型的方法,它比 instanceof 更加准确。
  • call函数本身会产生装箱操作,需要配合typeof来区分基本类型还是对象类型。

拆箱转换:对象-->基本类型

  • ToPrimitive 函数,它是对象类型到基本类型的转换
  • 拆箱转换会尝试调用 valueOf 和 toString 来获得拆箱后的基本类型。如果valueOf 和 toString都不存在,或者没有返回基本类型,则会产生TypeError。

对象的运算

    var o = {
        valueOf : () => {console.log("valueOf"); return {}},
        toString : () => {console.log("toString"); return {}}
    }

    o * 2
    // valueOf
    // toString
    // TypeError

String的拆箱

    var o = {
        valueOf : () => {console.log("valueOf"); return {}},
        toString : () => {console.log("toString"); return {}}
    }

    o + ""
    // toString
    // valueOf
    // TypeError

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,997评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,603评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,359评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,309评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,346评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,258评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,122评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,970评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,403评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,596评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,769评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,464评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,075评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,705评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,848评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,831评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,678评论 2 354

推荐阅读更多精彩内容

  • JavaScript语言精粹 前言 约定:=> 表示参考相关文章或书籍; JS是JavaScript的缩写。 本书...
    微笑的AK47阅读 581评论 0 3
  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 1,052评论 0 1
  • 1 语义类标签(CSS部分) 1.1 定义  如section、nav、p,div,span,特点是视觉表现上互相...
    RingoD阅读 486评论 0 1
  • 寒枝冷院雨声切, 灯火连窗未有别。 茶气曛得身意暖, 流光只在此中歇。 七绝,平起首韵,新韵。
    一沓雪泥阅读 250评论 0 11
  • 昨天哭着看完了那部被名字耽误了的电影-三傻。 将近三小时的电影,有捧腹大笑, 更多的是泪流满面。 有多久没有这么痛...
    风似秋阅读 182评论 1 1