尚硅谷JavaScript高级学习笔记

数据类型

  • 分类

    • 基本(值)类型
      • String: 任意字符串
      • Number: 任意数字
      • boolean: true / false
      • null: null
      • undefined: undefined
    • 对象类型(引用类型)
      • Object: 任意对象
      • Function: 一种特别的对象(可以执行)
      • Array: 一种特别的对象(数值下标, 内部数据是有序的)

  • 判断

    • typeof: 可以判断 undefined, 数值, 字符串, 布尔值, function
      • 不能判断 null与object, object与array
      typeof null 为 'object' typeof array 为 'object'
    • instanceof: 判断对象的类型
    • ===: 可以判断undefined和null (因为他们只有一个值)
    判断是否为字符: typeof xxx === 'string' 判断是否为数值: typeof xxx === 'number' 判断是否为函数: typeof xxx === 'function' 判断是否为数组: Array.isArray(xxx)     Object.prototype.toString.call(arg) === '[object Array]'

  • 相关问题

    • undefined 与 null的区别
      • undefined代表没有赋值
      • null代表赋值了, 值为null
    • 什么时候给变量赋值为null呢
      • 初始化: var a = null, 表示a指向一个对象, 但对象此时还没有确定
      • 生命周期结束: a = null, 让a指向的对象成为垃圾对象
    • 变量类型与数值类型
      • js的变量是没有类型的, 变量的类型实际上是变量内存中数据的类型
      • 变量类型: 基本类型(保存基本数据类型的变量)和引用类型(保存对象地址值的变量)
      • 数据类型: 基本类型和对象类型
    • js调用函数传递参数时, 是值传递还是引用传递
      • 理解1: 只有值传递, 没有引用传递. 传递的都是变量的值, 只是这个值可能是基本数据, 也可能是地址(引用)数据
      • 理解2: 如果后一种看成引用传递, 那就是两者都有

对象和函数

  • 对象属性访问
    • .属性名: 编码简单, 但有时不能用
    • ['属性名']: 编码麻烦, 但通用
      • 情形一: 属性名不是合法的标识名 比如: p['content-type'] = 'text/json'
      • 情形二: 属性名不确定(变量) 比如: p[prop] = value
  • IIEF: 匿名函数自调用, Immediately-Invoked Function Expression 立即调用函数表达式
    • 隐藏内部实现
    • 不污染外部环境
    (function (i){     .... })()

原型与原型链

  1. 原型(prototype)
    • 函数的prototype属性
      • 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
      • 原型对象中有一个属性constructor, 它指向函数对象
    • 作用: 给原型对象添加属性(一般都是方法), 函数的所有实例对象自动拥有原型中的属性(方法)
  2. 显式原型和隐式原型
    • 显式原型: 每个函数function都有一个prototype, 默认为Object空对象(在定义函数时添加)
    • 隐式原型: 每个实例对象都有一个__proto__, 默认值为构造函数的prototype属性值(在创建对象时自动添加的)
      person.__proto__ === Person.prototype
    • 程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)
  3. 原型链(隐式原型链): 访问对象属性
    • 读取: 自动到原型链中查找
      a. 先在自身属性中查找，找到返回
      b. 如果没有, 再沿着__proto__这条链向上查找, 找到返回
      c. 如果最终没找到, 返回undefined
    • 设置
      • 设置对象的属性值时不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值
      • 方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上
  4. 扩展
    • instanceof是如何判断的?
      • 表达式: A instanceof B
      • 如果B函数的显式原型对象在A对象的原型链上, 返回true, 否则返回false
    • Function是通过new自己产生的实例

执行上下文与执行上下文栈

  • 代码分类: 全局代码, 函数代码
  • 全局执行上下文
    • 在执行全局代码前将window确定为全局执行上下文
    • 对全局数据进行预处理
      • var定义的全局变量==>undefined, 添加为window的属性
      • function声明的全局函数==>赋值(fun), 添加为window的方法
      • this==>赋值(window)
    • 开始执行全局代码
  • 函数执行上下文
    • 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象
    • 对局部数据进行预处理
      • 形参变量>赋值(实参)>添加为执行上下文的属性
      • arguments==>赋值(实参列表), 添加为执行上下文的属性
      • var定义的局部变量==>undefined, 添加为执行上下文的属性
      • function声明的函数 ==>赋值(fun), 添加为执行上下文的方法
      • this==>赋值(调用函数的对象)
    • 开始执行函数体代码
  • 执行上下文栈
    1. 在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象
    2. 在全局执行上下文(window)确定后, 将其添加到栈中(压栈)
    3. 在函数执行上下文创建后, 将其添加到栈中(压栈)
    4. 在当前函数执行完后,将栈顶的对象移除(出栈)
    5. 当所有的代码执行完后, 栈中只剩下window

作用域与作用域链

  • 作用域
    1. 理解
      • 就是一块地盘, 一个代码段所在的区域
      • 它是静态的(相对于上下文对象), 在编写代码时就确定了
    2. 分类
      • 全局作用域
      • 函数作用域
      • 没有块作用域(ES6有了)
    3. 作用
      • 隔离变量，不同作用域下同名变量不会有冲突
  • 作用域与执行上下文
    1. 区别1
      • 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时
      • 全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建
      • 函数执行上下文环境是在调用函数时, 函数体代码执行之前创建
    2. 区别2
      • 作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化
      • 上下文环境是动态的, 调用函数时创建, 函数调用结束时上下文环境就会被释放
    3. 联系
      • 上下文环境(对象)是从属于所在的作用域
      • 全局上下文环境==>全局作用域
      • 函数上下文环境==>对应的函数使用域

闭包

  • 闭包
    1. 如何产生闭包?
      • 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包
    2. 闭包到底是什么?
      • 使用chrome调试查看
      • 理解一: 闭包是嵌套的内部函数(绝大部分人)
      • 理解二: 包含被引用变量(函数)的对象(极少数人)
      • 注意: 闭包存在于嵌套的内部函数中
    3. 产生闭包的条件?
      • 函数嵌套
      • 内部函数引用了外部函数的数据(变量/函数)
  • 常见的闭包
    1. 将函数作为另一个函数的返回值
    2. 将函数作为实参传递给另一个函数调用
  • 闭包的作用
    1. 使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)
    2. 让函数外部可以操作(读写)到函数内部的数据(变量/函数)
  • 闭包的生命周期
    1. 产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
    2. 死亡: 在嵌套的内部函数成为垃圾对象时
  • 闭包的应用
    • 具有特定功能的js文件
    • 将所有的数据和功能都封装在一个函数内部(私有的)
    • 只向外暴露一个包含n个方法的对象或函数
    • 模块的使用者, 只需要通过模块暴露的对象调用方法来实现对应的功能
  • 闭包的缺点和解决
    1. 缺点
      • 函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长
      • 容易造成内存泄露
    2. 解决
      • 能不用闭包就不用
      • 及时释放

内存溢出和内存泄露

  • 内存溢出
    • 一种程序运行出现的错误
    • 当程序运行需要的内存超过剩余内存时, 就抛出内存溢出的错误
  • 内存泄露
    • 占用的内存没有及时释放
    • 内存泄露积累多了就容易导致内存溢出
    • 常见的内存泄露
      • 意外的全局变量
      • 没有及时清理的定时器或回调函数
      • 闭包

对象的创建模式

  • Object构造函数: 先创建空Object对象, 再动态添加属性/方法
  • 对象字面量: 使用{}创建对象, 同时指定属性/方法
  • 工厂模式: 通过工厂函数动态创建对象并返回
  • 自定义构造器模式: 自定义构造函数, 通过new创建对象
  • 自定义构造器+原型的组合模式: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上

继承模式

  • 原型链继承: 子类型的原型为父类型的一个实例对象
  • 借用构造函数继承: 在子类型构造函数中通用call()调用父类型构造函数
  • 构造函数+原型: 原型链+借用构造函数的组合继承

线程机制与事件机制

  • 进程与线程

    • 浏览器运行是单进程还是多进程?
      • 单进程: firefox, 老版IE
      • 多进程: chrome, 新版IE
    • 浏览器运行是单线程还是多线程? 都是多线程的

  • 浏览器内核

    • Chrome, Safari: webkit
    • Firefox: Gecko
    • IE: trident

  • 浏览器内核的组成

    • html,css文档解析模块 : 负责页面文本的解析

    • dom/css模块 : 负责dom/css在内存中的相关处理

    • 布局和渲染模块 : 负责页面的布局和效果的绘制

    • 布局和渲染模块 : 负责页面的布局和效果的绘制

    • 定时器模块 : 负责定时器的管理

    • 网络请求模块 : 负责服务器请求(常规/Ajax)

    • 事件响应模块 : 负责事件的管理

  • JS是单线程的

    1. 如何证明js执行是单线程的?
      • setTimeout()的回调函数是在主线程执行的
      • 定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行
    2. 为什么js要用单线程模式, 而不用多线程模式?
      • JavaScript的单线程，与它的用途有关。
      • 作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。
      • 这决定了它只能是单线程，否则会带来很复杂的同步问题
    3. 代码的分类:
      • 初始化代码
      • 回调代码
    4. js引擎执行代码的基本流程
      • 先执行初始化代码: 包含一些特别的代码
      • 设置定时器
      • 绑定监听
      • 发送ajax请求
      • 后面在某个时刻才会执行回调代码

  • 事件循环模型: 事件管理模块 和 回调队列

  • Web Workers

    1. H5规范提供了js分线程的实现, 取名为: Web Workers
    2. 相关API
      • Worker: 构造函数, 加载分线程执行的js文件
      • Worker.prototype.onmessage: 用于接收另一个线程的回调函数
      • Worker.prototype.postMessage: 向另一个线程发送消息
    3. 不足
      • worker内代码不能操作DOM(更新UI)
      • 不能跨域加载JS
      • 不是每个浏览器都支持这个新特性