原生函数

原生函数,即JavaScript的内建函数(built-in function)。常用的原生函数有String()、Number()、Boolean()、Array()、Object()、Function()、RegExp()、Date()、Error()、Symbol()。


一:内部属性[[Class]]

相信大家都知道如下所示的这种使用new操作符来调用原生函数的方式:

var str1 = new String('abc');

这种方式在日常开发中很少会显式用到,但是隐式调用却很多,如下所示这种情况就是很典型的一种隐式调用:

var str2 = 'abc';
str2.split('');

就是当我们将一个基本类型的值要当做对象去用的时候,JS引擎会自动调用对应类型的內建函数将这个基本类型的值转为对象,这是一个隐性操作。

那么str1和str2有什么区别呢?我们用typeof试一试:

typeof str1;    // 'object'
typeof str2; // 'string'

通过这一点,我们就知道,调用new String()返回了一个String类型的对象。但是为什么typeof str1这个操作为什么没有返回'String'。是的,typeof并不能告诉你这个对象时什么类型,这就需要用到内部属性[[Class]]了。

所有typeof返回值为"object"的对象都包含一个内部属性[[Class]]。但是这个属性我们没办法直接访问,但可以间接访问:

Object.prototype.toString.call(str1);   // "[object String]"
Object.prototype.toString.call(str2); // "[object String]"

这样就很明了了,打印结果的"String"就是这个内部属性[[Class]]的值了。那么为什么str2也是一样的结果呢?是的,隐式转换了。


二:封装对象

这里所说的封装对象,其实就是使用new操作符调用原生函数生成的对象。在第一部分中说到隐式转换也提到了这部分的内容。

之所以需要封装对象,也很好理解。第一部分也有提到,基本类型时不具备方法的,方法都绑定在封装对象上。当然我们在开发中感受不到这个差异,是因为JS引擎在我们将一个存储着基本类型值得变量当做封装对象使用时自动生成了一个封装对象来调用对应方法,然后在调用完毕后就立即将这个对象销毁了。JS引擎针对这个过程做了优化,所以我们并不需要手动进行相关转换来提升性能。

谈到封装对象,就会涉及到封装对象的拆封问题,JS给我们提供了一个valueOf()方法,来获得封装对象的基本类型值:

var a = new String('abc');
a.valueOf(); // 'abc'

三:什么时候使用原生构造函数

在大多数情况下,都不推荐使用原生构造函数,除了Date()和Error()。其他原生函数都有相应的字面量形式可以简洁高效的声明。但是Date和Error没有。

《You dont know JS》原生函数的更多相关文章

  1. js原生函数一些封装

    这是一些js原生封装的函数,主要是为了兼容IE浏览器,如下 获取css样式 function getStyle(ele, prop) { if(window.getComputedStyle) { r ...

  2. js原生函数bind

    /*在javascript中,函数总是在一个特殊的上下文执行(称为执行上下文),如果你将一个对象的函数赋值给另外一个变量的话,这个函数的执行上下文就变为这个变量的上下文了.下面的一个例子能很好的说明这 ...

  3. 兼容主流浏览器的js原生函数封装

    1.获取和修改垂直滚动条的滚动距离 //获取滚动条滚动距离function getScrollTop(){ var fromTop=document.documentElement.scrollTop ...

  4. js原生函数

    arguments:代表所有的形参的集合: 可以通过arguments: cosole.log(arguments):打印所有参数 console.log(arguments[i]);可以通过访问下标 ...

  5. JS原生Date类型方法的一些冷知识

    ps:由于Date()是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别.本文测试未特别申明浏览器的情况下,均是指win7 x64+chrome 44.0.2403.155 ...

  6. js原生的url操作函数,及使用方法。(附:下边还有jquery对url里的中文解码函数)

    js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...

  7. 类型和原生函数及类型转换(二:终结js类型判断)

    typeof instanceof isArray() Object.prototype.toString.call() DOM对象与DOM集合对象的类型判断 一.typeof typeof是一个一元 ...

  8. js原生之函数

    1.函数作为参数传给其他函数:    data.sort(function(a,b){return a-b})    //关于数组的sort函数,其回调函数返回负值,a在b之前    //正值,b在a ...

  9. JS的原生函数

    常用的原生函数有: String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() 1 ...

随机推荐

  1. 由Leetcode详解算法 之 动态规划(DP)

    因为最近一段时间接触了一些Leetcode上的题目,发现许多题目的解题思路相似,从中其实可以了解某类算法的一些应用场景. 这个随笔系列就是我尝试的分析总结,希望也能给大家一些启发. 动态规划的基本概念 ...

  2. css-使不同大小的图片在固定大小的容器中居中

    HTML示例如下: <ul> <li class="imgbox"><img src="img1.jpg"></li& ...

  3. 前端模块化工具--webpack学习心得

    话说前头 webpack前段时间有听说一下,现在已经到了3.x的版本,自己没去接触.因为之前使用gulp来作为自己的项目构建工具.现在感觉gulp使用的趋势在减少.现在这段时间去接触了webpack, ...

  4. 专访周金可:我们更倾向于Greenplum来解决数据倾斜的问题

    周金可,就职于听云,维护MySQL和GreenPlum的正常运行,以及调研适合听云业务场景的数据库技术方案. 听云周金可 9月24日,周金可将参加在北京举办的线下活动,并做主题为<GreenPl ...

  5. 【转】ubuntu右键在当前位置打开终端

    ubuntu右键在当前位置打开终端   ubuntu增加右键命令:   在终端中打开   软件中心:   搜索nautilus-open-terminal安装   命令行:   sudo apt-ge ...

  6. shell_advanced

    1.輸入輸出,重定向,管道 2.<(cmd):>(cmd) 3.>:<:>>:<<:>>>:<<< 4.文本处理_1 ...

  7. 使用 Azure CLI 创建 Linux 虚拟机

    Azure CLI 用于从命令行或脚本创建和管理 Azure 资源. 本指南详细介绍了如何使用 Azure CLI 部署运行 Ubuntu 服务器的虚拟机. 服务器部署以后,将创建 SSH 连接,并且 ...

  8. 委托学习总结(二)匿名方法和lambda表达式

    之前总结了委托这个困惑着大多初学者的概念,继续来学习匿名方法和lambda表达式 (1)我们之前写了这样一段代码 //自定义一个委托 public delegate int Expression(in ...

  9. 下拉刷新对象RefreshObject

    下拉刷新对象RefreshObject 效果 说明 1. 分离了动画实现与刷新逻辑 2. 你可以根据自己的需要,设计自己的动画效果,你的动画只需要继承协议,实现协议里面的方法即可 3. 本设计方案是用 ...

  10. Linux基础优化和安全重点小结

    Linux基础优化和安全重点小结 1.不用root管理,以普通用户的名义通过sudo管理授权(/etc/sudoers)        2.更改默认的ssh服务端口,禁止root用户远程连接,甚至监听 ...