个人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__prototypenew操作符,模拟出类和类实例化的效果。

三. 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的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。先介绍两个重要的属性deferasync

  1. defer属性

 

5.1

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

  1. async属性

 

5.2

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

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

 

5.3 动态创建DOM

 

5.4 使用JquerygetScript()

 

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

人已赞赏
随笔日记

.net core 微服务架构-docker的部署-包括网关服务(Ocelot)+认证服务(IdentityServer4)+应用服务(asp.net core web api)

2020-11-9 3:55:40

随笔日记

浅谈javascript和python语言的深拷贝

2020-11-9 3:55:42

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索