《JavaScript高级程序设计》读书笔记

Posted 2020-09-28

第一章 JavaScipt简介

完整的Javacript由以下三部分组成：核心（ECMAScript）、文档对象模型（DOM）、 浏览器对象模型（BOM）

核心（ECMAScript）:由ECMA-262定义，提供核心语言功能

ECMA-262定义:

（1）语法（2）类型（3）语句（4）关键字（5）保留字 （6）操作符

WEB浏览器只是ECMAScript的宿主环境，不仅提供基本的ECMAScript的实现，也会提供该语言的拓展，以便语言和环境的交互。

例如：在web宿主环境下的拓展 DOM

注：宿主环境：WEB浏览器、Node(服务端javacript平台)和Adobe Flash

文档对象模型（DOM）:文档对象模型。把整个页面映射为一个多层节点结构。html或XML页面中的每个组成部分都是某种类型的节点，这个节点又包含着不同类型的数据。借助DOM提供的API,开发人员可以轻松地删除、添加、替换、修改任何节点。

浏览器对象模型（BOM):支持访问和操作浏览器窗口

第二章 在HTML中使用javascript

一、引用方式

        1、内部引用：

<script type="text/javacript">

</script>

        注：只需要指定type属性

       2、外部引用:

<script type="text/javascript" src="example.js"></script>

二、标签的位置

       <script> 元素内部的代码将被至上而下依次解释。在浏览器对<script>元素内部的所有代码求值完毕之前，页面中的其余内容都不会被浏览器加载或显示。所有一般放在</body>之前加载。

三、延迟脚本和异步脚本

      1、延迟脚本：defer属性表明脚本在执行时不会影响页面的构造，脚本会被延迟到整个页面都解析完毕后再运行

<script type="text/javacript" defer="defer" src="exaple1.js"></script>

       注：

            （1）、只适用于引用外部文件。

            （2）、HTML5规范要求脚本按照他们出现的先后顺序执行，因此当存在两个延时脚本时，第一个延迟脚本会优先于第二个延迟脚本执行，而这两个脚本会优先于DOMContentLoaded时间触发前执行

       2、异步脚本：async 不让页面等待两个脚本下载和执行，从而异步加载页面其他内同

        注：

             （1）、只适用于引用外部文件

             （2）、与defer不用，如果存在两个脚本文件，第二个脚本文件可能会在第一个脚本文件之前执行。异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。

       小结：

             （1）所有<script>元素都会按照它们在页面中出现的先后顺序被解析。在不使用defer和async属性的情况下，只有在解析完前面<script>元素的代码之后，才会开始解析后面<script>元素中的代码

             （2）使用defer属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定他们的顺序执行

             （3）使用async属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照他们在页面中出现的顺序执行。

             （4）使用<noscript>元素可以指定在不支持脚本的浏览器中显示替代内容。但在启用了脚本的情况下，浏览器不会显示<noscript>元素中的任何内容。

四、浏览器加载顺序

         随着页面的加载，在默认情况下，浏览器会按照脚本在HTML中出现顺序依次对每个脚本进行下载，解析和执行。在处理脚本的过程中，浏览器既不会下载该script元素出现的内容，也不会呈现这些内容。这成为阻塞行为。

 

第三章 基本概念

一、区分大小写

         ECMAScript中的一切（变量、函数名和操作符）都区分大小写

二、标识符（变量、函数、属性的名字、函数的参数）

       1、第一个字符必须是一个字母、下划线（-）或一个美元符号（$）

       2、其他字符可以是字母、下划线、美元符号或者数字

       3、采用驼峰大小写格式：第一个字母小写，剩下的每个单词的首字母大写

三、注释

        1、单行注释： //

        2、多行注释：

/*

 *

 *

 */

四、严格模式

      为javacript定义了一种不同的解析与执行模型。在严格模型下，一些不确定的行为将得到处理，而且不安全的操作也会抛出错误。要在整个脚本中启用严格模式，可以在顶部添加以下代码："use strict"    （相当于编译提示）

      在函数内部的上方包含这条编译提示，也可以在函数严格模式下执行

function doSomething () {

  "use strict";

  //函数体

}

五、语句

      ECMAScript中语句以一个分号结尾；如果省略分号，则由解析器确定语句的结尾。不要省略；

六、关键字和保留字 

      1、关键字：

break、do、instanceof、typeof、case、else、new、var、catch、finally、return、void、continue、for、switch、while、debugger、function、this、with、default、if、throw、delete、in、try

      2、保留字：

abstract、enum、int、short、boolean、export、interface、static、byte、extends、long、super、char、final、native、synchronized、class、float、package、throws、const、goto、private、transient、debugger、implements、protected、volatile、double、import、public、let、yield

       3、其他

eval、arguments

七、变量

      定义：ECMA的变量是松散型的，可以用来保存任何类型的数据。每个变量仅仅是一个用于保存值的占位符。

      语法：

               1、未经初始化的变量，该变量可以保存任何值。系统默认给message赋值undefined

var message;

              2、这一初始化变量并不会把它标记为字符串类型。初始化的过程是给变量赋一个值。因此，可以在修改变量值的同时修改值的类型。

var message="hi"；

             3、一条语句定义多个变量

var message="hi",

    found=false,

    age=29;

      注意：

               用var 定义的变量是局部变量，省略var定义的变量是全局变量（不推荐使用）

八、数据类型

      ECMAScript ： 5种简单数据类型：Undefined、Null、Boolean、Number和String，1种复杂数据类型：object

     1、Undefined：underfined类型只有一个值，它本身。在声明变量未初始化时，这个变量的值就是undefined。引入目的：引入这个对象是为了正式区分空对象指针与未经初始化的指针。typeof检测为声明，或者声明后未被赋值的变量返回的都是undefined

     2、Null： 空对象指针，如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null而不是其他值。这样一来，只要直接检查null值就可以知道相应的对象是否已经保存了一个对象的引用。

var car = null;

alert(typeof car);

typeof检测null值会返回"object"

          Undefined、Null的区别：undefined值派生自null，尽管null和undefined有这样的关系，但它们的用途完全不同。只要意在保存对象的变量还没有真正保存对象，就应该明确地让变量保存null值。

      3、Boolean类型

           该类型只有两个字面值：true和false。但是true不一定等于1，而flase不一定等于0。在执行流控制语句时，系统会自动转。 强制装换：Boolean（）。注意：True和False都不是Boolean值，只是标示符

           转换规则：

数据类型	true	false
Boolean	true	Flase
String	任何非空字符串	" "(空字符串)
Number	任何非零数字值	0和NaN
Object	任何对象	Null
Undefined	不适用	undefined

       4、Number类型

            （1）数字的数据类型：

                     整数：在算术运算时，所有八进制和十进制表示的数值最终都将被转换成十进制

var intNum = 55;  //  十进制：

var octalNum1 = 079;  // 八进制：以0开头            

var hexNum1 = 0xA; // 十六进制：以0x开头         

                   浮点数：该数值中必须包含一个小数点，并且小数点后面必须至少有一个数字， 由于保存浮点数值需要的内存空间是保存整数值的两倍，所以ECMAScript会不失时机地将浮点数值转换为整数值。

var floatNum1 = 1.1;

             （2）数值转换

                      有三个函数能把非数值转换为数值： Number()、parseInt()、 ParseFloat()。Number() :适用于任何数据类型。parseInt()、ParseFloat()：专门把字符串转换成数值

        5、NaN（Not a Number）：这个数值用于表示一个本来要返回数值的操作数未返回数值的情况。

             特点：
                      任何涉及NaN的操作都会返回NaN

                      NaN与任何值都不相等。包括NaN本身

                      isNaN(): 确定这个参数是否“不是数值”。在接收参数后，会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值。例如字符串“10”或Boolean

       6、String类型

           （1）表示：

var firstName = "Nichoas";  // 双引号 “”

var lastName= ‘Zakas‘;  // 单引号 ‘ ‘

           （2）、字符串面量

字面量	含义
\n	换行
\t	制表
\b	退格
\r	回车
\f	进纸
\\	斜杠
\‘	单引号‘
\"	双引号“
\xnn	以十六进制代码nn表示一个字符。\x41 表示"A"
\unnnn	以十六进制代码nnnn表示的一个Unicode字符

           （3）、特点：串是不可变的，也就是说，字符串一点创建，它们的值就不能改变。要改变某变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值得字符串填充该变量。

           （4）、常用的属性和方法

                        属性：length属性：计算字符串的长度

                        方法： 

                                  toString()  数值、布尔值、对象和字符串值都含有这个方法。但是null和undefined值没有这个方法。在多数情况下，调用tostringI()方法不必传递参数。但是，在调用数值的toString()方法时，可以传递一个参数：输出数值的基数。默认情况下，toString()方法以十进制格式返回字符串表示。通过传递基数，toString()可以输出以二进制、八进制、十进制乃至其他任意有效进制

var num = 10;

alert( num.tostring());  默认十进制// "10"

alert( num.tostring(2));  //"1010"

alert( num.tostring(8));  //"12"

alert( num.tostring(10)); //"10"

alert( num.tostring(16)); //"a"

                                 String()：在不知道要转换的值是不是null和undefined的情况下，还可以使用转型函数String(),这函数能将任何类型的值转换为字符串。

      7、Object类型

              定义：对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。创建对象的实例并为其添加属性和方法

             例：

var o = new object();

// 不给构造函数传递参数时，则可以省略后面的那一对圆括号（不推荐使用）

//object的每个实例都具有以下属性和方法。

//valueof(): 返回对象的字符串、数值、布尔值表示。

//toString(): 返回对象的字符串表示。

 

八、操作符

       算术操作符、位操作符、关系操作符和相等操作符。他们可以使用很多值，例如：字符串、数字值、布尔值、甚至对象。在应用于对象时，相应的操作符通常都会调用对象的valueof()方法和（或）toString()方法

第四章 变量、作用域和内存问题

一、Javascript变量可以用来保存两种类型的值：

        1、基本数据类型：Undifined、Null、Boolean、Number、String

        2、引用对象类型

             特点：

                      基本类型值在内存中占据固定大小的空间，被保存在栈内存中

                      引用类型的值是对象，保存在堆内存中

                     从一个变量向另一个变量复制基本类型的值，会创建这个值的一个副本

                     包含引用类型值得变量实际上包含的不是对象本身，而是指向该对象的指针

                     从一个变量向另一个变量复制引用类型的值，复制的是指针，因此两个变量最终都指向同一个对象

                     确定一个值是那种基本类型可以使用typeof操作符，而确定一个值是哪种引用类型可以使用instanceof操作符。

二、变量的执行环境

        所有的变量都存在一个执行环境（也称为作用域），这个执行环境决定了变量的生命周期，以及哪一部分代码可以访问其中的变量。

       1、环境有全局执行环境（全局环境）和函数执行环境之分；

       2、每次进入一个新执行环境，都会创建一个用于搜索变量和函数的作用域链

       3、函数的局部环境不仅有权访问函数作用域中的变量，而且有权访问其包含父环境，乃至全局环境；

       4、全局环境只能访问在全局环境中定义的变量和函数，而不能直接访问局部环境中的任何数据

三、JavaScript是一门具有自动垃圾收集机制的编程语言，开发人员不必担心内存分配和回收问题。

      1、离开作用域的值将被自动标记为可回收，因此将在垃圾收集期间被删除

      2、“标记清除”是目前主流的垃圾回收算法，给当前不使用的值加上标记，然后再回收其内存

      3、“引用计数”跟踪记录所有值被引用的次数。Javascript引擎目前都不再使用这种算法；但在IE中访问非原生JavaScipt对象时，这种算法仍然会导致问题

      4、当代码中存在循环引用对象时，“引用计数”算法就会导致问题。

      5、解除变量的引用不仅有助于消除循环引用现象，而且对垃圾收集也有好处。为了确保有效地回收内存，应该及时解除不再使用的全局对象、全局对象属性以及循环引用变量的引用