ES6的新特性解构非常好用,但是使用的时候有没有坑呢?还真有一个,听我慢慢道来。
通常来说解构操作是对数据进行的,但是在JS中的数据跟别的语言不同,它不是单纯的数据解构,往往可以往里面塞入很多其他的功能进去,看一下下面的代码

这里我就假设有一个书本的数据结构,除了showPrice设个属性是一个方法外,其他的都是基本类型数据,那么我直接调用book.showPrice()方法,显示的结果是这样

这个结果跟我预期的是一样的,那么现在来试验下结构解析的方法来调用showPrice()方法

那么看一下这次的显示结果吧

结果是undefined!为什么会这样呢?来看一下this现在是指向那里了吧

输出结果如下

this指向了global,也就是现在的指针不再是book因此没有了unit和price的属性,那么输出自然是undefined了。
这是一种情况,然而如果是Class又会如何呢?这次我就直接把两种情况一起罗列出来

下面是显示结果

可以看到,通过解构方式获取到的showPrice()方法是没有this指针的,直接指向了undefined了。
通过这两个试验,应该了解到ES6的解构只能处理不设计到this指针的数据类型