ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

尚硅谷JavaScript高级学习笔记

2022-05-11 03:00:07  阅读:183  来源: 互联网

标签:执行 函数 对象 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
      • 不是每个浏览器都支持这个新特性

标签:执行,函数,对象,JavaScript,笔记,作用域,原型,硅谷,上下文
来源: https://www.cnblogs.com/hepengju/p/16256340.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有