原生JS补给(上)|博客系列

# 第一补： JS类型基础

# 1. ‘1’.toString()为什么可以调用，1.toString()却不行？

我们知道如果在代码中使用：

'1'.toString()
// 或者是
true.toString()

都是可以正常调用的，这是因为toString它是Object.prototype上的方法，任何能访问到Object原型的元素都可以调用它。

而在此处，对于'1'.toString()相当于是做了一层转换，将其转为了一个"对象"，这样就可以调用toString()方法了。

也就是这样：

var s = new Object('1');
s.toString();
s = null;

• 创建Object实例，将s变为了String{"1"}对象
• 调用Object.prototype上的实例方法toString()
• 用完之后立即销毁这个实例

这一部分三元分析的已经挺多了，我主要是想补充一下1.toString()为什么就不行。

当我们在代码中试图使用1.toString()，发现编辑器已经报错不允许我们这样做了。

最开始会有这么奇怪的想法是因为我们都忽视了一件事，那就是.它也是属于数字里的一部分啊 😂。

比如1.2、1.3。所以当你想要使用1.toString()的时候，JavaScript的解释器会把它作为数字的一部分，这样就相当于(1.)toString了，很显然这是一段错误的代码。

既然这样的话，如果我还给代码一个.是不是就可以了，于是我尝试了一下：

console.log(1.1.toString())

发现它竟然能正常打印出来：

"1.1"

这也就再次证明了1.toString()会将.归给1所属，而不是归给toString()。

当然如果你用的一个变量来承载这个数字的话也是可以的：

var num = 1;
console.log(num.toString()) // "1"

// 或者
console.log((1).toString()) // "1"

# 2. 为什么可以使用new Number却不能使用new Symbol?

var num = new Number(1) // Number{1}
var str = new String('1') // String{'1'}
var bol = new Boolean(true) // Boolean{true}

var symbol = new Symbol(1) // TypeError

像上面这种使用new Number、new String等创建的基本数据类型被称之为：围绕原始数据类型创建一个显式包装器对象。

通俗点说就是：用new来创建基本类型的包装类。

而这种做法在ES6之后就不被支持了，从new Symbol(1)报错就可以看出来，现在使用的是不带new的方式：var symbol = Symbol(1)，所以它作为构造函数来说是不完整的。

但是因为历史遗留的原因，new Number仍然可以这样用，不过并不推荐。

如果你真的想创建一个 Symbol 包装器对象 (Symbol wrapper object)，你可以使用 Object() 函数：

var sym = Symbol(1)
console.log(typeof sym) // "symbol"
var symObj = Object(sym)
console.log(typeof symObj) // "object"

# 第二补：JS类型检测

# 1. instanceof能否判断基本数据类型？

什么意思呢 🤔️？

正常来说，instanceof是用来判断某个对象的原型链上是否能够查找到某个构造函数的原型对象。

来看看通俗点的简介：

a instanceof B

实例对象a instanceof 构造函数B

检测a的原型链(__proto__)上是否有B.prototype，有则返回true，否则返回false。

那么它可以用来判断基本数据类型吗？

也就是说我定义了一个var num = 1，我可以用instanceof来判断它是一个number类型的变量吗？

如果你试图这样写：

var num = 1;
console.log(num instanceof Number) // false

发现结果是false。

此时你可以用Symbol.hasInstance来实现一个自定义instanceof的行为。

首先想想我们是要实现一个什么功能？

a instanceof B

左侧的a是一个变量，而右侧的B是一个构造函数，而class的本质也是一个构造函数。

所以在这个需求中，我们可以定义一个叫做MyNumber的类，在其里面封装一层，暴露一个静态方法用来判断数据类型：

class MyNumber {
    static [Symbol.hasInstance](instance) {
        return typeof instance === 'number'
    }
}
var num = 1;
console.log(num instanceof MyNumber) // true

• 在类MyNumber中定义了一个名为Symbol.hasInstance的静态方法
• 这个方法接收的是一个实例对象instance
• 返回值为typeof判断是否是number类型

这里比较难理解的就是Symbol.hasInstance了，第一次接触它也不知道它是个啥 😂。找了一波MDN 上对它的介绍：

用于判断某对象是否为某构造器的实例。

然后试着写了几个案例，发现也不用把它想的那么复杂，你就简单理解，当我们在使用instanceof的时候，能够自定义右侧构造函数(类)它的instanceof验证方式就可以了。

就像是上面👆那个案例一样，我在MyNumber重写了静态方法Symbol.hasInstance，让它的验证方式变成type instance === 'number'。

那么为什么是静态方法呢(也就是在方法前面加上static)，通过阅读《🔥【何不三连】比继承家业还要简单的JS继承题-封装篇(牛刀小试)》我们知道，静态方法是挂载在MyNumber这个类上的方法，因此我们甚至可以把下面的内容换一种写法：

console.log(num instanceof MyNumber) // true
// 换成：
console.log(MyNumber[Symbol.hasInstance](num)) // true

看到了吧，它其实就是一个方法名而已，而这个方法因为是静态的，在MyNumber上的，因此我们可以用MyNumber[Symbol.hasInstance]这种方式调用。

想想，如果没有static这个关键字呢？

没有static的话，定义在类里的方法就相当于是挂载到类的原型对象上，那么如果我们想要使用它，一种就是直接用MyNumber.prototype调用，还有一种就是使用new MyNumber()生成一个实例来调用：

class MyNumber {
    [Symbol.hasInstance](instance) { // 没有 static
        return typeof instance === 'number'
    }
}
var num = 1

console.log(num instanceof new MyNumber()) // true
console.log(num instanceof MyNumber.prototype) // true

// 转化为：
console.log(MyNumber.prototype[Symbol.hasInstance](num)) // true
console.log(new MyNumber()[Symbol.hasInstance](num)) // true

所以现在回过头来看看：

class MyNumber {
    static [Symbol.hasInstance](instance) {
        return typeof instance === 'number'
    }
}
var num = 1;
console.log(num instanceof MyNumber) // true

是不是就好理解多了呢？

那么假如我现在想要你实现一个用instanceof判断是不是数组的类MyArray，该如何去写呢？

思考🤔…

唔…上答案：

class MyArray {  
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}
console.log([] instanceof MyArray); // true

# 2. instanceof的查找路线？

上面我们说到了instanceof是用来判断某个对象的原型链上是否能够查找到某个构造函数的原型对象。

并且是会沿着原型链一层一层的向上查找，直到到达原型链的末位。

那这个过程具体是怎样的呢？让我们来看一个例子🌰：

function Parent () {
  this.name = 'parent'
}
function Child () {
  this.sex = 'boy'
}
Child.prototype = new Parent()
var child1 = new Child()

console.log(child1 instanceof Child)
console.log(child1 instanceof Parent)
console.log(child1 instanceof Object)

结果为：

true
true
true

这里其实用到了原型链继承，Chind继承于Parent，而且三个构造函数的原型对象都存在于child1的原型链上。

也就是说，左边的child1它会向它的原型链中不停的查找，看有没有右边那个构造函数的原型对象。

例如child1 instanceof Child的查找顺序：

child1 -> child1.__proto__ -> Child.prototype

child1 instanceof Parent的查找顺序：

child1 -> child1.__proto__ -> Child.prototype
-> Child.prototype.__proto__ -> Parent.prototype

还不理解？

没关系，我还有大招：

我在上面👆原型链继承的思维导图上加了三个查找路线。

被⭕️标记的1、2、3分别代表的是Child、Parent、Object的原型对象。

好滴，一张图简洁明了。以后再碰到instanceof这种东西，按照我图上的查找路线来查找就可以了 😁 ～

# 3. isPropertypeOf()有什么作用？

既然说到了instanceof，那么就不得不提一下isPrototypeOf这个方法了。

它属于Object.prototype上的方法，这点你可以将Object.prototype打印在控制台中看看。

isPrototypeOf()的用法和instanceof相反。