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

1. 安然的类型检测

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

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

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

这个bind看起来似乎很神奇，但其实只要一行代码就可以实现一个bind函数：

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

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

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

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

Array !== window.parent.Array 

它们分别是两个函数，父窗口定义了一个，子窗口又定义了一个，内存地址不一样，内存地址不一样的Object等式断定不成立，而window.parent.arrayData.constructor返回的是父窗口的Array，比较的时刻是在子窗口，应用的是子窗口的Array，这两个Array不相等，所以导致断定不成立。

那怎么办呢?

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

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

可以这么写：

同时可以应用Object.isFrozen、Object.isSealed、Object.isExtensible断定当前对象的状况。

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

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

有一个比较有趣的现象是ES6的class也是返回function：

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

那是不是说不克不及再应用instanceof断定变量类型了?不是的，当你须要检测父页面的变量类型就得应用这种办法， 本页面的变量照样可以应用instanceof或者constructor的办法断定 ，只要你能确保这个变量不会跨页面。因为对于大年夜多半仁攀来说，很少会写iframe的代码，所以没有须要搞一个比较麻烦的方法，照样用简单的方法就好了。

2. 惰性载入函数

//UA的类型 
getUAType: function() { 
    let ua = window.navigator.userAgent; 	
			
 1/9    1 2 3 4 5 6 下一页 尾页
	
			

　　推荐阅读
　　JS高级程序设计高级技巧
            
            本篇是看的《JS高等法度榜样设计》第23章《高等技能》做的读书分享。本篇按照书里的思路根据本身的懂得和经验，进行扩大延长，同时指出版里的一些问题。将会评论辩论安然的类型检测、惰性>>>详细阅读


本文标题：JavaScript高级程序设计高级技巧
地址：http://www.17bianji.com/lsqh/37134.html
 1/2    1