【JavaScript】-- 基本包装类型(含笔试题)

在ES中，数据分成基本数据类型和引用数据类型，而基本包装类型尽管不属于这两种的任意一者 但却与这两者息息相关。

基本包装类型就是把简单数据类型包装成为复杂数据类型，使其像引用数据类型一样有其内置的方法以便对数据进行更多的操作。
为了方便操作，ES提供了三个特殊引用类型（基本包装类型）：Boolean、Number、String

与引用数据类型一样，基本包装类型也拥有内置方法可以对数据进行操作。

首先先看一个例子:

var str = 'taylor';
var res = str.length;
console.log(res);  // 6

按理来说，对象才有属性和方法，也就是说复杂数据类型才有属性和方法。

那么这里的 str 是一个简单数据类型，怎么会有length属性呢？

这就是我们要了解的·基本包装类型：

每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型对象，从而可以调用一些方法操作这些数据。

在我们执行第二行操作时，在js内部会自动为我们进行以下的步骤：

1. 使用一个临时变量保存基本包装类型实例，把简单数据类型包装为复杂数据类型
2. 对实例调用我们想要的方法
3. 销毁这个临时变量

// 用一个临时变量保存基本数据类型实例，把简单数据类型包装为复杂数据类型
var temp = new String('taylor');
// 对实例调用方法
res = temp.length();
// 销毁这个临时变量
temp = null;

 那我们还要知道，Js什么时候会自动创建一个对应的基本包装类型呢？

当代码进入到读取模式，即当前执行的代码是否是为了获取他的值。每当读取一个基本类型的值，也就是当我们需要从内存中获取到它的值时（这个访问过程称为读取模式），这时，后台就会自动创建一个基本包装类型的对象。

引用类型与基本包装类型有什么不同呢？ 

引用类型与基本包装类型的主要区别就是对象的生存期：

• 引用类型：使用new操作符创建的引用类型实例，在执行流离开当前作用域之前一直都保存在内存中

• 基本包装类型：只存在一行代码的执行瞬间，然后立即销毁

这就意味着我们不能给基本包装类型添加属性和方法。 

怎么才能给基本类型添加方法或者属性呢？

• 增加对应的包装对象的原型方法

若要给一个字符串添加属性或者方法，我们需要写到对应的包装对象的原型下。

//给字符串添加属性或方法  要写到对应的包装对象的原型下才行
var str = 'hello';
String.prototype.last = function(){
  // 返回指定位置的字符
  return this.charAt(this.length - 1);
};
console.log(str.last()); // o 执行到这一句，JS会偷偷做一些事情
// 相当于
// 1.找到基本包装对象，new一个和字符串值相同的对象，
// var str = new String('hello');
// 2.通过这个对象找到了包装对象下的方法并调用 
// str.last();  
// 3.这个对象被销毁
// str = null; 

• 使用new运算符创建String对象

// new运算符
var str = new String('hello');
// 有效属性
str.name = 'HI';
// 有效方法
str.age = function () {
  return 100;
}
console.log(str); //[String: 'hello'] { name: 'HI', age: [Function] }
console.log(typeof str); //object
console.log(typeof str.valueOf()); // 重写valueOf()方法，返回对象表示的基本字符串值
console.log(str.name);  // HI
console.log(str.age()); // 100

注意：在使用 new 运算符创建String，Number，Boolean三种类型的对象时，可以给自己添加属性和方法；或增加对应的包装对象的原型方法；但我们建议不要这样使用，因为这样会导致根本分不清到底是基本类型值还是引用类型值。

【笔试题】

这段代码最后会输出什么：

var str = 'string';
str.pro = 'hello';
console.log(str.pro + 'world');

 上述第二行代码给自动创建的String实例对象添加了一个pro属性，并且给这个实例的 pro 属性赋值为 hello，尽管在此刻代码执行时它是生效的，但这行代码执行完毕的那一刻便已经自动销毁了，String实例对象的pro属性也就不复存在了，当第三行代码开始执行时，又进入了读取模式，会重新创建一个新的String实例对象，显然在这个最新创建的String实例是没有pro属性的。因此str.pro 的结果会是一个undefined。

最后输出结果为：undefinedworld

同理：

输出 NaN

var str = 1;
str.pro = 2;
console.log(str.pro + 10); // NaN