JavaScript和JavaScript高级笔记

JavaScript

对象
- 1、内建对象
  - 由ES标准定义的对象，比如：Math String Number Boolean Function Object
- 2、宿主对象
  - 由JS的运行环境提供的对象，目前来讲是由浏览器提供的对象：BOM、DOM
- 3、自定义对象
  - 由开放人员自己创建的对象
- 存储对象和读取对象
  - 特殊的方式用对象名[属性名]=属性值,读取也这样取
- in运算符
  - 属性名 in 对象（返回布尔值）
- 对象赋值为null,即断开连接。改变对象的值，另一个同地址的值也会改变
- 什么都是对象，万物皆对象
- 枚举对象
  - for in (let item in obj)
函数
- 用于封装功能
- 函数实参什么都可以传
作用域
- 全局作用域
  - 有一个全局对象window,属性和方法都作为window对象的属性和方法保存
  - 全局变量就是全局作用域里面的。
- 函数作用域
  - 每次创建函数都有一个独立的作用域，调用函数创建，函数执行完就销毁
  - 函数操作全局变量时，会先找自己的，逐层寻找，从里到外
  - 定义形参相当于在函数中定义了变量
- this(执行上下文对象)
  - 1、以函数的形式调用时，this永远是window
  - 2、以方法的形式调用时，this就是调用方法的那个对象
  - 3、当以构造函数的形式调用时，this就是调用的那个对象实例
构造函数
- 执行流程
  - 1、立刻创建一个对象
  - 2、将函数中this指向为这个对象
  - 3、逐行执行代码
  - 4、将新建的对象作为返回值返回
- 使用instanceof 可以检查该对象是否属于那个类, 对象 instanceof 类，返回值布尔值
原型对象
- 原型对象也是对象，所以它也是原型
- 当我们使用一个对象的属性或方法时，会现在自身中寻找。
- 自身中如果有，则直接使用
- 如果没有则去原型对象中寻找，如果原型对象中由，则使用。
- 如果没有则去原型的原型中寻找，直到找到Object对象的原型。
- Object对象的原型没有原型，如果在Object中依然没有找到，则返回undefined
- 当我们直接在页面中打印一个对象，事实上输出的对象的toString()方法的返回值
数组对象
- Lenth是最大索引加1，中间空的为empty
- push方法返回的值数值的长度，添加的元素到数组的最后
- forEach方法
  - 第一个参数返回元素，
  - 第二个返回元素的索引值，
  - 第三个返回整个数组
- slice方法(不改变原数组)
  - 第一个值：截取开始的索引值，包含开始
  - 第二个值：截取结束的索引值，不包含
  - 可以填负数，-1代表倒数第一个，-2代表倒数第二个
- splice(会影响到原数组，会将指定元素从原数组中删除，返回值是被删除的元素)
  - 第一个，开始位置的索引
  - 第二个，删除的位置
  - 第三个，传些新的元素
- 数组去重
  - 代码块：
```
let arr = [1, 3, 3, 2, 2, 4, 2, 3, 1, 3, 4];
      for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]);
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[j] === arr[i]) {
            arr.splice(j, 1);
            j--;
          }
        }
      }
```
  - 当删除了j所在的元素以后，后边的元素会自动补位，此时不会在比较这个元素，需要再比较一次j所在位置的元素，使j自减
- concat(不会影响原数组)
  - 连接两个或多个数组，并返回新的数组
- joIn(不会影响原数组)
  - 该方法可以将数组转换为一个字符串
  - 结果返回是转换后的字符串
  - 在()中可以指定参数在元素中隔开
- 数组排列
  - 升序
    - ```
    let arr = [1,3,2,4,10,1,22,33]
    arr.sort((a,b)=>{
    	return a-b
    })
```
- 降序
  - ```
  let arr = [1,3,2,4,10,1,22,33]
  arr.sort((a,b)=>{
  	return b-a
  })
```
- call()和apply()
  - 当对函数调用call()和apply()都会调用函数执行
  - 可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this
  - call()方法可以将实参在对象之后依次传递
  - apply()方法需要将实参封装到一个数组中统一传递
- arguments（实参列表）
  - 当函数执行时，浏览器给函数传了两个隐含参数，一个this,一个arguments.
  - arguments是一个类数组对象，它可以通过索引来操作数据，也可以获取长度。
  - 调用函数时，我们传递的实参会在arguments中保存
  - arguments.length来获取实参的长度
- Date对象
  - 创建一个指定的时间对象
  - 需要在构造函数中传递一个表示时间的字符串作为参数
  - getTime()
    - 获取当前日期对象的时间戳
- Math对象
  - Math.random()
    - 生成一个0-x之间的随机数:
    - Math.round(Math.random()*x)
    - 生成一个x-y之间的随机数:
    - Math.round(Math.random()*(y-x)+x)
- 包装类
  - 方法和属性只能添加给对象，不能添加给基本数据类型
  - 当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法。
  - 调用完以后，再将其转换为基本数据类型。
- String
  - split()
    - 可以将字符串拆分一个数组
    - 参数：
      - 需要一个字符串作为参数，将会根据该字符串去拆分数组
Dom
- 全称Document Object Model文档对象模型
- 文档
  - 文档表示整个HTML文档
- 对象
  - 将网页中的每一个部分都转换为了一个对象
- 模型
  - 使用模型来表示对象之间的关系，这样方便我们获取对象
- innerHTML(获取元素内部的HTML代码)
  - 对于自结束标签，这个属性没有意义。
- 需要读取元素节点属性
  - 直接使用元素.属性名
    - 例子：元素.id 元素.name
- childNode
- children属性可以获取当前元素的所有子元素
- document.querySelector()
  - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
- document.querySeletorAll()
  - 该方法和querySelector()用法类似，不同的是它会符合条件的元素封装到一个数组，即使符合条件的元素只有一个，它也会返回数组
- document.createElement()
  - 创建一个元素节点对象。
  - 需要一个标签名作为参数
  - 创建好的对象作为返回值返回
- document,createTextNode()
  - 创建一个文本节点对象
  - 需要一个文本内容作为参数，将会根据该内容创建文本节点，将新的节点返回
- appendChild()
  - 向一个父节点添加一个新的子节点
  - 父节点、appendChild(子节点)
- 增删改案例（TodoList）
  - 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为。
  - 可以在响应函数的最后return false来取消默认行为
- 通过style读取的属性都是内联样式
- 其他样式相关的属性
  - clientWidth
  - clientHeight
    - 这两个属性可以获取元素的可见宽度和高度
    - 这些属性都是不带px的，返回都是一个数字，
    - 获取元素宽度和高度，包括内容区和内边距
    - 这些属性是只读的，不能修改
  - offsetWidth
  - offsetHeight
    - 获取元素的整个的宽度和高度，包括内容区、内边距和边框
  - 当满足scrollHeight - scrollTop = clientHeight
  - 说明垂直滚动条滚到到底了
  - 当满足scrollWidth - scrollLeft == clientWidth
  - 说明水平滚动条滚动到底
事件对象
- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，
- 当事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个按键被按下……
事件冒泡
- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
- 取消冒泡
  - 可以将事件对象的cancelBubble设置为true,即可取消冒泡
事件委派
- 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
- 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
- 触发事件的对象：event.target
事件监听
- addEventListener()
  - 通过这个方法也可以为元素绑定响应函数
  - 参数：
    - 1、事件的字符串，不要ON
    - 2、回调函数，当事件触发时该函数会被调用
    - 3、是否在捕获阶段触发事件，需要一个布尔值，一般都传false
  - 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数。
  - 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
BOM
- Navigator
  - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器。
  - 一般我们只会使用userAgent李判断浏览器的信息。
setInterval()
- 定时调用
- 可以将一个函数，每隔一段时间执行一次
- 参数：
  - 1、回调函数，该函数会每隔一段时间被调用依次
  - 2、每次调用间隔的时间，单位时毫秒
- 返回值：
  - 返回一个Number类型的数据
  - 这个数值来作为定时器的唯一标识
- 延时调用执行一次，定时调用执行多次
类属性
- 修改box的class属性
  - 我们可以通过修改元素的class属性来间接的修改样式
  - 这样一来，我们只需要修改依次，即可同时修改多个样式，
  - 浏览器只需要重新渲染页面一次，性能比较好。
  - 并且这种方式，可以使表现和行为进一步的分离
JSON
- JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象。
- JSON分类
  - 对象
  - 数组
- JSON允许的值
  - 字符串
  - 数值
  - 布尔值
  - Null
  - 对象
  - 数组
- json -> js对象
  - JSON.parse()
    - 可以将以JSON字符串转换为js对象
    - 它需要一个JSON字符串作为参数。
- JS对象 -> JSON
  - JSON.stringify()
    - 可以将一个JS对象转换为JSON字符串
    - 需要一个js对象

JavaScript高级

基本数据深入扩展
- typeof
  - 可以判断：undefined/数值
- instanceof:判断对象的具体类型
  - 可以判断：undefined
- undefined与null的区别？
  - undefined代表定义未赋值
  - null定义并赋值，只是值为Null
- 什么时候给变量赋值为nul呢？
  - 初始赋值，表面将要赋值为对象
  - 结束前，让对象成为垃圾对象
- 严格区别变量类型与数据类型
  - 数据的类型
    - 基本类型
    - 对象类型
  - 变量的类型（变量内存值的类型）
    - 基本类型：保存的是基本类型的数据
    - 引用类型：保存的是地址值
    - 栈
      - 全局变量/局部变量
      - 后进先出
    - 堆
      - 对象
  - 数据的特点
    - 可传递
    - 可运算
函数高级
- 原型
  - 函数的prototype属性
    - 每个函数都有prototype属性，默认指向一个Object空对象
    - 原型对象中有一个属性constructor,它指向函数对象
  - 给原型对象添加属性（一般都是方法）
    - 函数的所有实例对象自动拥有原型中的属性
  - 总结
    - 函数的prototype属性：在定义函数时自动添加的，默认值是一个空Object对象
    - 对象的__proto__属性：创建对象时自动添加的，默认值为构造函数的prototype属性值
- 原型链
  - 1.proto：不管是函数还是实例对象都有__proto__这个属性，所有函数的__proto__都指向一个地方：Function的原型 ƒ ()
  - 2.拥有constructor属性，有两种情况：
    1.定义function函数而创建的Object实例对象（function函数原型）
    2.Function的原型对象
    而其他的实例对象和函数，还是继承关系的子函数的原型对象都没有constructor。
    Function的原型对象的constructor指向Function函数
  - 3.prototype：只有函数才有的属性，而实例对象没有（没有function的），原型对象都没有这个属性
  - 4.Object原型对象（Object）：既不是Object也不是Function，负责存储特定的方法
  - 5.Function原型对象（ƒ () { 【native code】 }）：负责函数的创建，
    所以所有的函数的__proto__都指向这里，
    除了Function函数的所有函数的constructo都指向这里，
    因为Function可以自己创建自己：new Function()
  - 6.Function：最特殊的是，__proto__和prototype相等，都指向Function原型对象
执行上下文（this）
- 代码
  - 全局代码
  - 函数代码
- 全局执行上下文
  - 在执行全局代码前将window确定为全局执行上下文
  - 对全局数据进行预处理
    - var定义的全局变量==>undefined，添加为window的属性
    - function声明的全局函数==>赋值(fun),添加为window的方法
    - this==>赋值（window）
- 函数执行上下文
  - 在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象
  - 对局部数据进行预处理
    - 形参变量>赋值（实参）>添加为执行上下文的属性
    - arguments ==> 赋值（实参列表），添加为执行上下文的属性
    - var定义的局部变量 ==> undefined, 添加为执行上下文的属性
    - function声明的函数 ==》赋值(fun),添加为执行上下文的属性
    - this ==> 赋值（调用函数的对象）
  - 开始执行函数体代码
- 闭包
  - 当一个嵌套的内部函数引用了嵌套的外部函数的变量时，就产生了闭包
  - 闭包是嵌套的内部函数
  - 包含被引用变量（函数）的对象
  - 产生闭包的条件
    - 函数嵌套
    - 内部函数引用了外部函数的数据
  - 闭包的应用：定义JS模块
    - 具有特定功能的js文件
    - 将所有的数据和功能都封装在一个函数内部（私有的）
    - 只向外暴露一个包含n个方法的对象或函数
    - 模块的使用者，只需要通过模块暴露的对象调用方法来实现对应的功能
  - 闭包终极面试题：
    - ```
    function fun(n, o) {
           console.log(o);
           return {
             fun(m) {
               return fun(m, n);
             },
           };
    }
    var a = fun(0);
    a.fun(1);
    a.fun(2);
    a.fun(3);
    var b = fun(0).fun(1).fun(2).fun(3);
    var c = fun(0).fun(1);
    c.fun(2);
    c.fun(3);
```
- 内存溢出
  - 一种程序运行出现的错误
  - 当程序进行需要的内存超过了剩余的内存时，就出抛出内存溢出的错误
- 内存泄露
  - 占用的内存没有及时释放
  - 内存泄漏积累多了就容易导致内存溢出
  - 常见的内存泄露：
    - 意外的全局变量
    - 没有及时清理的计时器或回调函数
    - 闭包
- 原型链继承
  - 1、定义父类型构造函数
  - 2、给父类型的原型添加方法
  - 3、定义子类型的构造函数
  - 4、创建父类型的对象赋值给子类型的原型
  - 5、将子类型原型的构造函数设置为子类型
  - 6、给子类型原型添加方法
  - 7、创建子类型的对象：可以调用父类型的方法
  - 关键：子类型的原型为父类型的一个实例对象
  - 借用构造函数继承
  - 组合继承
- 浏览器内核模块组成
  - 主线程
    - js引擎模块：负责js程序的编译与运行
    - html,css文档解析模块：负责页面文本的解析
    - DOM/CSS模块：负责dom/css在内存中的相关处理
    - 布局和渲染模块：负责页面的布局和效果的绘制（内存中的对象）
  - 分线程
    - 定时器模块：负责定时器的管理
    - DOM事件模块：负责事件的管理
    - 网络请求模块：负责Ajax请求

posted @ 2021-06-04 08:51 雨梦Coder 阅读(102) 评论(0) 收藏举报

刷新页面返回顶部

雨梦Coder

JavaScript和JavaScript高级笔记

JavaScript

JavaScript高级

公告