前端学习记录——关于JavaScript

1. JAVASCRIPT：是一种同步的、阻塞的、单线程的脚本语言，也是一种解释性语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画等。
   

2. 声明变量：
   let：用于定义局部变量，定义后可再被重新分配（赋值）。（具有assign、re-assign、mutable等属性）
   👉关于let
   var：只有在函数内部使用时，其所定义的为局部变量；反之在函数外部使用时，其所定义的均为全局变量。
   👉关于var

3. 声明常量：
   const：用于定义常量，定义后不可再被重新分配（赋值），且只在局部（块级作用域内）起作用。（具有assign、mutable等属性）（赋值若为对象，则可以使用Object.freeze(对象名称)的方法使其具有immutable属性）
   👉关于const

4. var、let、const之间的区别：👉参考资料
   区别一：var声明是全局范围的或函数范围的，而let、const则是块范围的；
   区别二：var变量可以在其声明范围内更新值和重新声明，let变量可以在其声明范围内更新值但不能重新声明，const变量在其声明范围内既不能更新值也不能重新声明（但是const变量为对象时，可以更新其属性的值）；
   区别三：它们都可以被提升到了范围的顶部，但是var变量默认初始化的值为undefined，let和const变量则没有初始化值；
   区别四：var和let可以在不初始化的情况下声明，但const必须在声明期间进行初始化。

5. 变量的命名规则：
   
   
   

6. 匿名函数：👉关于匿名函数
   匿名函数（函数表达式）：函数表达式与函数声明有一些区别：函数声明会进行声明提升（declaration hoisting），而函数表达式不会。

7. 几种常见将函数赋值给变量的写法：
   
   
   
   

8. 原型对象（prototype）：
   构造器（函数体）的原型对象（prototype）：该构造器拥有的所有（包括从其它构造器继承来）的属性的集合。
   构造器（函数体）内定义属性：
   
   原型属性定义方法：使用原型对象（prototype）给构造器（函数体）定义方法
   
   只有通过原型属性定义的属性或者方法，会挂在prototype上。
   
   

• 普通函数（具名函数、匿名函数）：
  函数名称小写；
  调用时：函数名称（参数）；
  位于对象上，this永远指向组件实例，使用时无需再绑定this。

• 箭头函数：
  使用箭头定义；
  均为匿名函数；
  不具有super；
  不具有new.target；
  不能用于构造函数；
  不能Generator函数；
  不具有arguments对象；
  不具有prototype原型对象；
  位于原型属性上，传入子组件或者当作事件回调时需要手动绑定this指向。
  this指向是最近一个外层的非箭头函数的父函数
  箭头函数的四种写法：
  

• 构造函数：
  函数名称的首字母需要大写
  调用时：例：var 变量名称 = new 函数名称（参数）；

• 创建实例：
  new 函数名称()

• 创建指向特定原型对象（可以为对象也可以为构造器.prototype）的实例：
  new 函数名称（）= Object.create(原型对象)
  
  
  在对象里面定义方法以及对其进行引用：
  

在函数里面定义方法以及对其进行引用：
在函数里面定义方法时常见的错误写法：

在函数外通过原型属性定义并增加方法：

通过闭包方式嵌套的子函数和被定义为属性的函数（即被放入prototype里的方法）是不同的，前者为构造器私有的，而后者则为该构造器的所有实例所共有的。
直接在函数体内嵌套子函数的错误写法示例：

原型式继承：

• 每一个函数对象（Function）都有一个prototype属性，并且只有函数对象有prototype属性（实例对象只有__proto__）。任何想要被继承的方法都应该定义在构造函数的prototype对象里，并且为了避免打乱类继承结构，应该永远使用父类的prototype来创造子类的prototype。*

无参数继承父级所有属性：



有参数继承父级所有属性：



等价于直接重新定义一遍其它构造器已有属性并添加新属性

无论有无参数均是通过call()函数和this关键字实现继承的。

8. 关于Object.defineProperty()中writable属性在继承关系中的应用：
   

9. 关于闭包
   闭包定义(变量被定义瞬间闭包关系即被确定)：当一个函数使用到其外部的变量时即构成闭包关系。
   作用：JavaScript通过闭包实现模块化。👉详情
   

10. 关于this在不同位置中时的指代情况：
    普通函数：指代是window
    构造函数：指代构造函数
    箭头函数：指代当前所在箭头函数的父级函数
    对象：指代对象
    对象内所嵌套的函数：指代window
    使用call、apply、bind访问对象时：指代对象（call、apply一般在调用函数时使用）
    在严格模式下，this将从指代对象或者window变为undefined
    
    
    

11. 关于promise
    定义：表示异步操作完成或者失败的对象，是一种中间态。
    （ promise来源于函数式编程思想。）
    
    作用：可以将异步操作以同步的流程表达出来，同时可以明确任务进度，很好地解决了回调地狱的问题👉参考资料（避免了层层嵌套的回调函数）。
    优点：把配置和结果的处理分开了。
    特点：
    一个promise只能包含一个回调函数；
    .then()返回的是promise；
    .then()每次使用时只运行一次；
    .then()块中的回调（称为执行程序）仅在promise调用成功完成时运行并返回Response对象；
    promise总是严格按照它们放置在事件队列中的顺序调用；
    promise只调用一次，状态由一开始的‘pending’经过事务逻辑判断变为’fulfilled（resolved）’ 或者 'rejected’；
    一个promise成功（fulfilled/resolved），可以通过运行前一个promise的 .then() 方法来处理成功后执行的操作；
    一个promise失败（rejected），可以通过运行前一个promise的 .catch() 方法来添加错误处理；
    promise.all()：大家都加载完毕后才执行的操作；
    promise.race()：大家一起竞争，谁先返回结果就先执行谁的操作。
    
    
    
    关于promise的一些问题：
    问题一：是否可以拿到resolve后的值？可以。
    示例：
    
    
    问题二：如果使用then注册一个成功回调函数到某一个已经resolved或者rejected的promise时，这个回调还能成功执行吗？可以。
    示例：
    

12. 在js中设置元素属性：
    方式一：
    例：
    方式一：
    例：

13. JS中的深拷贝和浅拷贝： 👉详情
    浅拷贝：复制之后，修改复制的对象会引起原对象的改变。（例如：object.assign（）以及数组的concat（）、slice（）、Array.from（）、展开运算符等方法）
    深拷贝：复制之后，修改复制的对象不会引起原对象的改变。（例如： JSON.parse（JSON.stringify（[ ]））） （注意事项：JavaScript的数据结构主要可分为原始值、引用对象，前者不可浅拷贝，后者则可以进行浅拷贝、深拷贝。）
    
    示例：
    
    

14. 关于位置传参和命名传参：
    //位置传参：位置类型（关键）
    function foo(a: number, b: number, c: number) {
    }
    const a = 1;
    const b = 2;
    const c = 3;
    foo(c, a, b);
    //命名传参：参数类型（关键）
    function bar({ a, b, c }: { a: number; b?: number; c: number }) {
    }
    bar({ c: 1, a: 100 });

15. js数组与字符串的转化方法：
    
    数组转字符串也可以使用Array.prototype.toString()：
    

16. 对象结构转化为数组结构：👉参考资料
    
    

17. 关于JavaScript数组、字符串、对象常用方法：
    字符串（由于其数据结构类型为原始值，故只有深拷贝方法）：👉详情
    数组（由于其数据结构类型为引用对象，故有浅拷贝、深拷贝方法）：👉详情 （一些方法的复制方法版本即为其对应的浅拷贝方法。）
    对象：👉详情

18. 关于JavaScript中相等性判断：👉详情

19. 关于js（非）原生事件：通过addListener等监听方式添加的事件为js的原生事件，相反则为js的非原生事件。（js非原生事件一般均为异步操作）

20. 关于虚值：👉详情
    注意：全等比较、if判断等场景应警惕虚值的转换，防止出现逻辑错误。

21. 关于polyfill：👉详情 👉参考资料

22. 啊这：

23. 啊这：