原生函数

原生函数,即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. react 使用map 的时候提示 没有返回值

    因为map 的函数体里 用了if判断,在if块之外return 一个值就可以了 <div className="service-entry"> {!!services ...

  2. python学习笔记之——文件I/O

    1.print打印到屏幕 print "打印到屏幕" 2.读取读取键盘输入 (1)raw_input函数 raw_input([prompt]) 函数从标准输入读取一个行,并返回一 ...

  3. Base64编码和解码实现

    function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqr ...

  4. 让Oracle的 SHOW PARAMETER 命令显示隐藏参数

    转自 http://blog.csdn.net/staricqxyz/article/details/8624549 Find internal of "show parameter&quo ...

  5. CSS深入理解之float(HTML/CSS)

    float的设计初衷仅仅是:为了文字环绕效果 float的包裹与破坏 包裹:收缩.坚挺.隔绝(BFC) 破坏:父元素高度塌陷 <!DOCTYPE html> <html> &l ...

  6. UML 运用于开发过程——总结

    UML -- 统一的图形语言 用例图:需求捕获,测试依据类图:静态系统结构对象图:对象之间的关联构件图:构件之间的关联部署图:构建的物理部署 以上几种图的作用:描述系统结构 顺序图:捕获时间顺序协作图 ...

  7. leetCode题解 Student Attendance Record I

    1.题目描述 You are given a string representing an attendance record for a student. The record only conta ...

  8. python之mechanize模拟浏览器

    安装 Windows: pip install mechanize Linux:pip install python-mechanize 个人感觉mechanize也只适用于静态网页的抓取,如果是异步 ...

  9. 向服务器post或者get数据返回

    #region 向服务器端Get值返回 /// <summary> /// 向服务器端Get返回 /// </summary> ///<see cref="Au ...

  10. 基于dispatch_after封装YXTimer

    基于dispatch_after封装YXTimer 本人根据dispatch_after封装了一个定时器,支持block以及代理的方式来激活定时器,适用于对精度要求低,耗时短的地方,高端大气上档次,低 ...