原生函数

原生函数,即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. Nib加载的方式实现自定义TableView

    实现的效果 实现原理: 通过在主界面中用Bundle 的LoadNib的方式进行自定义窗体文件加载并渲染界面 实现步骤 Step One 创建TableViewCell 窗体 Step Two 定义接 ...

  2. 换算rem的宽度和高度不生效 chrome字体最小为12px

    现在很多前端都用rem来单位元素和字体大小 一般的设置是 html{ font-size:62.5%; } 换算来源 1rem = 16px 10/16 = 0.625 这样10px 就等于了1rem ...

  3. ifconfig命令无法找到,提示bash: ifconfig: command not found

    问题就是题目那样,具体解决方法截图如下: 分析问题 1.whereis ifconfig 看一下这个命令在哪个目录下 2.echo $PATH 看一下该目录是否在路经下,注意lunux下是完全区分大小 ...

  4. Spring Boot--01错误处理

    package com.smartmap.sample.ch1.controller.view; import java.io.IOException; import java.util.Collec ...

  5. Android布局属性

    LinearLayout布局: 线性版面配置,在这个标签中,所有元件都是按由上到下的排队排成的.在这个界面中,我们应用了一个 LinearLayout的布局,它是垂直向下扩展的 ,所以创建的布局XML ...

  6. Oracle EBS 更新客户地点

    --更新客户地点 declare x_return_status ); x_msg_count NUMBER; x_msg_data ); x_profile_id NUMBER; l_locatio ...

  7. javascript版format函数,方便实现复杂字串连接

    javascript版format函数,方便实现复杂字串连接 String.prototype.format = function () { var args = arguments; console ...

  8. AVAudioPlayer简易封装

    AVAudioPlayer简易封装 [说明] AVAudioPlayer简易封装,仅仅支持播放,暂停,停止,暂停时候带有渐隐效果,自己用,没有参考价值. [源码] https://github.com ...

  9. Spring @Autowired注解在非Controller/Service中注入为null

    参考:https://blog.csdn.net/qq_35056292/article/details/78430777 问题出现: 在一个非controller/service类中,我需要注入Co ...

  10. javascript excel

    js做的 excel ,  http://handsontable.com/  js keyCode对照表  http://dwz.cn/Lknbz