尚硅谷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
     • 不是每个浏览器都支持这个新特性