Javascript中的包装类型介绍_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的内部应该是这样实现的。

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包装类,这个也没什么注意事项的,就不说了。

 

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
包装类型
javascript 数据类型、javascript 类型转换、javascript 变量类型、javascript的数据类型、javascript 类型判断,以便于您获取更多的相关知识。

时间: 2024-08-02 15:41:36

Javascript中的包装类型介绍_javascript技巧的相关文章

JavaScript中的包装对象介绍_javascript技巧

javascript对象是一种复合值,它是属性或已命名的值的集合,通过符号"."来引用属性值,当属性值是一个函数的时候,我们称之为方法.我们看到字符串也具有属性和方法: 复制代码 代码如下: var s="hello,world!"; var word=s.substring(s.indexof("")+1,s.length); 字符串既然不是对象,为什么它又有属性呢,只要引用了字符串s的属性,javascript就会将字符串值通过调用new S

javascript基本包装类型介绍_javascript技巧

为了便于操作基本类型值,ECMAScript 提供了 3 个特殊的引用类型:Boolean.Number和 String.这些类型与其他引用类型相似,但同时也具有与各自的基本类型相应的特殊行为.实际上,每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而能够调用一些方法来操作这些数据. 一.基本包装类型概述 var box = 'Mr. Lee';//定义一个字符串 var box2 = box.substring(2);//截掉字符串前两位 alert(box2);//

JavaScript中的ArrayBuffer详细介绍_javascript技巧

相信每一个 javascript 学习者,都会去了解 JS 的各种基本数据类型,数组就是数据的组合,这是一个很基本也十分简单的概念,他的内容没多少,学好它也不是件难事情.但是本文着重要介绍的并不是我们往常看到的 Array,而是 ArrayBuffer. 我写的很多东西都是因为要完成某些特定的功能而刻意总结的,可以算是备忘,本文也是如此!前段时间一直在研究 Web Audio API 以及语音通信相关的知识,内容侧重于音频流在 AudioContext 各个节点之间的流动情况,而现在要摸清楚音频

JavaScript中的数值范围介绍_javascript技巧

JavaScript中所有的数字,无论是整数还是小数,其类型均为Number.在程序内部,Number类型的实质是一个64位的浮点数,这与Java中double类型的浮点数是一致的:因此,JavaScript中所有的数都是浮点数.遵循IEEE 754标准(浮点数算术标准),JavaScript所能表示的数值范围为正负1.7976931348623157乘以10的308次方,其最小所能表示的小数为正负5乘以10的负324次方,这两个边界值可以分别通过访问Number对象的MAX_VALUE属性和M

JavaScript中的数学运算介绍_javascript技巧

JavaScript中,数学运算可藉由两种操作来实现: 1.+.-.*./.%等操作符. 2.使用Math对象的计算函数.比如,用Math.pow(2,3)来计算2的3次方. 与Java不同,JavaScript中的数学运算不会抛出任何错误.计算结果的溢出.除以0.对负数进行开方这些操作都是合法的,其结果为JavaScript中的特殊值:正负Infinity(无限).正负0.NaN(非数): 1.正负Infinity.当计算结果比JavaScript所能表示的最大数(Number.MAX_VAL

JavaScript中的操作符==与===介绍_javascript技巧

JavaScript中,==与===操作符均可用于判断两个值是否相等:不同之处在于,如果进行判断的两个值类型不一致,===操作符会直接返回false,而==操作符则会在类型转换后再进行判断.详细的判断规则如下: ===操作符的判断规则 1.如果两个值的类型不一致,返回false. 2.如果两个值的类型一致,值一致,返回true.NaN是一个特例,NaN===NaN返回false. 3.如果两个值均为object类型,那么与Java一样,除非两者引用一致(reference指向同一个对象地址),不

JavaScript中的异常捕捉介绍_javascript技巧

与Java语言相同,JavaScript可以通过throw语句来抛出异常.与Java语言不同的是,JavaScript中可以通过throw语句抛出所有类型的值,而不仅止于抛出错误对象. 复制代码 代码如下: //Throw an Error object. try{   throw new Error("Message in Error Object"); }catch(e){     console.log(e);//Error: Message in Error Object }

JavaScript中的数组特性介绍_javascript技巧

与Java语言不同,JavaScript中的数组拥有三个特性:   1.无类型.数组的成员可以是任何类型,同一个数组也可以由很多不同类型的成员所组成. 2.长度可变.数组的长度是可以动态变化的,因此在JavaScript中不存在数组访问的越界问题. 3.不连续性.数组中成员的位置可以是连续的(0, 1, 2, 3-),也可以是不连续的.任何数组都有一个名为length的属性,在数组成员连续的情况下,length值与数组成员数目一致:当数组成员不连续时,length值要大于数组成员的数目.与连续的

Javascript中的call()方法介绍_javascript技巧

在Mozilla的官网中对于call()的介绍是: 复制代码 代码如下: call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. Call() 语法 复制代码 代码如下: fun.call(thisArg[, arg1[, arg2[, ...]]]) Call() 参数 thisArg 复制代码 代码如下: 在fun函数运行时指定的this值.需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为nul