JS中字面量创建基本类型和构造函数创建基本类型的区别

我们先看下面的一个例子：

let a = ''
console.log(a instanceof String) // false
let b = new String()
console.log(b instanceof String) // true

这很好理解，因为a是基本数据类型中的String，而b是String构造函数创建的一个的一个实例。但是下面的例子就很疑惑了：

console.log(a.__proto__) // [String: '']

为什么 一个基本类型会像对象一样有属性呢？这里就涉及到基本包装类型的概念了。
借用一下《JavaScript 高级程序设计》中对基本包装类型的的描述

为了便于操作基本类型值，ECMAScript 还提供了 3 个特殊的引用类型：Boolean、Number 和 String。这些类型与本章介绍的其他引用类型相似，但同时也具有与各自的基本类型相应的特殊行为。实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而让我们 能够调用一些方法来操作这些数据。

举个例子：

var s1 = "some text";
var s2 = s1.__proto__;

s1明明是一个基本类型String，为什么会有__proto__属性呢？因为当我们访问基本类型的属性（就像访问一个对象的属性那样）的时候，解释器自动帮我们做了这样一件事：临时创建一个基本包装类型对象，当这一行执行完成之后立即销毁。具体到这里可以细分为三个步骤：

1. 创建 String 类型的一个实例；

2. 在实例上获取__proto__属性，并赋值给s2；

3. 销毁这个实例。

用代码表示就是：

var s1 = new String("some text"); 
var s2 = s1.__proto__;
 s1 = null; 

弄清楚了这个知识点之后，有几个需要注意的点

Tips1 弄清楚转型函数和构造函数的区别

先看一个例子：

let a = 2
let b = Number(2)
let c = new Number(2)
console.log(a === b) // true
console.log(a === c) // false 类型不同
console.log(a == c) // true 隐式类型转换后相等
console.log(typeof a) // Number
console.log(typeof b) // Number
console.log(typeof c) // Object
console.log(a instanceof String) // false
console.log(b instanceof String) // false
console.log(c instanceof String) // true
console.log(c instanceof Object) // true

从上面我们可以清楚地认识到，Boolean、Number和 String三个函数的返回值就是相应的基本类型值。因此a===b

当它们作为普通函数被调用时(按照功能可以称为转型函数)，左值接受的就是函数的返回值(即基本类型值)；

当它们作为构造函数被调用时(也就是用new修饰符)，左值接受的就是新建的引用类型(可以理解为C++里的指针)

Tips2 尽量避免显式创建基本包装类型

我们不应该主动地用new来Boolean、Number和 String来创建基本包装类型，原因如下：

1. 对基本包装类型的实例调用 typeof 会返回object，而不是boolean/number/string，容易引起困惑；
2. 让人分不清自己是在处理基本类型还是引用类型的值，试看以下例子：

        var num1 = new Number(3);
        var num2 = new Number(3);
        console.log(num1==num2); //false 因为两个对象实例的地址不一样
        console.log(num1 == 3);  //true 因为num1自动做了类型转换
        console.log(num1 === 3);  //false 因为一个是object型，一个是number型

3. 所有基本包装类型的对象，在做自动类型转换的时候都会被转换为布尔值 true(弱类型语言的大坑)
   因此会出现这样的情况：

        var a = new Boolean(false);
        if(a){ //这里做了自动类型转换，obejct转为boolean就是true
            alert("你搞错啦!!!");
        }

Tips3 自己实现instanceof时避免踩坑

我们自己实现instanceof的时候，容易写出以下的错误代码：

const myInstanceof = (A, B) => {
  let _prototype = A
  while(_prototype !== null){
    if(_prototype === B.prototype) return true
    _prototype = _prototype.__proto__
  }
  return false
}

做一个简单的测试就能暴露这种写法的问题

console.log('123' instanceof String) // false
console.log('123', String) // true

尴尬的情况出现了，自己写的函数结果和instanceof运算符出现了不一致的情况，原因在于：
我们像遍历链表一样遍历原型链的过程中，_prototype.__proto__不管_prototype是基本类型还是应用类型，都能返回结果。对于基本类型，正如之前提到的，会隐式创建基本包装类型，因此console.log('123', String)才会返回true。

如果想做到和instanceof运算符一致，应该加上一句：

if(!(A instanceof Object) || !(B instanceof Object) ) return false // handle null && undefined && 基本类型

但是这样有个悖论问题：我本身就是要实现instanceof，所以这里不应该用它。
换成：

if(typeof A !== 'object' || typeof B !== 'object') return false

这样就可以了。但是别忽略JS的一个大坑：
typeof不能区分 null和 object，所以上面这一行代码可以过滤掉基本类型和undefined，但无法过滤掉null的情况。
好在在下面的判断中，如果A===null会进不了循环体，直接返回false所以不需要单独处理null。

修改后的代码如下:

const myInstanceof = (A, B) => {
  if(typeof A !== 'object' || typeof B !== 'object') return false // handle undefined && 基本类型
  let _prototype = A
  while(_prototype !== null){
    if(_prototype === B.prototype) return true
    _prototype = _prototype.__proto__
  }
  return false
}