JS高级程序设计高级技巧

本篇是看的《JS高等法度榜样设计》第23章《高等技能》做的读书分享。本篇按照书里的思路根据本身的懂得和经验，进行扩大延长，同时指出版里的一些问题。将会评论辩论安然的类型检测、惰性载入函数、冻结对象、准时器等话题。

1. 安然的类型检测

这个问题是怎么安然地检猜一?变量的类型，例如断定一个变量是否为一个数组。平日的做法是应用instanceof，如下代码所示：

let data = [1, 2, 3]; 
console.log(data instanceof Array); //true

然则膳绫擎的断定在必定前提下会掉败——就是在iframe琅绫擎断定一个父窗口的变量的时刻。写个demo验证一下，如下主页面的main.html：

<script> 
    window.global = { 
        arrayData: [1, 2, 3] 
    } 
    console.log("parent arrayData installof Array: " +  
          (window.global.arrayData instanceof Array)); 
</script> 
<iframe src=http://developer.51cto.com/art/201709/"iframe.html"></iframe>

在iframe.html断定一下父窗口的变量类型：

<script> 
    console.log("iframe window.parent.global.arrayData instanceof Array: " +  
        (window.parent.global.arrayData instanceof Array)); 
</script>

在iframe琅绫擎应用window.parent获得父窗口的全局window对象，这个不管跨不跨域都没有问题，进而可以获得父窗口的变量，然后用instanceof断定。最后运行结不雅如下：

JS高等法度榜样设计高等技能

须要优化，如下代码所示：

可以看到父窗口的断定是精确的，而子窗口的断定是false，是以一个变量明明是Array，但却不是Array，这是为什么呢?既然这个是父子窗口才会有的问题，于是试一下把Array改成父窗口的Array，即window.parent.Array，如下图所示：

此次返回了true，然后再变换一下其它的断定，如上图，最后可以知道根来源基本因是上图最后一个断定：

Array !== window.parent.Array

那怎么办呢?

因为不克不及应用Object的内存地址断定，可以应用字符串的方法，因为字符串是根本类型，字符串比较只要每个字符都相等就好了。ES5供给了这么一个办法Object.prototype.toString，我们先小试牛刀，试一下不合变量的返回值：

JS高等法度榜样设计高等技能

可以看到如不雅是数组返回”[object Array]”， ES5对这个函数是这么规定的：

JS高等法度榜样设计高等技能

也就是嗣魅这个函数的返回值是“[object ”开首，后面带上变量类型的名称和右括号。是以既然它是一个标准语律例范，所以可以用这个函数安然地断定变量是不是数组。

可以这么写：

Object.prototype.toString.call([1, 2, 3]) === 
    "[object Array]"

留意要应用call，而不是直接调用，call的第一个参数是context履行高低文，把数组传给它作为履行高低文。

JS高等法度榜样设计高等技能

所以可以知道class也是用function实现的原型，也就是说class和function本质上是一样的，只是写法上不一样。

1/9 1 2 3 4 5 6 下一页尾页

　　推荐阅读

　　为了合成让人类听懂的语音，机器做了哪些“深度学习”？

深度进修在2006年开端崭露头脚后，近几年取得了飞速的成长，无论是学术研究照样企业应用均出现出指数级增长的趋势;伴跟着这项技巧的赓续成熟，深度进修在智能语音范畴率先发力，取得一系列>>>详细阅读

本文标题：JS高级程序设计高级技巧

地址：http://www.17bianji.com/lsqh/37133.html

1/2 1