JavaScript —— Symbol数据类型的拓展

上一篇文章学习了Symbol的基本用法和作用，但对于Symbol的构造器对象，里面还有很多内置方法我们可以研究一下，让我们一起看看吧！

上一篇文章：《传送地址》

一、Symbol.hasInstance

hasInstance？看起来好眼熟。难道它跟我们的某些API有关系？

没错！他就是instanceof！当我们使用这个API判断类型的时候，就会调用这个类型构造器的内置对象属性。我们可以举个例子：

class myObject {static [Symbol.hasInstance](obj) {return obj.constructor === Object}
}console.log({} instanceof myObject) // true
// 相当于 myObject[Symbol.hasInstance]({})
console.log([] instanceof myObject) // false
// 相当于 myObject[Symbol.hasInstance]([])

上面这个例子，我们自己替myObject这个类实现了对应instanceof的内置方法，一般JavaScript的数据类型都内置有这个构造器对象属性，如果没有，则返回false。

class myObject {}
console.log({} instanceof myObject) // false

二、Symbol.iterator

当JavaScript的一些数据类型含有Symbol.iterator内置对象属性时，我们把由这种数据类型创建的对象称为可迭代对象。

其作用是，当可迭代对象被for...of语句调用时，返回默认的迭代器。在ES6中，Array、Set、Map和string都是可迭代对象，他们都被内置了Symbol.iterator对象属性。

什么意思呢？我们举个例子：

const arr = [1, 2, 3, 4, 5];
for (let a of arr) {console.log(a);
}// 输出 1
// 输出 2
// 输出 3
// 输出 4
// 输出 5

其实我们可以把它拆分出来，实际上在执行for...of语句时，本质是下面这样的：

const iterator = arr[Symbol.iterator]();console.log(iterator.next()); // Object {value: 1, done: false}
console.log(iterator.next()); // Object {value: 2, done: false}
console.log(iterator.next()); // Object {value: 3, done: false}
console.log(iterator.next()); // Object {value: 4, done: false}
console.log(iterator.next()); // Object {value: 5, done: false}
console.log(iterator.next()); // Object {value: undefined, done: true}

执行for...of循环的时候，先调用了arr数组的Symbol.iterator方法，由此来获取迭代器对象。接下来就是调用iterator.next()方法将迭代器对象的value属性赋值到a当中，5次迭代之后，该对象的done属性为true，然后循环结束。

当然，我们也可以为自己的类定义集合且来实现可迭代对象：

class myArray {constructor() {this.myArr = [];}add(data) {this.myArr.push(data);return this;}*[Symbol.iterator]() {for (let a of this.myArr) {yield a;}}
}// 1.创建对象
const otherArr = new myArray();
// 2.调用事先定义好的方法
otherArr.add(1);
otherArr.add(2);
otherArr.add(3);
otherArr.add(4);
otherArr.add(5);
// 3.使用for...of调用可迭代对象
for (let b of otherArr) {console.log(b);
}// 输出 1
// 输出 2
// 输出 3
// 输出 4
// 输出 5

反之，如果我们没有为类定义好内置的对象迭代属性，我们使用for...of，就会报错：

class myArray {constructor() {this.myArr = [];}add(data) {this.myArr.push(data);return this;}
}// 1.创建对象
const otherArr = new myArray();
// 2.调用事先定义好的方法
otherArr.add(1);
otherArr.add(2);
otherArr.add(3);
otherArr.add(4);
otherArr.add(5);
// 3.使用for...of调用可迭代对象
for (let b of otherArr) {console.log(b);
}// 输出 Uncaught TypeError: otherArr is not iterable,即 otherArr 不是可迭代对象

三、总结

其实也没有什么好总结的，只是，我们要知道是这个数据类型Symbol它的一些能力即可。上面两点只是我临时起意，就码来玩玩，大家有兴趣的可以继续研究最上面的那个截图~