# 浅谈基本包装类型

js中的基本类型有Null , Undefined, String,Number,Boolean,Symbol等, 其中为了便于操作基本类型值,ECMAScript还提供了String,Number,Boolean 这三个特殊的引用类型.这就是我们今天的主角——基本包装类型.

我们先来看下面的代码,思考下代码的运行结果:

var s = 'str'
s.name = 'string'
console.log(s.name)  // undefined
1
2
3

这里s.name为什么结果不是'string'而是undefined呢? 这样因为每当我们读取一个基本类型值的时候,后台会自动创建一个对应的基本包装类型的对象,代码如下:

var s = 'str'  // string 基本类型
s.name = 'string' // 下面{}中的是执行到这里的时候,后台自动执行的操作伪代码
{
    var _s = new String('str')  // 通过包装对象创建出一个和基本类型值相同的对象
    _s.name = 'string'  // 给这个对象赋值
    _s = null  // 临时变量被销毁
}
console.log(s.name) // 下面{}中的是执行到这里的时候,后台自动执行的操作伪代码
{
    var _s = new String('str')
    _s.name  // _s这个对象没有name这个属性,返回undefined
    _s = null  // 临时变量被销毁
}
1
2
3
4
5
6
7
8
9
10
11
12
13

实际上,这些后台的操作基本就是一瞬间的事情,这也是基本包装类型和引用类型的区别:生存期. 引用类型创建的对象,在执行期间是一直存在于内存当中的,而基本包装类型只存在一瞬间 我们再来看下面的例子:

var s = 'str'
var t = 'str'.substr(1,2)
// {}中的是在后台自动执行的伪代码
{
    var _s = new String('str')  // 创建一个String基本包装类型
    var t = _s.substr(1,2)  // 而_s是有substr()这个内置方法的,返回方法结果
    _s = null  // // 临时变量被销毁
}
console.log(t)  // tr
1
2
3
4
5
6
7
8
9

从上可以得出一个基本包装类型的执行过程:

  • 创建对应类型的一个实例
  • 在实例上调用指定的方法或者属性
  • 销毁这个临时实例

那么我们如何才能给基本类型添加属性或方法呢? 在基本包装类型的原型下添加即可:

String.prototype.getLen = function(){
  return this.length
}
var s = 'str'
console.log(s.getLen())  // 3
1
2
3
4
5

总结: 正是因为有了基本包装类型,所以JS中的基本类型可以被当作对象来访问.