乐趣区

关于javascript:前端那些事四JS基础

jiezi

  1. JS 由哪几局部组成

  • ECMAScript 语言外围：由 ECMA-262 定义，提供外围语言性能，ECMAScript 是由 ECMA（欧洲计算机制造商协会）国内进行标准化的一门编程语言，ECMAScript 作为各自 JavaScript 实现的根底。
  • DOM 文档对象模型：（Document Object Model，简称 DOM），提供拜访和操作网页内容的办法和接口，是 W3C 组织举荐的解决可扩大标记语言的规范编程接口。

DOM 扩大：Selectors API、Element Traversal API 和 HTML5 扩大。

DOM2 和 DOM3 中新增的 DOM 属性、办法和对象

  • BOM 浏览器对象模型：(Browser Object Model，简称 BOM)，提供与浏览器交互的办法和接口，通过 BOM 能够操作浏览器窗口，比方弹出框、管制浏览器跳转、获取分辨率等。

BOM 对象：window、document、location、navigator 和 screen。

  1. JS 数据类型

  • 根本数据类型：
  1. 布尔型（Boolean）：true/false
  2. 数值型（Number）：整数和浮点数值
  3. 字符串型（String）：字符串，
  4. Null 类型：空值，null 值示意一个空对象，typeof 返回空对象，object
  5. Undefined 类型：未定义值，应用 var 申明变量但给变量赋值时，他的值就是 undefined，typeof 返回 undefined。
  6. symbol：ES6 新增数据类型
  7. bigint：ES11 新增数据类型，解决精度问题
  • 援用数据类型：
  1. Object 类型
  2. Function 类型
  • 根本类型和援用类型的区别：
  • 根本类型寄存在栈内存中
  • 援用类型寄存在堆内存中，，指针在栈内存

  • null 和 undefined 的区别：

    • null 示意没有开拓空间（js 会主动回收空间），空值。
    • undefined 示意开拓了空间然而没有赋值，未定义。
    • null 默认转换成 number 类型是 0，undefined 是 NaN（非数值是一个非凡的数值）

  1. 检测数据类型办法

  2. typeof：检测根本数据类型（除了 null），返回字符串

    1. 毛病：不能细分对象，不能区别数组和对象
    2. 原理：所存的值在内存都是按二进制贮存

  3. instanceof：检测实例，判断一个对象是否是一个类的实例，判断简单援用数据类型

    1. 毛病：不能正确判断根本数据类型
  4. constructor：检测构造函数
  5. Object.prototype.toString.call：通过原型链判断，返回 [object Xxx]
  6. Array.isArray：检测数组

  7. 数据结构在我的项目中理论利用：

数组

树形构造：导航栏，菜单栏 输入框链式调用

队列

栈

hash

链表

汇合

  1. 堆栈问题，进栈出栈

https://www.bilibili.com/video/BV1U5411Y7k7?p=2

  1. 栈内存：是浏览器给代码提供的执行的环境
  2. EC 执行上下文：代码本人执行时所在的环境
  3. ECStack：执行环境栈，栈内存
  4. 堆内存：寄存属性和办法
  5. 作用域（执行上下文）：全局作用域，函数作用域，块级作用域
  6. GO：全局对象：浏览器把属性办法放到独自内存 => 堆内存（Heap），任何开拓的内存都有一个 16 进制的内存地址，window 代表全局对象
  7. VO(G)：全局变量对象，寄存变量，以后上下文
  8. AO：公有流动变量对象

进栈：造成的全局执行上下文进入到栈内存中执行

全局不会出栈，公有的会出栈，先进后出

栈溢出，内存优化机制

AST 语法解析 词法解析

变量程序：var a = 123;

  1. 先创立值，在栈内存中寄存。
  2. 创立变量
  3. 变量和值关联

对象程序：所有的指针赋值都是指针的关联指向

  1. 创立一个堆内存
  2. 把键值对寄存在堆内存中
  3. 堆内存地址放在栈中

根本类型：值类型

援用类型：援用地址

  1. 作用域

  • 作用域：ES5 全局作用域，函数作用域，ES6 块级作用域

  1. 闭包

  • 概念：指的是可能拜访另一个函数作用域的变量的函数，设计公有的办法和变量。

  • 长处：

    • 缓存。将变量暗藏起来不被 GC 回收，防止全局变量的净化
    • 实现柯里化。利用闭包个性实现柯里化。

  • 毛病：

    • 内存耗费。闭包产生的变量无奈被销毁。
    • 性能问题。因为闭包外部变量优先级高于内部变量，所以须要多查找作用域链的一个档次，肯定水平影响查找速度。

https://mp.weixin.qq.com/s?__…

  1. 函数柯里化

https://www.jianshu.com/p/69fa332823bf

  • 概念：将一个多参数的函数转化为单参数函数的办法
  • 作用：柯里化函数次要起到预处理的作用；
  • 益处：参数复用，提前确认，提早容许

  1. 可枚举和不可枚举

  2. 可枚举性：对象的每个属性都有一个形容对象（Descriptor），用来管制该属性的行为。Object.getOwnPropertyDescriptor 办法能够获取该属性的形容对象。形容对象的 enumerable 属性，称为“可枚举性”，如果该属性为 false，就示意某些操作会疏忽以后属性。躲避掉 for…in 操作。
  • 在 JavaScript 中，对象的属性分为可枚举和不可枚举之分，它们是由属性的 enumerable 值决定的。可枚举性决定了这个属性是否被 for…in 查找遍历到。
  • 根本包装类型的原型属性是不可枚举的，如 Object, Array, Number 等
  • Object 对象的 propertyIsEnumerable() 办法能够判断此对象是否蕴含某个属性，并且这个属性是否可枚举。

  1. 实例对象，构造函数，原型，原型链，链式调用

  • 原型链：构造函数，原型 prototype，constructor 组成

实例的 contructor = 构造函数

不同实例的函数不相等

一般对象 函数对象

一般函数用于创立一个类对象

函数对象才有 prototype

一般对象 函数对象都有__proto__

暗藏属性 contructor

const Person = new Function()

  1. 怎么实现原型链继承，ES5/ES6 继承

https://www.jianshu.com/p/c6f36b3a5408

https://kaiwu.lagou.com/course/courseInfo.htm?courseId=601#/detail/pc?id=6176

  1. 原型链继承

毛病：孩子改了 父亲也改了

  1. 构造函数继承（借助 call）

毛病：父类原型中的办法无奈应用

ES5: User.call(this,)

ES6: class extends

  1. 事件冒泡，事件捕捉，事件委托 / 事件代理，DOM 事件流

  • 事件捕捉（父级找子级）：是从 document 到触发事件的那个节点，即自上而下的去触发事件。
  • 事件冒泡（子级找父级，更罕用）：事件的向上传导，当后辈元素上的事件被触发时，其先人元素的雷同事件也会被触发，自下向上。
  • 事件委托（定义独特父级元素）：当有多个相似的元素须要绑定事件时，一个一个去绑定即浪费时间，又不利于性能，这时候就能够用到事件委托，给他们的一个独特父级元素增加一个事件函数去解决他们所有的事件，而后依据 evt.target 找到最终的事件源
  • 阻止事件委托和冒泡：在事件函数中执行 event.stopPropagation()
  • 执行程序：捕捉 > 冒泡
  • addEventListener()：false 是冒泡，true 是捕捉
  • 事件流：

事件委托：捕捉和冒泡容许咱们实现一种被称为 事件委托 的弱小的事件处理模式。

先捕捉再冒泡

  1. 深拷贝和浅拷贝

相同点：

  • 深拷贝和浅拷贝都只针对援用数据类型

区别：

  • 浅拷贝：拷贝的是指针，共享内存，根本数据类型的值和援用数据类型的指针
  • 深拷贝：开拓新的栈，不共享，批改新对象时不会批改原对象，

浅拷贝实现：

  1. Object.assign(target, …sources)：指标对象，多个起源对象
  • 一级属性深拷贝 二级属性浅拷贝
  • 毛病：

  1. 扩大运算符 let cloneObj = {…obj}

  1. concat 拷贝数组

  1. slice 拷贝数组 arr.slice(begin, end)

深拷贝实现：

  1. JSON.parse(JSON.stringify(a))：

毛病：不能对函数遍历

  1. 手写
  2. 改进版 Reflect.ownKeys
  3. 递归浅拷贝

  4. 长轮询和短轮询

  • 长轮询，即在客户端发动申请后，服务器端要判断是否有新的数据要返回，如果没有新数据，则放弃申请，直到有新数据的时候再返回给客户端，当客户端收到返回信息后，再进行下一次申请。
  • 短轮询，即在客户端发动申请后，服务器端无论是否有新数据，都会响应该申请，并返回给客户端

  1. 尾调用和尾递归

  2. 尾调用：指某个函数的最初一步是调用另一个函数。

尾调用优化：只保留内层函数的调用帧，safari 反对，chrome,firefox 不反对。

  1. 尾递归：函数调用本身，称为递归。如果尾调用本身，就称为尾递归。工夫复杂度
  2. 尾递归优化：fibonacci 不会产生栈溢出，节俭内存

  3. eventloop 事件循环

  • 事件流：JavaScript 是单线程语言，执行分为同步工作和异步工作。
  • 异步工作分为宏工作和微工作。
  • script 自身是宏工作

会先执行这个队列里所有的同步工作 遇到宏微别离加到宏微队列

执行完同步后 再执行微工作队列

微工作队列执行实现后 会顺次执行宏工作队列

宏工作队列里的微工作全副执行结束后 持续下一个宏工作

  • 宏工作：整体代码 script，setTimeout，setInterval
  • 微工作：Promise.then，nextTick

  1. 防抖和节流

  • 防抖：工作频繁触发的状况下，只有工作触发的距离超过指定距离的时候，工作才会执行。
  • 节流：指定工夫距离内只会执行一次工作。

防止频繁操作。

革除再设置 1 秒执行。

手写防抖

  1. this 指向，

  • obj.f() 的调用中，因为运行环境在 obj 对象内，因而函数中的 this 指向对象 obj;
  • 而在全局作用域下调用 fun()，函数中的 this 就会指向全局作用域对象 window;
  • es5 this 指向执行的上下文，apply、call、bind 能够扭转 this 指向。
  • es6 箭头函数：this 始终指向函数申明时所在作用域的 this 的值。

  1. 有哪些方法能够扭转 this

  2. apply、call、bind 能够扭转 this 指向。

应用 ES6 的箭头函数。

  1. promise

https://mp.weixin.qq.com/s?__…

退出移动版