专栏首页前端一会《你不知道的JavaScript》:理解js原生函数

《你不知道的JavaScript》:理解js原生函数

本篇来看下js中的原生函数,也叫内置函数。主要包括如下:

  • String()
  • Number()
  • Boolean()
  • Array()
  • Object()
  • Function()
  • RegExp()
  • Date()
  • Error()
  • Symbol()

原生函数可以被当作构造函数来用,但其构造出来的对象与设想的有区别,以String()为例:

1var s = new String("abc");
2console.log(s);         // String {"abc"}
3console.log(typeof s);  // object
4console.log(Object.prototype.toString.call(s));     // [object String]

可以看到,变量s的打印结果不是设想的abc,而是String {"abc"}(这里不同浏览器不同版本可能显示有区别,我用的是chrome浏览器),typeof的结果显示这是一个对象object,而不是字符串。

通过构造函数(如 new String("abc"))创建出来的是封装了基本类型值(如"abc")的封装对象。

上例中有个打印结果是"[object String]",它是对象的一个分类。

所有typeof返回值为object的对象(比如数组、函数)都包含一个内部属性[[class]](可以将其看作一个内部的分类,而非传统的面向对象意义上的类)。这个属性无法直接访问,一般通过Object.prototype.toString.call()来查看:

1Object.prototype.toString.call([1, 2, 3]);      // [object Array]
2Object.prototype.toString.call(/[0-9]{1,2}/);   // [object RegExp]

上例中数组的内部[[class]]属性值是"Array",正则表达示的值是"RegExp"。

多数情况下,对象的内部[[class]]属性和创建该对象的内建原生构造函数相对应。

其他基本类型值(比如字符串、数值和布尔)的情况则有所不同,通常被称为"包装":

1Object.prototype.toString.call(42);         // [object Number]
2Object.prototype.toString.call("abc");      // [object String]
3Object.prototype.toString.call(true);       // [object Boolean]

上例中基本类型值被各自的封装对象自动包装,所以它们的内部[[class]]属性值分别为"String"、"Number"和"Boolean"。

对基本类型值进行手动对象封装是没有必要的,浏览器已对常见情况做了系统优化,直接使用封装对象来"提前优化"代码反而会降低执行效率,所以通常我们无需直接使用封装对象,最好的办法是让引擎自己决定什么时候应该用封装对象,开发者应优先使用基本类型值,而不是new String()这样手动创建封装对象。

既然有封装,那就有拆封。想要得到封装对象中的基本类型值,可以使用valueOf()函数:

1var a = new String("abc");
2var b = new Number(42);
3var c = new Boolean(true);
4
5console.log(a.valueOf());       // abc
6console.log(b.valueOf());       // 42
7console.log(c.valueOf());       // true

在需要用到封装对象中的基本类型值的地方会发生隐式拆封,具体过程就是强制类型转换的过程,这个在下篇中再细看。

除了基本类型值的对象封装,引用类型值也会进行对象封装,即通过相应的构造函数创建封装对象。但通常应尽量少用构造函数来创建它们,比如数组、对象和函数,直接以常量的形式创建即可。

1var a = new Array(1, 2, 3);     // 构造函数创建数组
2console.log(a);     // [1, 2, 3]
3
4var b = [4, 5, 6];              // 常量形式创建数组
5console.log(b);     // [4, 5, 6]

但相较于其他原生构造函数,Date()Error()则不一样,因为没有对应的常量形式来作为它们的替代。

创建日期对象必须使用new Date()Date()可以带参数,用来指定日期和时间,而不带参数的话则使用当前的日期和时间。Date()主要用来获得当前的Unix时间戳(从1970年1月1日开始计算,以秒为单位)。该值可以通过日期对象中的getTime()来获得。

创建错误对象主要是为了获取当前运行栈的上下文,栈上下文信息包含函数调用栈信息和产生错误的代码行号,以便于debug调试。错误对象通常与throw一起使用。

1function foo(x){
2    if(!x){
3        throw new Error("x is not defined.");
4    }
5}
6foo();      // Uncaught Error: x is not defined.

ES6中新增加了一个基本数据类型:Symbol(符号)。符号是具有唯一性的特殊值,用它来命名对象属性不容易导致重名。这个东西我没用过,也没什么觉得用的必要?没什么感受,就不举例了,有兴趣的可以自行去看。可能等我以后确实碰到用了,才会觉得这玩意很重要?到时再看吧。

除了上面的这些原生构造函数对象本身外,它们也都有各自的.prototype对象,即它们的原型对象,例如String.prototypeArray.prototype等,这些原型对象包含了其对应子类型所特有的行为特性。借助原型代理,所有的这些构造函数的"实例"对象都具有对应原型对象上的方法。

最后总结下,js为所有基本类型值提供了封装对象,它们也被称为原生函数(String、Number、Boolean等)。注意这些对象的首字母是大写的,与那些全小写的作用类型值名称以示区分。当要访问基本类型值的一些方法或属性时,如length或者String.prototype,js引擎会自动对该值进行封装(即用相应类型的封装对象来包装它)来实现对这些属性和方法的访问。

-------------------------------- 热门文章 --------------------------------

设计模式>>>

javascript设计模式一: 单例模式

javascript设计模式二:策略模式

javascript设计模式三:代理模式

javascript设计模式四:迭代器模式

javascript设计模式五:原型模式

javascript设计模式六:发布-订阅模式(观察者模式)

javascript设计模式七:模板方法模式

javascript设计模式八:职责链模式

javascript设计模式九:中介者模式

javascript设计模式十:装饰者模式

本文分享自微信公众号 - 前端小二(frontendxiao2),作者:小二君

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《你不知道的JavaScript》:深入了解js对象

    在js中,数据类型主要有:string、number、boolean、undefined、null、symbol和object。其中前6种是基本数据类型,最后种...

    前端_AWhile
  • 《你不知道的JavaScript》:生成器中的生产者和迭代器

    生成器的一种有趣用法是作为一种产生值的方式。而这也是“生成器”这个名称的最初使用场景。前面说过生成器函数每次调用都会创建一个迭代器实例。这个迭代器实例有next...

    前端_AWhile
  • 《你不知道的JavaScript》:js面向委托设计

    回顾下js原型继承,js版的继承与传统面向对象的继承的区别主要是不复制对象,而是通过对象的内置属性[[Propertype]]来关联需要“继承”的对象,这样当引...

    前端_AWhile
  • Anaconda —— 镜像管理

    Anaconda 的镜像默认情况下都是连接到过外网站,但是国外的下载镜像的速度非常慢,因此我们可以添加一些国内的下载镜像

    求和小熊猫
  • Python 15.2 POP3 收取邮

    收取邮件就是编写一个MUA作为客户端,从MDA把邮件获取到用户的电脑或者手机上。收取邮件最常用的就是POP3协议。

    py3study
  • 前端学习资源精选

    看视频学技术的缺点是学习效率比较低,优点是对初学者更友好。前端入门后,不推荐看视频。

    Joel
  • TimThumb——超好用的 PHP 略缩图裁剪插件

    TimThumb 是一个非常简洁方便的、用于裁图的 PHP 程序。只要给它设置一些参数,它就可以生成指定图片的缩略图甚至是直接给指定的网站截图。现在很多 Wor...

    闻语博客
  • Pekraut:新的RAT木马来袭,功能丰富

    最近新出现了一个功能丰富的RAT名为Pekraut,经过分析后推测可能来源于德国。

    FB客服
  • shell学习五常用命令echo printf test

    Shell 的 echo 指令与 PHP 的 echo 指令类似,都是用于字符串的输出。命令格式:

    用户2603479
  • 2.5D U-Net(MICCAI 2019)

    今天分享一篇发表在MICCAI 2019上的论文:Automatic Segmentation of Vestibular Schwannoma from T2...

    Minerva

扫码关注云+社区

领取腾讯云代金券