个人JS体系整理（三）

一. 严格模式

JavaScript 严格模式（strict mode）即在严格的条件下运行。首先声明，严格模式是ES5中提出来的，准确来说就是一句指令Use strict，它的目的是指定代码在严格条件下执行，但是在JS旧版本中会被忽略。应用层方面简单理解就是你在严格模式下不可以使用未声明的变量。

图1.1严格模式的函数使用

第一种使用方式为函数使用，即在函数中使用严格模式；

第二种方式为在整个脚本中使用，即在你要使用严格模式的js文件中开头写'use strict'（或者是"use strict"）。

严格模式语法存在一定的缺陷，有数个大型网站已经被坑倒了。具体原因如下：严格模式的代码与严格模式的代码合并后还是严格模式，非严格模式的代码与非严格模式的代码合并后还是非严格模式，但是非严格模式的代码与严格模式的代码合并的话，会爆出一个又一个的bug。所以，如果确定要使用严格模式来进行代码编辑的话，最好是按照函数去一个个开启严格模式，你可以将整个脚本的内容用一个函数包括起来，然后在这个外部函数中使用严格模式。这样就可以消除合并的问题，但是这就意味着您必须要在函数作用域外声明一个全局变量。

图1.2严格模式的报错实例（1）

 

图1.3严格模式的报错实例（2）

（1）不允许使用未声明的变量；严格模式有以下几条不允许的情况：

（2）不允许删除函数或者变量；

（3）不允许变量重名；

（4）不允许使用八进制；

（5）不允许使用转义字符；

（6）不允许对只读属性赋值；

（7）变量名不可以使用eval字符串；

（8）变量名不能使用专业定义（类似arguments这种）；

（9）禁止this关键字指向全局对象。

二. New

要创建一个实例，就必须要用到new操作符，实际上在调用new操作符时会经历以下四步：

（1）创建一个新对象；

（2）将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象） ；

（3）执行构造函数中的代码（为这个新对象添加属性） ；

（4）返回新对象。

图2.1 new的使用

如上图所示，前两行为我们正常使用的方法，其实这两行所执行的就是后面的这三行，即先定义一个空对象，然后通过原型把函数的prototype赋给对象的_proto_，然后再指向当前函数的作用域。当我们给创建实例的函数对象通过原型增加一些方法或者属性时，被它所创建的实例也会具有这些方法和实例，即构造子中，我们来设置‘类’的成员变量，构造子对象prototype中我们来设置‘类’的公共方法。于是通过函数对象和Javascript特有的__proto__与prototype及new操作符，模拟出类和类实例化的效果。

三. Instanceof

instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置。话不多数，直接上图：

图3.1

如上所示，instanceof的用法就是 Obj instanceof constructor，其中Obj是要检测的对象，constructor是构造函数。但是需要注意的是，如果表达式 obj instanceof Foo 返回true，则并不意味着该表达式会永远返回true，因为Foo.prototype属性的值有可能会改变，改变之后的值很有可能不存在于obj的原型链上，这时原表达式的值就会成为false。另外一种情况下，原表达式的值也会改变，就是改变对象obj的原型链的情况，虽然在目前的ES规范中，我们只能读取对象的原型而不能改变它，但借助于非标准的__proto__伪属性，是可以实现的。比如执行obj.__proto__ = {}之后，obj instanceof Foo就会返回false了。

图3.2

四. 特殊函数（匿名函数）

首先，匿名函数的定义是没有函数名称的函数，如下图：

图4.1

上面这段代码就是一个匿名函数，匿名函数的调用方式是声明一个变量，然后把把这个匿名函数的执行的代码，和返回值赋值给声名的变量。

图4.2

如上就是匿名函数被使用最多的例子，即可以将匿名函数作为参数传给其它函数，接收方函数就可以通过所传递进来的函数完成某些功能

五. 延迟加载方式

有些JS代码在某些情况在需要使用，并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。将JS切分成许多模块，页面初始化时只加载需要立即执行的JS，然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。先介绍两个重要的属性defer和async

1. defer属性

图5.1

浏览器会并行下载 wpwl.js和其它有 defer 属性的script，而不会阻塞页面后续处理。defer属性在IE 4.0中就实现了，目前已经十多年了，而火狐也在3.5版本以后开始支持defer属性。

1. async属性

图5.2

async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。Firefox3.6、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有IE 都支持异步加载。

延迟加载的方式有很多，下面介绍几种典型的方式：

图5.3 动态创建DOM

图5.4 使用Jquery的getScript()

图5.5 使用setTimeout延迟方法的加载时间