浅谈基本包装类型

12/28/2020 JS

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

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

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

这里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 // 临时变量被销毁
}

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

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

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

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

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

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

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

    希望像星光一样闪烁
    文雀