《javascript高级程序设计》（第三版）读书笔记

时间  2019-12-13
标签 javascript 高级 程序设计 第三 读书 笔记 栏目 JavaScript 繁體版
原文   原文链接

书的连接送上~若是挂了请私信哦~javascript

连接: https://pan.baidu.com/s/1iYC1x4DFFX05X48P_Wn9Hw html

提取码: muzphtml5

--------------------------------如下正文--------------------------------java

ch01 javascript简介c++

1.1  简史web

javascript是在1995年由netspace公司开发的，后由ecma协会定义了脚本语言的统一标准。chrome

1.2  实现typescript

javascript的实现主要分为三个部分：核心ECMAScript、文档对象模型DOM、浏览器对象模型BOMapi

>ECMAScript浏览器

web浏览器是ECMAScript的宿主环境之一，它提供了基本的ECMAScript实现以及扩展，以便语言与环境之间对接交互。其余的宿主环境如Node和Adobe Flash。

>DOM

DOM全称Document Object Model文档对象模型，是针对xml但通过扩展用于html的api，它把整个web页面映射为一个多层节点结构，这些节点包含着不一样类型的数据，经过DOM，咱们能够对文档节点进行操做（增删改）等，DOM根据级别能够分为DOM一、DOM二、DOM3几个级别

>BOM

BOM全称Browser Object Model浏览器对象模型，经过BOM咱们能够控制浏览器显示的页面的之外的部分，习惯上咱们把全部针对浏览器的javascript扩展算做BOM的一部分，如

通常来讲，BOM主要是对window对象和navigator对象的实现，在html5以后，bom实现的标准愈来愈统一

 

ch02 在html中使用javascript

2.1  <script>元素

<script>标签是由netspace创造的，后来它被加入正式的html标准里，它也是向html页面插入javascript的主要方法。

>标签属性

在html4.01中，<script>主要有如下六个属性：

  • async（异步）：可选。这个属性只适用于外部脚本文件，它的目的是不让页面等待外来脚本的下载和执行，从而异步加载页面其余内容，所以在使用了async的异步脚本里不要在加载期间修改DOM。异步脚本不必定会按照它出现的顺序执行，所以引入的多个异步脚本不该该存在依赖关系，它必定会在页面的load事件触发以前加载。
  • defer（延迟）：可选。这个属性一样只适用于外部脚本文件，告诉浏览器先下载，但延迟执行，应用了这个属性的脚本会被延迟到整个页面都解析完毕后（即在</html>后）再运行。一个延迟脚本的顺序会先于DOMContentLoaded事件触发，多个延迟脚本会按照出现顺序执行，（但实际上多是不肯定的）所以最好最包含一个延迟脚本。
  • language：已废弃
  • src：可选。表示包含要执行代码的外部文件
  • type：可选。表示编写代码使用的脚本语言的内容类型（MIME）。若是不指定，默认值是text/javascript。在非IE浏览器中还可使用application/javascript和application/ecmascript。
  • charset：可选。表示经过src属性指定的代码的字符集，不多用

>标签位置

传统的来讲，<script>标签的位置应该是放在<head>里面的，可是这样作觉得这必须等到所有js代码都被下载、解析、执行完成以后才能开始渲染页面内容（浏览器遇到<body>标签才开始呈现内容），这样无疑会致使浏览器在渲染页面时会出现明显的延迟。所以最好的作法是把js代码放在主要内容以后，</body>以前，这样在解析js代码以前会优先渲染页面，用户也会感到页面打开速度变快了。

2.2  嵌入代码与外部文件

通常认为最好的作法仍是尽量使用外部文件来包含js代码，优势以下：

  • 可维护性：分布在不一样html文件里的js维护起来可能会很是麻烦，可是若是把全部js文件都放在一个文件夹里，维护起来比较轻松
  • 可缓存：若是有两个页面都使用一个js文件，那么这个文件只须要被下载一次，这样能够加快页面加载的速度。
  • 适应将来：经过外部文件来包含js无须使用前面提到的XHTML或者注释hack

2.3  文档模式

文档模式最初是由IE5.5引入的，能够经过文档类型doctype切换实现，通常提到文档模式会有混杂模式和标准模式，混杂模式会让IE的行为与IE5相同，而标准模式会让IE的行为更接近标准行为。

不一样的文档模式主要影响CSS内容的显示，可是在某些状况下也会影响到js的解释执行。若是在文档开始处没有发现文档类型声明，默认开启混杂模式，这样在不一样浏览器下的行为差别特别大，能够经过如下代码切换文档模式

<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC
"-//W3X//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">

<!-- HTML 5 -->
<！DOCTYPE html>

2.4  <noscript>元素

该元素用于在不支持js的浏览器或者浏览器支持可是js被禁用的状况下，他能够显示替代的内容。这个元素能够包含可以出如今<body>中的任何html元素，除了<script>。

例子：

<html>
<body>
   <noscript>
         <p>本页面须要浏览器支持（启用）JavaScript</p>
   </noscript>
</body>
</html>

在脚本无效的状况下，用户能够看到这条提示消息，然而在启用了脚本的浏览器中，用户不会看到它

 

ch03  基本概念

3.1  语法

>命名规则

  • 区分大小写，驼峰大小写格式（第一个字母小写，剩下的每一个单词的首字母大写）
  • 第一个字符必须是一个字母、下划线（_）或者一个美圆符号（$）
  • 其余字符能够是字母、下划线、美圆符号或者数字
  • 不能是关键字

>注释

分为行级注释和块级注释

//单行注释

/*
*一个多行
*（块级）注释
*/

>严格模式

它为js定义了一种更严格的解释与执行模型，在严格模式下，ES3中的一个写不肯定的行为将获得处理，并且对于某些不安全的操做也会抛出错误，执行结果会有很大不一样。在顶部注明

"use strict";

将会在整个脚本中启用严格模式。也能够在函数内部的上方注明这条编译指示

function doSth(){
     "use strict";
     //函数体   
}

支持严格模式的浏览器包括IE10+、Firefox 4+、Safari 5.1+、Opera 12+和Chrome

>语句

js语句能够省略分号;，可是建议仍是加上;，加上它能够避免不少错误，开发人员也能够放心的经过喊出多余的空格来压缩ECMAScript代码，一样解析器就能够没必要再花时间推测应该在哪里插入分号了。

条件控制语句在执行一条代码时最好也要加上花括号{}，这样可让编码意图更加清晰，也能下降修改代码时出错的概率

3.2  变量

Js变量是松散类型的，能够用来保存任何类型的数据，定义时要使用var（ES5）、let或者const（ES6），未初始化时保存值是undefined，初始化时变量也不会被标记为任何类型，所以能够修改变量为任何其余数据类型

>做用域（我的补的，书上并无过多解释）

提到var、let和const就不得不来谈一下js的做用域问题。做用域在ES5和ES6中是不太同样的，在ES5中，只存在全局做用域和函数（局部）做用域，并不存在块做用域，所以不少在java、c++中一些看起来很正常的写法在js里的结果会变得很是使人难以理解。而在ES6中，为了改变这种状况，引入了let和const，这为js带来了块做用域。关于var和let的做用域区别，网上大可能是说var是全局变量，let是局部变量，其实否则，这里面有不少细微的差异。接下来就详细写写我认为的正确理解。同时还能够参考typescript官网的一篇文档的解释

>>ES5中的做用域

在es5中，定义变量只有一个var，或者咱们能够选择不写var，在不写的状况下定义的变量必定是全局变量。那么var定义的变量究竟是不是全局变量？这点和var定义变量时所在的上下文有很大的关系。

a = 10;//全局变量
var a = 10; //window做用域下的变量 = 全局变量
(function(){
  var b =10;
  console.log(b);  //10
})();
console.log(b); //ReferenceError: b is not defined

在chrome控制台的输出：

由此能够看出var定义的变量做用域与上下文有很大关联。在js里一些很让人迷惑的输出结果还和变量提高离不开关系：

a = 10;

(function(){
  console.log(a);  //undefined
  var a = 5;
})();

控制台输出：

其实上面的代码在js进行解释的时候是这个样子

a = 10;

(function(){
  var a = undefined;
  console.log(a);  //undefined
  a = 5;
})();

在js里不只变量会提高，函数声明也会提高，这里再也不作扩展

 

>>ES6中的做用域

ES5中var的声明实在使人头疼，所以在ES6中提出了let和const，let声明的是块级做用域的变量，所谓块级做用域，能够简单理解为在一个{}里。

for(let i =0; i<10; i++){
      //do sth...
}

console.log(i); //undefined

最重要的是，let和const不存在变量提高，它的这种特性称为暂时性死区（在某变量被let声明以前，任何对该变量的访问都是语法错误ReferenceError）

 3.3  数据类型

五种简单数据类型（或称基本数据类型）Undefined、Null、Boolean、Number、String +一种复杂数据类型Object（Function、Array等）

>typeof操做符

用于检测给定变量的数据类型，返回值是数据类型的小写，即"undefined"、"boolean"、"string"、"number"、"object"、"function"

须要特别注意的地方是：

null被认为是一个空的对象引用

>Undefined

这个类型只有一个值undefined。通常在使用var声明变量但卫队其加以初始化时，这个变量的值就是undefined。可是除了未初始化的变量，未声明的变量在typeof操做符下也是undefined

>Null

这个类型也是只有一个值null，从逻辑角度来看，null表示的是一个空对象指针，这也是typeof检测null值会返回"object"的缘由。要注意null和undefined的区别

>Boolean

该类型只有两个字面值true和false，这两个值与数字之不是一回事，所以true不必定等于1，false也不必定等于0，能够调用Boolean()函数将任何数据类型转换成一个Boolean值

>Number

支持表示整数和浮点数值，除了十进制还能够表示八进制（以0开头）或者十六进制（以0x开头）。

js里能够保存 +0 和 -0，这两个值相等

>>浮点数值

浮点数值的最高精度是17位小数，可是js的数值类型是基于IEEE754数值，这个格式的数值存在一个问题：

也就是0.1+0.2！=0.3

>>数值类型

Js能表示的数值范围是

若是某个值不在这个范围将会被转换成Infinity值，或者-Infinity。Infinity是不能参与计算的，一个值是否是有穷的，可使用isFinite()函数

>>NaN

即非数值Not a Number。这个数值用于表示一个原本要返回数值的操做数未返回数值的状况，避免抛出错误。例如：

NaN自己有两个特色：第一，任何牵扯到NaN的计算都会返回NaN； 第二，NaN与任何值都不相等，包括它自身

那么若是咱们要测试一个值是否是NaN该怎么办呢？为此js提供了isNaN()函数，它在接收到一个值以后会尝试将这个值转换成数值，若是不能转换成数值将会返回true

 >>数值转换

将非数值转换成数值有三个函数： Number()、ParseInt()、ParseFloat()

因为Number的转换规则很复杂，所以多用的是parseInt()函数

>String

在js里单引号和双引号都是容许的，对字符串的解释方式相同。

>>字符字面量

>>转换为字符串

toString()方法，除了null和undfined以外都有这个方法，通常不须要传递参数，可是在Number类型的toString()方法中能够传递一个参数，表示数值的基数，能够输出二进制、八进制、十六进制等

转型函数String()，该方法的规则是若是该类型有toString()方法，则调用；若是没有，null返回"null"，undefined返回"undefined"

 >Object

js的object是全部对象的基础，都具备如下属性和方法：

3.4 操做符

>一元操做符

 --和++这里就略过了，主要记一下+和-操做符对非数值影响。

对非数值应用+时，布尔值true和false会转换成1和0，字符串值会被按照一组特殊的规则进行解析，对象先是调用valueOf()和/或toString()方法，再转换获得的值。

应用-时，主要是应用于数值类型表示负数，应用于非数值时会遵循和+相同的规则，可是会将最后的值转换成负数。

>位操做符

>>非（NOT）

用一个 ~ 表示，返回的是数值的反码=操做数的负值-1

>>与（AND）

用一个 & 表示，返回的是两个数的二进制码的位与运算结果

>>或（OR）

用一个 | 表示，返回的是两个数的二进制码的位或运算结果

>>异或（XOR）

用一个 ^ 表示，返回的是异或操做的结果，只有两个数值对应位上只有一个1时才返回1（相同为0，不一样为1）

>>左移

用 << 表示，会将数值的x全部位向左移动指定的位数y，返回的结果是 x*2^y

>>右移

用 >> 表示，会将数值x的全部位向右移动指定的位数y，返回的结果是 x/2^y

>>无符号右移

用 >>> 表示，会将数值的全部32位都向右移动，对正数来讲没有影响；对负数来讲，会将负数的二进制码当成正数的二进制码。

这里，当对-64 执行无符号右移 5 位的操做后，获得的结果是 134217726。之因此结果如此之大，是由于-64 的二进制码为11111111111111111111111111000000，并且无符号右移操做会把这个二进制码当成正数的二进制码，换算成十进制就是 4294967232。若是把这个值右移 5 位，结果就变成了00000111111111111111111111111110，即十进制的 134217726。

>布尔操做符

>>逻辑非

用一个 ! 表示，能够应用于任何值，都会返回一个布尔值。!操做符首先会将它的操做数转换成一个布尔值，而后再对其求反，规则是：

>>逻辑与

用 && 表示，能够应用于任何类型的操做数，在有一个操做数不是布尔值的状况下，逻辑与操做不必定返回布尔值，此时遵循下列规则：

逻辑与是个短路操做，若是第一个操做数就是false，那么就不会在对第二个操做数求值。也不能在逻辑与操做中使用未定义的值，不然会发生错误，除非在判断这个未定义的值以前就已经有操做数为false了。

>>逻辑或

用 || 表示，与逻辑与操做类似，若是有一个操做数不是布尔值，逻辑或也不必定返回布尔值，判断逻辑是

和逻辑与操做符类似，它也是短路操做符。也就是说，若是第一个操做数的求值结果为true，就不会对第二个操做数求值了。

 >乘性操做符

js有三个乘性操做符：乘、除、求模，在操做数为非数值的状况下会执行自动的类型转换，也就是说会先使用Number()将它转换成数值。

>>乘法

用一个 * 表示。在处理特殊值（NaN，Infinity，非数值）的状况下，遵循如下规则：

>>除法

用一个 / 表示。处理非数值的状况下，和 * 一致，在处理特殊值的时候，也有一些规则：

>>求模

用一个 % 表示，处理非数值时，三个乘性运算符相同；求模处理特殊值时，也有规则：

>加性操做符

>>加法

用 + 表示，在两个操做数都是数值的状况下，遵循如下规则：

其中特别须要注意的是Infinity+ -Infinity = NaN

若是有一个操做数是字符串，则不管另外一个操做数是是什么，最后结果都会是字符串，如：

若是有一个操做数是对象、数值或者布尔值，则调用toString()方法取得对应的字符串值，而后再按照字符串规则拼接。

>>减法

与加法相似，规则以下：

 

特别须要注意的是 Infinity - Infinity = NaN ; -Infinity - -Infinity = NaN，之后后面三条 +0 和 -0 的减法

若是有一个操做数不是数值，这点和 + 不同，减法会先调用Number() 或者 valueOf() 转换成数值，在进行计算：

>关系操做符

关系操做符一共有四个，＜ ， ＞ ， ≤  ， ≥ ，返回值是一个布尔值，比较规则以下：

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程