莽夫

JavaScript高级程序设计

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

JavaScript 简介

JavaScript 的三个部分组成

  1. 核心 ( ECMAScript )

ECMAScript 由ECMA-262定义, 与 Web 浏览器没有依赖关系. Web 浏览器只是 ECMAScript 的宿主环境之一(其他环境如: Node 和 Adobe Flash).

ECMA-262 只定义了 JavaScript 的基础. 提供核心语言功能: 语法, 类型, 语句, 关键字, 保留字, 操作符, 对象.

  1. 文档对象模型 ( DOM )

文档对象模型 ( Document Object Model ): 提供访问和操作网页内容的方法和接口.

  1. 浏览器对象模型 ( BOM )

浏览器对象模型 ( Browser Object Model ): 提供与浏览器交互的方法和接口.

在 HMTL 中使用 JavaScript

元素

6 个可选熟悉

  • async: 表示应该立即下载脚本, 但不应妨碍页面中的其他操作, 比如下载其他资源或等待加载其他脚本. 只对外部脚本文件有效. 不能保证两个外部文件的先后执行顺序, 使用需谨慎.
  • charset: 表示通过 src 属性指定的代码的字符集.
  • defer: 表示脚本可以延迟到文档完全被解析和显示之后再执行. 只对外部脚本文件有效. HTML5 后会忽略该熟悉
  • language: 已废弃
  • src: 包含要执行代码的外部文件, 且可以跨域
  • type: language 的替代属性. 表示编写代码使用的脚本语言的内容类型(也称为 MIME 类型). 默认值为 text/javascript

元素内部的 JavaScript 代码会被从上至下一次解释, 在解释器对元素内部的所有代码求值完毕之前, 页面的其余内容都不会被浏览器加载或显示.

带有 src 熟悉的标签, 标签之间如果有额外的 JavaScript 代码, 会被忽略, 只会下载并执行 src 的外部脚本.

文档模式

由 IE5.5 开始引入文档模式的概念, 随后其他浏览器纷纷效仿.

文档模式的不同主要会影响 CSS 内容的呈现, 但也在某些情况下会影响到 JavaScript 的解释执行.

如果再文档开始处没有发现文档类型声明, 所有浏览器会默认开启混杂模式, 不同浏览器在这种模式下的行为差异会比较大.所以一般需要手动设置文档模式为: 标准模式

html5 的标准模式为:

1
<! DOCTYPE html>

元素

当浏览器不支持 JavaScript 脚本时, 可以使用来显示替代内容. 但在启用了脚本的情况下, 浏览器不会显示的任何内容

基本概念

语法

  1. 区分大小写
    test 和 Test 是两个不同的变量. ECMAScript 中的一切(变量, 函数名和操作符)都区分大小写.

  2. 标识符

  • 第一个字符必须是 字母, 下划线( _ ) 或 $符
  • 其他字符可以是 字母, $符 或 数字

  1. 严格模式

    ECMAScript 5 后开始引入 严格模式 的概念.

    严格模式 下, ECMAScript 3 的一些不确定的行为将得到处理, 对某些不安全的操作会抛出错误.

    在脚本的顶部加上"use strict";即可启用 严格模式. 其为一个编译指示, 告诉支持的 JavaScript 引擎切换到 严格模式.

  2. 变量

    ECMAScript 的变量是松散型的, 即可以用来保存任何类型的数据.

数据类型

  1. 6 种数据类型

    • 基本数据类型: undefined, Null, Boolean, Number, String
    • 复杂数据类型: Object

  2. typeof 操作符

    • “undefined” => 未定义
    • “boolean” => 布尔值
    • “string” => 字符串
    • “number” => 数值
    • “object” => 对象或 null
    • “function” => 函数

    对于未被声明的变量, 使用 typeof 操作符依旧会返回 undefined

    1
    alert(typeof age); // "undefined"

  3. Boolean 类型

    在编译流控制语句 ( 如 if 语句 ) 会自动执行 Boolean 转换, 将其转换成 Boolean 类型.如:

    1
    2
    3
    4
    var message = "hello world";
    if (message) {
      console.log(message); // "hello wordld"
    }

    各种数据类型及其对应转换规则

    | 数据类型 | 转换为 true 的值 | 转换为 false 的值 |
    | ————- | ———————————- | ————————- |
    | Boolean | true | false |
    | String | 任何非空字符串 | “ “(空字符串) |
    | Number | 任何非 0 值(包括无穷大) | 0 和 NAN |
    | Object | 任何对象 | null |
    | Undefined | 不适用 | undefined |

  4. Number 类型

    1. 整数

    整数可以通过 十进制, 八进制 ( 以 8 为基数 )和十进制 ( 以 16 为基数 )

    其中八进制字面量在严格模式下是无效的.

    1
    2
    3
    4
    5
    6
    7
    8
    var intNum = 50; // 十进制

    var octalNum1 = 070; // 八进制的56
    var octalNum2 = 079; // 无效的八进制 -- 解析为79
    var octalNum3 = 08; // 无效的八进制 -- 解析为8

    var hexNum1 = 0xa; // 十六进制的10
    var hexoNum2 = 0x1f; // 十六进制的31

    在进行算术计算时, 所有八进制和十六进制的数最终都会被转换成十进制数.

    1. 浮点数

      定义: 数值中包含一个小数点, 并且小数点后面必须至少一位数字.

      保存浮点数值需要的内存时间是保存整数值的两倍, 因此 ECMAScript 会不失时机的将浮点数值转换成整数值.

      用科学计数法来标识浮点数值的极大或极小值.

      1
      var floatNum = 3.122e7; // 等于31220000

      浮点数的最高精度是 17 位小数, 但在进行算术计算时其精确度远远不如整数. 如:

      1
      2
      3
      var a = 0.1,
        b = 0.2;
      console.log(a + b == 0.3); // false, a+b=0.30000000000000004

      浮点数值计算会产生舍入误差是使用基于 IEEE754 数值的浮点计算的通病, ECMAScript 并非独此一家.详情见《0.1+0.2 为什么不等于 0.3》

5.