sakura 技术分享 2022-06-28

重温 JavaScript 系列（1）：Object.assign、iframe、HashMap、手写 instanceof

Object.assign

作用：Object.assign可以实现对象的合并。

语法：Object.assign(target, ...sources)

Object.assign会将source里面的可枚举属性复制到target，如果和target的已有属性重名，则会覆盖。
后续的source会覆盖前面的source的同名属性。
Object.assign复制的是属性值，如果属性值是一个引用类型，那么复制的其实是引用地址，就会存在引用共享的问题。

for..of..: 它是es6新增的一个遍历方法，但只限于迭代器(iterator), 所以普通的对象用for..of遍历是会报错的。

可迭代的对象：

包括Array, Map, Set, String, TypedArray, arguments对象等等

map,forEach 匿名函数中的this都是指向window，

map()会分配内存空间存储新数组并返回，forEach()不会返回数据。

使用静态类型的优势

可以尽早发现bug和错误
减少了复杂的错误处理
将数据和行为分离
减少单元测试的数量
提供了领域建模（domain modeling）工具
帮助我们消除了一整类bug
重构时更有信心

使用静态类型的劣势

代码冗长
需要花时间去掌握类型

iframe有什么优点、缺点

优点：

iframe能够原封不动的把嵌入的网页展现出来。
如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

iframe会阻塞主页面的onload事件；
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。会产生很多页面，不容易管理。
iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化（SEO）。
很多的移动设备无法完全显示框架，设备兼容性差。
iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

Web Components 总的来说是提供一整套完善的封装机制来把 Web 组件化这个东西标准化，每个框架实现的组件都统一标准地进行输入输出，这样可以更好推动组件的复用

包含四个部分

Custom Elements
HTML Imports
HTML Templates
Shadow DOM

变量提升：

JavaScript是单线程语言，所以执行肯定是按顺序执行。但是并不是逐行的分析和执行，而是一段一段地分析执行，会先进行编译阶段然后才是执行阶段。

在编译阶段阶段，代码真正执行前的几毫秒，会检测到所有的变量和函数声明，所有这些函数和变量声明都被添加到名为Lexical Environment的JavaScript数据结构内的内存中。所以这些变量和函数能在它们真正被声明之前使用。

HashMap 和 ArrayMap 有什么区别？

查找效率
HashMap因为其根据hashcode的值直接算出index,所以其查找效率是随着数组长度增大而增加的。
ArrayMap使用的是二分法查找，所以当数组长度每增加一倍时，就需要多进行一次判断，效率下降
扩容数量
HashMap初始值16个长度，每次扩容的时候，直接申请双倍的数组空间。
ArrayMap每次扩容的时候，如果size长度大于8时申请size*1.5个长度，大于4小于8时申请8个，小于4时申请4个。这样比较ArrayMap其实是申请了更少的内存空间，但是扩容的频率会更高。因此，如果数据量比较大的时候，还是使用HashMap更合适，因为其扩容的次数要比ArrayMap少很多。
扩容效率
HashMap每次扩容的时候重新计算每个数组成员的位置，然后放到新的位置。
ArrayMap则是直接使用System.arraycopy，所以效率上肯定是ArrayMap更占优势。
内存消耗
以ArrayMap采用了一种独特的方式，能够重复的利用因为数据扩容而遗留下来的数组空间，方便下一个ArrayMap的使用。而HashMap没有这种设计。由于ArrayMap之缓存了长度是4和8的时候，所以如果频繁的使用到Map，而且数据量都比较小的时候，ArrayMap无疑是相当的是节省内存的。

总结
综上所述，数据量比较小，并且需要频繁的使用Map存储数据的时候，推荐使用ArrayMap。而数据量比较大的时候，则推荐使用HashMap。

手写 instanceof:

其实 instanceof 主要的实现原理就是只要右边变量的 prototype 在左边变量的原型链上即可。

function new_instance_of(child, parent) {
    let parentProto = parent.prototype,
        child_proto = child.__proto__;
    while(true) {
        if(child_proto === null)
            return false;
        if(child_proto === parentProto) 
            return true;
        child_proto = child_proto.__proto__;
    }
}