javaScript高级程序设计-------总结随笔

最新推荐文章于 2022-07-12 17:26:39 发布

西贝爷

最新推荐文章于 2022-07-12 17:26:39 发布

阅读量265

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_41888013/article/details/80907020

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、JavaScript实现

JavaScript(JS)是由ECMAScirpt(ES)、文件对象模型（DOM）、浏览器对象模型（BOM）三部分组成，每部分的作用如下：

    ECMAScript: (3/5/6/7)它是JS语言的标准,规定了JS的编程语法和基础核心知识
    DOM: document object model 文档对象模型,提供给JS很多操作页面中元素的属性和方法（提供了操作html节点元素的API）
    BOM: browser object model 浏览器对象模型 ,提供了很多操作浏览器的属性方法,而这些方法都存放在window浏览器对象上

二、JavaScript基本概念

此小节内容比较基础，笼统的给大家总结下：

1、JS的基本语法(区分大小写、注释、严格模式、语句)

2、JS中的关键字和保留字（定义的关键字和保留字不可自定义一个属性例如：var function = 2）

3、变量的定义（JS是弱类型语言定义变量不指定具体类型直接var即可例如：var num = 2）

4、JS的数据类型（5种简单类型+1种复杂类型）
typeof操作符：用于判断对象类型例如：（typeof 对象）

5种简单类型：Number、String、Null、underfined、Boolean

1种复杂类型：Object包含（Object类型、Date类型、Array类型、RegExp类型(正则表达式类型)、Function类型、基本包装类类型（Number、String、Boolean）、单体内置对象类型（Global、Math））

5、操作符

常用操作符：加性操作符、乘性操作符、相等操作符（==）、关系操作符、赋值操作符（=）、布尔操作符、一元操作符（-=，+=）、条件操作符（也叫三目运算符，建议能多用就多用，效率相对较高）

不常用操作符：位操作符（底层实现用的较多）、逗号操作符（只是一个逗号）

6、语句

常用语句：if语句、for语句、while语句

不常用语句：do-while语句、for-in语句、label语句、switch语句、break语句和continue语句

建议不要用语句：with语句

7、函数

正确理解函数参数，在ES种函数是没有重载的概念，调用函数时无论传入几个参数都只调用同一个函数。

三、变量、作用域和内存问题

1、执行环境及作用域

全局执行环境（被认为是window对象）

局部执行环境（当前代码会在当前环境中创建变量对象的一个作用域链）

2、垃圾收集

标记清除（一般的浏览器都使用此垃圾收集策略）

引用计数（由于循环引用的对象采用此策略无法收集，导致大量的内存得不到回收，这种策略很少使用）

四、引用类型详解（本章主要讲解集中引用类型的用法，实际中用到的比较多，可重点看）

1.Object是一个基础类型，其他所有类型都是从Object继承了基本的行为。
         其他对象都继承了Object类型，所以也都实现了Object的toLocaleString()、toString()、valueof()方法
2.Array类型是一组值的有序列表，同时还提供了操作和转换这些值的功能。
        2.1检测数组方法：instanceof操作符、Array.isArray()方法例子：value instanceof Array, Array.isArray(value)
        2.2转换方法：

                toString()方法：返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
                 valueof()方法：返回同toString()方法相同的结果
              toLocalString()方法：取得数组的每一项值并调用每一项的toLocalString()方法，并以逗号分隔的字符串，一般经常返回与toString()和valueof()方法相同的值。
             join()方法：方法只接受一个参数，即用作分隔符的字符串，然后返回包含所有数组项的字符串。无参的情况默认是(,)。
2.3栈方法：push()：接受任意熟练的参数，并将其逐个添加到数组的尾部，并修改数组的长度。
                   pop()：从数组尾部移除最后一项，减少数组的length值，然后返回移除的项。
2.4队列方法：shift()：他能够移除数组的第一项并返回该项，同时将数组的长度减1.
                        unshift()：它能够在数组的前端添加任意个项并返回新数组的长度。
2.5重排序方法：reverse():反转数组项的顺序。
         sort()：调用每个数组项的toString()方法，然后比较得到的字符串，以确定如何排序。
         sort()方法可以接收一个比较函数作为参数，以便我们指定那个值位于那个值的前面。
2.6操作方法：concat()：这个方法先创建当前数组的副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。
       slice()：可以接受一个或两个参数，即要返回项的起始和结束位置。只有一个参数的情况下，slice()方法返回从该项参数指定位置到当前数组末尾的所有项。
       splice()：
                 删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。
             插入：可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以在传人第四、第五以至于多个项
            替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需要指定3个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
2.7位置方法：indexOf()和lastIndexOf()这两个方法都接收两个参数：要查找的项和（可选）表示查找起点位置的索引。
                      indexOf()：从数组的开头（位置0）开始向后查找。
                      lastIndexOf()：从数组的末尾开始向前查找。
2.8迭代方法：every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true.
                       filter()：对数组中的每一项运行给定的函数，返回该函数会返回true的项组成的数组。
                     forEach()：对数组中的每一项运行给定的函数，这个方法没有返回值。
                       map()：对数组中的每一项运行对给定函数，返回每次函数调用的结果组成的数组。
                      some()：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。
  以上方法都不会修改数组中的包含的值。
2.9归并方法：reduce()：从数组的第一项开始，逐个遍历到最后
                       reduceRight()：从数组的最后一项，向前遍历到第一项
  这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。传给reduce()和reduceRight()的函数接收4个参数：前一个值、当前值、项的索引值和数组对象。
这个函数返回的任何值都会作为第一个参数自动传给下一项。

3.Date类型提供了有关日期的信息，包括当前日期和时间以及相关的计算功能。
           Date.parse()方法接收一个表示日期的字符串参数，然后尝试根据这个字符串返回相应日期的毫秒数。注：传入的参数格式，应地区而异。
            Date.UTC()方法同样也返回表示日期的毫秒数，所传参数分别是年份、基于0的月份、月中的哪一天、小时数（0到23）、分钟、秒以及毫秒数。这些参数中，只有前两个参数（年和月）是必须的。
Date.now()方法，返回表示调用这个方法时的日期和时间的毫秒数。在不支持这个方法的浏览器中使用 +new Date() 可以达到同样的效果。
             toLocaleString()：会按照浏览器设置的地区相适应的格式返回日期和时间。
              toString()：返回带有时区信息的日期和时间，其中时间一般以军用时间（即小时的范围是0-23）表示。
             valueOf()：返回日期的毫秒数。

4.RegExp类型是ECMAScript支持正则表达式的一个接口，提供了最基本的和一些高级的正则表达式功能。
每个正则表达式都可带有一个或多个标志，以标明正则表达式的行为。正则表达式的匹配模式支持下列3个标志：
              g：表示全局模式
              i：表示不区分大小写
              m：表示多行模式
RegExp实例方法：
            test()：接受一个字符串参数，在模式与该参数匹配的情况下返回true.
           exec()：该方法是专门为捕获组而设计的，exec()接受一个参数，即要应用模式的字符串，然后返回包含第一个匹配项信息的数组。

5.函数实际上是Function类型的实例，因此函数也是对象。而这一点正是JavaScript最有特色的地方。由于函数是对象，所以函数也拥有方法，可以用来增强其行为。
这里主要记录以下几个方法：
             arguments.callee：获取执行该行代码时所在函数，用在阶乘实现中。（严格模式下访问它会导致错误）
             arguments.callee.caller：保持着调用函数的函数的引用。
           apply()和call()这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。
              apply()：该方法接收两个参数，一个是在其中运行函数的作用域，另一个是参数数组。其中第二个参数可以是Array的实例，也可以是arguments对象。
               call()：第一个参数是this值没有变化，变化的其余参数都直接传递给函数。

6.因为有了基本包装类型，所以JavaScript中的基本类型值可以被当作对象来访问。三种基本包装类型分别是：Boolean、Number和String。以下是它们的共同特征：
     （1）每个包装类型都映射到同名的基本类型；
     （2）在读取模式下访问基本类型值时，就会创建对应的基本包装类型的一个对象，从而方便了数据操作；
     （3）操作基本类型值的语句一经执行完毕，就会立即销毁新创建的包装对象。
包装类都有一些常用的方法，具体用法在使用过程中可以进行搜索和查找。
在所有的代码执行之前，作用域中就已经存在两个内置对象：Global和Math。在大多数ECMAScrigt实现中都不能直接访问Global对象；不过Web浏览器实现了承担该角色的window对象。全局变量和函数都是Global对象的属性。Math对象提供了很多属性和方法，辅助完成复杂的数学计算任务。

五、面向对象设计（本章主要理解JS中对象的属性和创建对象的模式）

如果想要深刻理解ES中对象的内部构造，可以详读此章

1、理解对象属性

ES中有两种属性：数据属性和访问器属性

ES提供了一些方法，来操作对象属性，

2、创建对象

创建对象主要有以下模式：

（一）工厂模式（类似创建一个公用方法）：解决了创建多个相似对象的问题，没解决对象识别的问题

（二）构造函数（类似创建一个实例对象）：问题是每个方法都要在每个实例上创建一遍的问题（可以用原型模式创建避免此问题）

（三）原型模式：利用函数的prototype属性（这个属性是个指针，指向对象）来进行声明公共属性和方法，这个模式也是ES底层实现继承的依据

（四）构造函数和原型组合模式：此模型结合了构造函数和运行模式的优点，实现了多个实例公享相同的属性和方法，同时也扩展了不同实例的方法实现，此模式使用比较普遍，ES底层也依赖此模式实现

（五）动态原型模式：类似于构造函数模型（只是不公用的函数，多加了个判断）

（六）寄生构造函数模式：类似工厂模式

（七）稳妥构造函数模式：使用于一些安全环境中，

3、继承

继承的实现，依靠原型链（类似于上节提到的原型模式），子对象通过prototype引用父对象，Object是所有对象的最终父对象，所以所有对象都拥有Object的属性和方法（toString()、valueOf()、hasOwnPropertype()、isPrototypeOf()、propertyIsEnumerable()、toLocaleString()、constructor()）

六、函数表达式

使用函数表达式可以无须对函数命名，从而实现动态编程。匿名函数，也称为拉姆达函数，是一种使用JavaScript函数的强大方式。以下是函数表达式的特点：

1、函数表达式不同于函数声明。函数声明要求有名字，但函数表达式不需要。没有名字的函数表达式也叫做匿名函数。

2、在无法确认如何引用函数的情况下，递归函数就会变得比较复杂。

3、递归函数应该始终使用arguments.callee来递归地调用自身，不要使用函数名——函数名可能会发生变化。

当在函数内部定义了其他函数时，就创建了闭包（有权访问另一个函数作用域内变量的函数都是闭包）。闭包有权访问包含函数内部的所有变量，原理如下：

1、在后台执行环境中，闭包的作用域链包含着它自己的作用域、包含函数的作用域和全局作用域。

2、通常，函数的作用域及其所有变量都会在函数执行结束后被销毁。

3、但是，当函数返回一个闭包时，这个函数的作用域将会一直在内存中保存直到闭包不存在为止。

使用闭包可以在JavaScript中模仿块级作用域（JavaScript本身没有块级作用域的概念），要点如下：

1、创建并立即调用一个函数，这样既可以执行其中的代码，又不会在内存中留下对该函数的引用。

2、结果就是函数内部的所有变量都会被立即销毁——除非将某些变量赋值给了包含作用域（即外部作用域）中的变量

闭包还可以用于在对象中创建私有变量，相关概念如下：

1、即使JavaScript中没有正式的私有对象属性的概念，但可以使用闭包来实现公有方法，而通过公有方法可以访问在包含作用域中定义的变量

2、有权访问私有变量的共有方法叫做特权方法。

3、可以使用构造函数模式、原型模式来实现自定义类型的特权方法，也可以使用模块模式、增强的模块模式来实现单例的特权方法。

JavaScript中的函数表达式和闭包都是极其有用的特性，利用它们可以实现很多功能。不过，因为创建闭包必须维护额外的作用域，所以过度使用他们可能会占用大量内存。

七、BOM详解

浏览器对象模型（BOM）以window对象为依托，表示浏览器窗口以及页面可见区域，同时，window对象还是ECMAScript中的Global对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。

以下是BOM的组成部分：

window对象：

location对象：localtion对象的所有属性如下图

navigator对象：（略）此对象在开发中基本用不到。

screen对象：开发中页很少用到,screen对象的属性如下图

history对象：开发中页很少用到

go()方法：可以在用户的历史记录中任意跳转。这个方法接收一个数字参数，正数表示向前跳转，负数表示向后跳转；此方法也可以接收一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置。

back()方法：后退一页

forward()方法：前进一页

1、在使用框架时，每个框架都有自己的window对象以及所有原生构造函数及其他函数的副本，每个框架都保存在frames集合中，可以通过位置或通过名称来访问。

2、有一些窗口指针，可以用来引用其他框架，包括父框架。

3、top对象始终指向最外围的框架，也就是整个浏览器窗口。

4、parent对象表示包含当前框架的框架，而self对象则回指window。

5、使用location对象可以通过编程方式来访问浏览器的导航系统。设置相应的属性，可以返回或整体性的修改浏览器的URL。

6、调用repalce()方法可以导航到一个新URL，同时该URL会替换浏览器历史记录中当前显示的页面。

7、navigator对象提供了与浏览器有关的信息。到底提供哪些信息，很大程度上取决于用户的浏览器；不过，也有一些公用的属性（如userAgent）存在于所有浏览器中。

BOM中还有两个对象：screen和history，但它们的功能有限。screen对象中保存着与客户端显示器有关的信息，这些信息一般只用于站点分析。history对象为访问浏览器的历史记录开了一个缝隙，开发人员可以据此判断历史记录的数量，也可以历史记录中向后或向前导航到任意页面。

八、DOM扩展

虽然DOM为与XML及HTML文档交互制定了一系列核心API，但任然有几个规范对标准的DOM进行了扩展。这些扩展中有很多原来是浏览器专有的，但后来成为了事实标准，于是其他浏览器也都提供了相同的实现。

本章介绍的三个方面的规范如下：

1、Selectors API：定义了两个方法，让开发人员能够基于CSS选择符从DOM中取得元素，这两个方法是querySelector()和querySelectorAll()。

2、Element Traversal：为DOM元素定义了额外的属性，让开发人员能够更方便地从一个元素跳到另一个元素，之所以会出现这个扩展，是因为浏览器处理DOM元素间空白符地方式不一样。

3、HTML5：为标准地DOM定义了很多扩展功能。其中包括在innerHTML属性这样地事实标准基础上提供的标准定义，以及为管理焦点、设置字符集、滚动页面而规定地扩展API。

九、事件

事件是将JavaScript与网页联系在一起的主要方式。“DOM3级事件”规范和HTML5定义了常见的大多数事件。即使有规范定义了基本事件，但很多浏览器仍然在规范之外实现了自己的专有事件，从而为开发人员提供更多掌握用户交互的手段。有些专有事件与特定设备关联，例如移动Safari中的orientationchange事件就是特定关联iOS设备的。

在使用事件时，需要考虑如下一些内存与性能方面的问题。

1、有必要限制一个页面中事件处理程序的数量，数量太多会导致占用大量内存，而且也会让用户感觉页面反应不够灵敏。

2、建立在事件冒泡机制之上的事件委托技术，可以有效地减少事件处理程序的数量。

3、建议在浏览器卸载页面之前移除页面的所有事件处理程序。

事件是JavaScript中最重要的主题之一，深入理解事件的工作机制以及他们对性能的影响至关重要。

十、表单脚本

本小节主要讲解表单的验证及提交，下面是本章的主要内容：（略）

十一、Ajax与Comet

Ajax是无需刷新页面就能够从服务器取得数据的一种方法。关于Ajax，可以从以下方面来总结以下。

负责Ajax运作的核心对象是XMLHttpRequest(XHR)对象。

同源策略是对XHR的一个主要约束，它为通信设置了“相同的域、相同的端口、相同的协议”这一限制。试图访问上述限制之外的资源，都会引发安全错误，除非采用被认可的跨域解决方案。这个解决方案就做CORS（Cross-Origin Resource Sharing,跨域资源共享），IE8通过XDomainRequest对象支持CORS，其他浏览器通过XHR对象原生支持CORS。图像Ping和JSONP是另外两种跨域通信的技术，但不如CORS稳妥。

Comet是对Ajax的进一步扩展，让服务器几乎能够实时地向客户端推送数据。实现Comet的手段主要有两个：长轮询和HTTP流。所有浏览器都支持长轮询，而只有部分浏览器原生支持HTTP流。SSE（Server-Sent Events,服务器发送事件）是一种实现Comet交互的浏览器API，既支持长轮询，也支持HTTP流。

Web Sockets是一种与服务器进行双全攻，双向通信的信道。与其他方案不同，Web Sockets不使用HTTP协议，而使用一种自定义的协议。这种协议专门为快速传输小数据设计。虽然要求使用不同的Web服务器，但却具有速度上的优势。