js学习笔记

JS学习

1.入门

入门初步

• 脚本

  • 可再现的重复一个设定的规程
  • 需要解释器来执行
  • 方便、快速、经常地被修改

• js是什么？

  • 脚本，实现复杂的网页功能

  • 是web技术蛋糕的第三层

    • html：标记语言，结构化网页的内容并赋予内容含义
    • css：样式规则语言，设置html中的显示样式
    • js：创建动态更新的内容，控制多媒体等

• js可以做什么

  • api

    • 浏览器api (Browser apis)

      • 内建于web浏览器中，可以使周围数据暴露出来，也可以实现复杂工作

    • 第三方API

      • 没有默认嵌入浏览器中，需要从网络上获取代码和信息
      • 如：新浪微博api，高德地图api等

• js如何工作

  • 执行过程

    • 1.html和css集合组装成一个网页
    • 2.浏览器的javaScript引擎将执行js代码

• 特点及对比

  • 浏览器安全

    • 每个浏览器标签页是独立容器
    • 用于运行代码，大部分独立运行

  • js的运行次序：从上往下

  • 解释代码和编译代码

    • 解释代码（JS）

      • 代码自上而下运行，且实时返回结果
      • 无需由浏览器转化为其他形式

    • 编译代码

      • 运行前需要转化为另外的形式，才能执行，如C先编译成汇编语言，再执行

  • 服务器端代码和客户端代码

    • 服务器端代码

      • 在服务器上运行
      • 浏览器将结果下载并展示

    • 客户端代码

      • 在用户电脑上运行
      • 浏览网页时，进行下载，然后由浏览器进行运行和展示

  • 动态代码和静态代码

    • 静态：没有动态内容更新的网页
    • 动态：按需生成新内容更新展示

• 怎么添加js:

• 内联js处理器——不要使用

• 脚本调用的策略

  • 如何让时机符合预期：js在预操作的html之前加载会出错

  • 解决方式

    • 内部js：添加事件-DOMContentLoaded，HTML文档加载、解释完毕后，触发

    • 外部js：async-异步。遇到script后不要中断后续html内容的加载。

    • async和defer

      • async

        • 只能用于外部脚本
        • 不会阻塞页面渲染，而是直接下载后运行
        • 当脚本之间相互独立且不依赖于本页面的其他脚本时，使用

      • defer

        • 规定脚本之间的调用顺序
        • 按照所需顺序置于html中

• 注释：相同，//和/**/

• 查找并解决js代码的错误

  • 语法错误
  • 逻辑错误

  变量

  • let和var的区别

    • var可变量提升：初始化之后，用var声明

  • 动态类型

  2.基础要件

  条件

  • if else/switch

  代码循环

  • for/do while/while

  函数

  • 作用域

    • 函数作用域

    • 全局作用域

      • 所有函数外部的区域

  • 函数调用符-（）

    • 直接调用的时候，加（）
    • 匿名函数代码不直接运行

  3.对象

  面向对象的js

  • 构建函数

    • 定义对象和特征
    • 将对象的数据和特征函数按需联结到相应的对象
    • 命名：大写字母开头

  • 创建对象的方法

    • 函数，返回对象:createAPerson()

    • 构建函数：new Person()

    • new Object()

    • Object.create()

      • 版本兼容性

  对象原型

  • 原型链

    • 每个对象拥有一个原型对象，对象以其原型对象为模板、从原型继承方法和属性。原型对象也可能拥有原型，从中继承方法和属性。一层一层、以此类推。
    • 解释了为何一个对象会拥有定义在其他对象中的属性和方法
    • 这些属性和对象定义在Object的构造器函数是那个的prototype属性上
    • 对象的实例和它的构造器之间建立一个链接（_proto_属性/Object.getPrototypeOf(obj)），通过上溯原型链找到属性和对象

  • prototype属性

    • 原型对象：_proto_进行访问
    • prototype：指向一个对象，定义需要被继承的成员

  • create()原理

    • 从指定原型对象创建一个新对象
    • 新的对象的原型对象为旧对象

  • constructor属性

    • 创建新的实例：new Person.contructor();

  • 修改原型

    • prototype属性的值

      • 在构造器/函数中定义属性
      • 在prototype中定义方法

  继承

  • 1.call(this,参数/可为空)

    • Teacher(){Person.call(this,name)}

  • 2.create方法

    • 1.create 原型函数 Teacher.prototype =Object.create(Person.prototype)
    • 2.设置正确的构造方法 Teacher.prototype.constructor = Teacher

  • 3.重写方法

    • Teacher.prototype.greeting= function(){}

  json(Java Script Object Notation)——数据传输格式

  • 格式转化

    • string转对象：JSON.parse(jsonString)
    • 对象转string：JSON.stringify(myJson)

  4.异步js

  异步编程概念

  • 不连续执行的任务

  异步js

  • 回调函数-ajax()

    • 优点：简单、容易理解和实现

    • 缺点

      • 代码不利于阅读和维护，耦合性高，流程难以追踪。
      • 不能捕获异常，不能直接return

  • 事件监听：执行顺序取决于某个事件是否发生

  合作异步js

  • 一段时间后运行:setTimeOut()

    • let myGreeting = setTimeout(funtionName,time,‘参数’)
    • clearTimeout(myGreeting)
    • 0秒超时-主线程执行完成后立即执行

  • 在设定时间周期内反复运行:setInterval()/requestAnimationFrame()

    • setInterval

      • const myInterval = setInsterval(functionName,time)
      • clearInterval(myInterval)

    • requestAnimationFrame动画效果

  • 特殊用法

  Promises

  • 延迟一些操作找到前面的代码已经返回结果

  • fetch then then catch finally

  • 自定义promise

    • Promise()

      • resolve()

      • reject()

      • Promise.all()

        • 当所有的await全部可用的时候执行

  async和await

  • 修饰函数，返回值为promise