Skip to content

Latest commit

 

History

History
436 lines (233 loc) · 14.6 KB

JavaScript高级程序设计-笔记.md

File metadata and controls

436 lines (233 loc) · 14.6 KB

JavaScript高级程序设计-阅读笔记


简介


  1. 一个完整的JavaScript实现由以下三个不同的部分组成:

    • 核心(ECMAScript)

    • 浏览器对象模型(DOM)

    • 文档对象模型(BOM)

  2. ECMAScript标准的组成部分:

    • 语法

    • 类型

    • 语句

    • 关键字

    • 保留字

    • 操作符

    • 对象

  3. ECMAScript与JavaScript的关系:

    ECMAScript 是 JavaScript 的标准规范,JavaScript 是 ECMAScript 的实现。

  4. 文档对象模型(Document Object Model)

    • DOM 是针对XML、但经过拓展,用于HTML的应用程序编程接口(API)

    • DOM 把整个HTML页面映射为一个多层节点结构

    • DOM 是提供访问和操作网页内容的方法和接口

  5. DOM 1级

    DOM 1级由两个模块组成,DOM核心与DOM HTML。DOM核心规定的是如何映射基于XML的文档结构,简化访问与操作。DOM HTML模块是在DOM核心的基础上,加以拓展,添加了针对HTML的对象和方法。

  6. DOM 2级

    DOM2级分别由以下模块组成:

    • DOM视图,定义了跟踪不同文档

    • DOM事件,定义了事件与事件处理的接口

    • DOM样式,定义了基于CSS为元素应用的接口

  7. DOM 3级

    新增了验证文档的方法,DOM验证模块。

  8. 浏览器对象模型(Browser Object Model)

    • 弹出新浏览器窗口的功能( window.open() )

    • 移动,缩放和关闭浏览器窗口功能

    • 提供浏览器详细信息的 navigator 对象

    • 提供浏览器所加载页面的详细信息的 location 对象

    • 提供浏览器历史记录信息的 history 对象

    • 提供用户显示器分辨率详细信息的 screen 对象

    • cookies 的支持

    • XMLHttpRequest 和IE的 ActiveXObject 这样自定义对象

    与浏览器交互的API


script元素

传统做法是将<script>元素放在页面<head>元素内,这意味着页面需要等待所有的<script>下载、解析、执行完成后,才开始渲染页面,如果<script>元素过多,网页会出现明显的延迟,延迟期间浏览器长时间空白。所以现在的做法是将<script>元素放在</body>前。
  1. script定义了下列6个属性

    • async : 可选,表示应该立即加载JS脚本。(异步脚本只适合外部脚本文件,告诉浏览器立即下载文件。标记async的脚本并不保证按照指定他们的先后顺序执行。建议异步脚本不要在加载期间修改DOM。)

    • defer : 可选,表示脚本可以延迟到文档完全被解析和显示之后再执行(延迟脚本,页面中最好只包含一个延迟脚本)

    • charset : 可选,表示通过src属性指定的代码的字集符,一般忽略

    • language : 已废弃

    • src : 可选,表示包含要执行代码的外部文件

    • type : 可选,可以看成是language的替代属性

  2. < noscript > 元素可以指定在不支持脚本的浏览器中显示的替代内容

引入JS文件具有的优点 : 1、可维护性 ; 2、可缓存(同一文件只需要加载一次) ; 3、 适应未来。


文档模式

  1. 文档模式是通过使用文档类型(doctype)切换实现的

    • 文档模式分为混杂模式标准模式,这两种模式主要影响CSS内容的呈现。

    • 混杂模式会让IE的行为与IE5相同,而标准模式则让IE的行为更接近标准行为。

    HTML文件没有发现文档类型声明(!Doctype),则所有浏览器都会默认开启混杂模式。


基本概念

  1. 区分大小写

    在ECMAScript中的一切(变量,函数名和操作符)都区分大小写

    var Num = 1 ,
        num = 2 ;
    
    Num + num // 3
    
    
  2. 标识符

    标识符 是指变量,函数,属性的名字或函数的参数。标识符可以是按照下列格式规则组合起来的一或多个字符:

    • 第一个字符必需是一个字母,下划线(_),或者是美元符号($)。

    • 其他字符可以是字母,下划线,美元符号或者数字。

    • 不要把关键字、保留字作为标识符。

  3. 严格模式

    是为了JavaScript定义了一种不同的解析与执行模型,在严格模式下,ECMAScript3 中的一切不确定行为都将得到处理。而且对某些不安全的操作,也会抛出错误。

    "use strict" 编译指示,用于告诉支持JavaScript引擎切换到严格模式。

  4. 语句

    ECMAScript中的语句以一个分号结尾,建议不要省略分号。

  5. 关键字与保留字

    • 特定用途的关键字,是语言保留,不能用作标识符。

    • 保留字是将来可能被用于关键字。

    • 使用关键字作为标识符,会导致"Identifier Expected"错误。

  6. 变量

    ECMAScript的变量是松散类型的,松散类型就是可以用来保存任意类型的数据。

    • 变量仅仅是一个用于保存值的占位符。

    • 未经过初始化的变量,会保存一个特定的值 —— undefined。

    • 用var操作符定义的变量将成为 定义该变量的作用域中 的局部变量。

    编程语言分为静态(类型)语言和动态(类型)语言,动态语言在定义变量时,不需要指定数据类型,在第一次赋值时,语言内部就会将数据类型记录(如 javaScript)。静态语言是需要在第一次声明变量时,写下变量的数据类型(如 C 或 Java)。

    • 省略 var 操作符定义的变量,为全局变量,在严格模式下,未声明的全局变量在赋值时,会导致 ReferenceRrror 错误。
    var message = "hello";
    
    function sayHi (){
        "use strict";
        
        flag = true; // ReferenceRrror
    }
    
    • 严格模式下不能声明为 eval 或 arguments 的变量。

    • 建议使用单 var 声明多个变量

    var message = "variable",
        flag = true;
    

数据类型

ECMAScript中有5种简单数据类型(基本数据类型,值类型): String,Number,Boolean,Undefined,Null。1种复杂数据类型(引用数据类型):Object

Object本质是由一堆无序的名值对{key : value}组成的

typeof 是一个操作符而不是函数。
  1. String类型 (字符串)

    ECMAScript中的字符串,是由单引号或双引号包裹的字符序列。字符串是不可变的,字符串一旦创建,它的值就不可更改。要改变某个变量保存的字符串,首先要撤销原来的字符串,然后再用另一个包含新值的字符串填充该变量(重新赋值覆盖)

    • 转义字符 ' \ '

    • 特殊的字符串,也叫做转义序列,用来表示非打印字符.

    • 转换字符串 toString(); toString()方法以十进制格式返回数值的字符串表示,通过传去参数,toString(arguments = number)可以输出二进制、八进制、十六进制。

    var Num = 10086;
    Num.toString() // "10086"
    • 如果值有 toString()方法,则调用该方法并返回相应结果。

    • 如果值是NUll,则返回“null”。

    • 如果值是undefined,则返回“undefined”。

    因为null和undefined没有toString()方法。所以返回自身的字面量。

  2. Number类型(数值)

    最基本的数值字面量是十进制整数。

    八进制字面量在严格模式下是无效的,会抛出JavaScript错误

    • 浮点数最高精度是17位小数。浮点数计算精度不如整数。

    • 浮点数计算存在误差,慎用或使用Math对象的方法取整或取浮点数值

    • 确定一个数值是不是有限浮点数,可以使用isFinite()函数。如果是,返回true。

    • parseFloat()只解析十进制。

    • NaN与任何值都不相等。

    有三个函数可以把非数值转换成数值:Number()、parseInt()、parseFloat()。

  3. Boolean类型(布尔值)

    • Boolean类型只有两个值,true和false。Boolean类型区分大小写,所以true与True不等。

    • 除了true和false可以在逻辑判断时表示Boolean值,其他数据类型也可以。

    • 可以转换为false的值有:

    • 非空字符串

    • 0与NaN

    • null

    • undefined

  4. undefined类型

    undefined类型只有一个值,就是undefined,在使用var声明变量并且未赋值时,这个变量的值,默认是undefined。

    未声明的变量无法访问,但是可以被typeof检测。

  5. null类型

    null类型也是只有一个值的数据类型,它的值就是Null。Null值表示一个空对象的指针。

    如果定义的变量,预备赋值为对象,那么最好将该变量初始化为Null。这样做不仅可以体现Null作为空对象指针的惯例,而且有助于进一步区分null和undefined。

  6. Object类型(详情请看面向对象部分) 所有Object都是Object类型的实例。

    var obj = {}; // 对象字面量
    var Obj = new Object(); // 构造函数

    所有Object类型的实例都具有以下方法或属性:

    • constructor:保存用于创建当前对象的函数。

    • hasOwnProperty:检测指定属性是否存在当前对象的实例中(this.names)

    • isPrototypeOf:检测指定属性是否存在当前对象的原型中(prototype.names)

    • PropertyIsEnumerable:检测指定属性是否能使用for-in语句枚举(遍历)

    • toLocaleString():返回Object,以字符串表示。

    • toString():返回Object,以字符串表示。

    • valueOf():返回Object,以字符串、数值或布尔值表示。


操作符

  1. 只操作一个值的操作符叫做一元操作符,递增(++)与递减(--)

    • 前置递增(递减)操作符:前置递增(递减)与执行语句的优先级相等,执行顺序是从左到右被求值
    var number = 20;
    var age = ++number; 
    • 后置递增(递减)操作符:后置递增(递减)操作,是在包含它们的语句被求值之后才执行

    • 隐式转换:一元操作符在应用于一个包含有效数字字符串时,先将其转换为数字值,再执行加减1的操作。字符串变量变成数值变量。

  2. 布尔操作符

    逻辑非(!)

    逻辑非操作符会将它的操作值转换成一个布尔值,然后再对其求反。

    • 如果操作的是一个对象,返回false。

    • 如果操作的是一个空字符串,返回true。

    • 如果操作的是一个字符串,返回false。

    • 如果操作的是一个数字0,返回true。

    • 如果操作的是一个非0数值,返回false。

    • 如果操作是NaN,返回true。

    • 如果操作是Null,返回true。

    • 如果操作是undefined,返回true。

    逻辑非操作符也可以用于将一个值转换为其对应的布尔值 !! 取得的是变量真实对应的布尔值

    逻辑与(&&)

    短路操作:逻辑与(&&)中有一个是false,就返回false。

    当逻辑与(&&)用来操作对象时:

    • 如果第一个操作数是对象,返回第二个操作数。

    • 如果第二个操作数是对象,第一个必须为true,返回第二个操作数,否则返回第一个。

    • 如果两个操作数都是对象,返回第二个操作数。

    逻辑或(||)

    短路操作:逻辑或(||)中有一个为true,就返回true。

  3. 关系操作符

    小于(<)、大于(>)、小于等于(<=)、大于等于(>=)

    如果两个操作数都是字符串,则比较两个字符串对应的字符编码值(包括数字字符串)

    • 大写字母的字符编码全部小于小写字母的字符编码。

    • 在比较数值与字符串时,字符串都会被转换成数值,然后再以数值方式比较另一个数值。

    • 当字符串不能转换成合理的数值,会被转成NaN,任何操作数与NaN进行比较时,都是false。

  4. 相等操作符

    相等(==)与全等(=== )

    区别:相等——先转换数据类型,再比较(强制转型)。 全等——不转换数据类型,直接比较(推荐)。


语句

  1. 判断语句

    • if语句。
    if(true){
        //do something
    }else{
        //do something
    }
    • switch-case-break-default语句。

    switch语句中的判断表达式使用的是全等操作符。

    如果判断表达式是值,case对应的就是值;如果是true,case对应的就是表达式。

  2. 循环语句

    • do-while:后测试语句,在条件终止前,至少执行一次。

    • while:前测试语句,条件不通过,永远不执行。

    • for:前测试语句,使用while循环做不到的,for循环也做不到。

    for语句中的三个表达式都是可选的,如果忽略,就会创建一个无限循环。

    • for-in:for-in语句是精准的迭代语句,用来枚举(遍历)对象属性。

    如果枚举对象中有属性值是Null或undefined,则停止循环。

  3. 函数(JavaScript忍者秘籍)


作用域

  1. 执行环境(作用域) 执行环境定义了变量或函数有权访问的 其他数据 ,决定了它们各自的行为.

    • 全局执行环境是最外围的一个执行环境

    • 全局执行环境也就是window对象,所有的全局变量和函数,都是作为window对象的属性和方法创建的

    • 某个执行环境中所有的代码执行完毕后,该环境被销毁,保存在其中的所有变量和函数定义,也随之销毁(全局执行环境在程序退出或关闭浏览器页面时销毁)

    • 每个函数都是有自己的 执行环境

    在函数内部,局部变量的优先级高于同名的全局变量,如果在函数内声明一个局部变量或者函数参数中的变量与全局变量重名,那么全局变量会被局部变量所覆盖

  2. 作用域链 当代码在一个环境中执行时,会创建变量对象的一个 作用域链.