Javascript中的包装类型介绍

 更新时间:2015年04月02日 10:45:45   投稿:junjie  
这篇文章主要介绍了Javascript中的包装类型介绍,包装类型是指在执行代码的一瞬间把数据包装成引用类型,本文讲解的就是这个小知识,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

  最近不看犀牛书了,那本翻译的特烂而且好拗口,尤其是原型那块说的乱七八糟,后来经同事介绍,买了本js高级程序设计,然后就继续苦逼的看,不吐槽了,继续说说js中有新鲜感的包装类型。

 一:String

  说到String类型,蛮有意思,平时我们都是这样定义一个string类型,如下图:

但是在js中有一点非常特别,那就是string类型是属于基本类型,不属于引用类型,那就说明string的值是保存在“栈”上面的,而很多语言不是这样,比如C#,我觉得js不作为引用类型也是情有可原,毕竟它玩不了多线程,而C#中一个线程栈空间只分配1M,如果string在C#中是值类型的话,那就有爆栈的可能,而js却没有栈空间限制,所以也就不存在爆栈的情况了。

那么下一个问题来了,我们经常会对string进行一系列的操作,比如substring。如下图:

那刚才也说了,string的值是直接保存在栈上面的,那它怎么会有substring呢?按照官网的解释是这样的:这时候会使用String类型把s包装成引用类型。然后使用String类型的内部实现,正好String内部定义了substring方法,所以其实上面的代码在js的内部应该是这样实现的。

1
2
3
var s=new String("hello")
var r=s.substring(3)
s="hello"

可以看到,其实包装类型只是在执行代码的一瞬间,将s包装成了String引用类型,然后再调用String引用类型下面的substring方法,继而重新将“hello”值赋给s,最后的效果就是s="hello", r="lo",如果你仔细观察,你会发现,如果我给s动态的附一个属性,比如color,那么你再次读取color的话,是不会读取color值的,比如下图:

如果你懂了上面我说的原理,那么你对console.log(s.color)等于undefined 就不足以为奇了,我们可以看到,当我使用s.color="red"的时候,js引擎发现有调用属性的写法,会立即在后台动态让其包装成String类型,然后就给String下面新增了一个属性color=red,然后内部立刻会重新设置s的值为“hello”(s="hello"),接下来当你console.log来输出s.color时,js引擎判断又有调用属性的写法,再次new String("hello")了下,自然在这个新的String类型下面是没有color属性的,所以返回undefined了。

  刚才我也说了,这种包装操作是js在后台动态追加和删除的,将基本类型转化为了引用类型,那么两者有多大的区别呢?

<1>:这个不用说,一个栈,一个堆,如果你对C#比较了解,可以认为是一个box和unbox的操作。

<2>: 我们知道所有的引用类型都是继承自object,注意是引用类型,不要被面向对象搞混了,比如在C#中,所有的类型都是object子类,在js

   里面却不是这样,我们可以用instanceof看一下。

 

二:Boolean

    如果你懂得了String这个包装类,那么其实Boolean包装类跟它是一个原理,只不过在Boolean类型的使用中,是有一个注意事项的,我们知道一个引用类型,除非它是null或者undefined,否则它永远都是true,而这个Boolean类型正是做了这个box操作,如下图:

我们看到这个时候b已经不是单纯的基本类型了,而是引用类型,这时候就再也“与或”不出我想要的结果了。还有一个Number包装类,这个也没什么注意事项的,就不说了。

 

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

相关文章

  • 详解webpack进阶之插件篇

    详解webpack进阶之插件篇

    这篇文章主要介绍了详解webpack进阶之插件篇,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • js实现C#的StringBuilder效果完整实例

    js实现C#的StringBuilder效果完整实例

    这篇文章主要介绍了js实现C#的StringBuilder效果,以完整实例形式分析总结了js实现C#的StringBuilder效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • a标签click和href执行顺序探讨

    a标签click和href执行顺序探讨

    这篇文章主要介绍了a标签click和href执行顺序,需要的朋友可以参考下
    2014-06-06
  • JavaScript数据结构学习之数组、栈与队列

    JavaScript数据结构学习之数组、栈与队列

    这篇文章主要给大家介绍了JavaScript数据结构之数组、栈与队列的相关资料,文中对数组、栈与队列的使用方法进行了详细的总结,相信对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • js实现图片旋转的三种方法

    js实现图片旋转的三种方法

    这篇文章主要介绍了js实现图片旋转的三种方法,需要的朋友可以参考下
    2014-04-04
  • js clearInterval()方法的定义和用法

    js clearInterval()方法的定义和用法

    clearInterval()方法能够取消setInterval()方法设置的定时器,本文给大家详解clearInterval()方法的定义和用法,感兴趣的朋友参考下。
    2015-11-11
  • el-select数据过多懒加载的解决(loadmore)

    el-select数据过多懒加载的解决(loadmore)

    这篇文章主要介绍了el-select数据过多懒加载的解决(loadmore),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 微信小程序仿淘宝热搜词在搜索框中轮播功能

    微信小程序仿淘宝热搜词在搜索框中轮播功能

    这篇文章主要介绍了微信小程序—仿淘宝热搜词在搜索框中轮播功能的相关资料,需要的朋友可以参考下
    2020-01-01
  • JS实现用户注册界面功能

    JS实现用户注册界面功能

    这篇文章主要为大家详细介绍了JS实现用户注册界面功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 认识延迟时间为0的setTimeout

    认识延迟时间为0的setTimeout

    由 John Resig 的 How JavaScript Timers Work 可以知道,现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中,不会同步去执行,必须在完成一个任务后才开始另外一个任务。
    2008-05-05

最新评论