JavaScript学习

1.js数据类型

基本类型 undefined string symbol null number boolen bigInt(es10)

引用类型 object

1.undefined和null的区别

在转成数字类型时，undefined转为NaN，null转为0；

undefined表示变量定义了但没有赋值，null表示变量初始值为空，是已经赋值了的；

2.symbol的作用和相关知识

作用 一般把symbol作为对象属性的key值，避免在不知道对象有什么属性时给对象添加新的属性造成覆盖。

1.Symbol函数接受一个可选参数方便代码阅读和后期调试
2.用Object.getOwnPropertyNames(),Object.keys()或者for...in等方法无法显示Symbol属性名
3.Objecd.getOwnPropertySymbols()方法返回包含所有Symbol属性的数组
4.Symbol函数不能使用new，因为是原始值

5.Symbol.for() 创建共享Symbol，如果已存在 直接返回已有的Symbol
6.Symbol函数创建的原始值都是唯一的
7.Symbol.keyFor() 返回已登记Symbol有关的键

3. bigInt的作用和相关知识。

BigInt数据类型的目的是比Number数据类型支持的范围更大的整数值以任意精度表示整数的能力尤为重要。使用BigInt，整数溢出将不再是问题。

2.判断类型

typeof，instanceof，Object.prototype.toString

（1）typeof是一个一元运算符，放在一个运算数之前，运算数可以使任意类型。

它返回值是一个字符串，说明运算数的类型。

typeof返回值:number，string，undefined，object，boolean，function，symbol（ES6新增）

数字 typeof(x)=“number” 字符串 typeof(x)=“string” 布尔值 typeof(x)=“boolean” 对象，数组和null typeof(x) = “object” 函数 typeof(x)=“function”

局限性：但是在判断一个引用类型的变量时会出现一个问题，无论是什么引用类型都是object。这时候就需要instanceof来检测某个对象是不是另一个对象的实例。

（2）instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的prototype属性。用于判断一个变量是否某个对象的实例。

局限性（特性）：因为所有引用类型都是object的子类，引用类型instanceof object 必定为true

var a=new Array();
alert(a instanceof Array); // true，
alert(a instanceof Object) //也会返回 true;
//这是因为 Array 是 object 的子类。

（3）Object.prototype.toString也可以用来判断某个对象值属于哪种内置类型。

var arr = [];
console.log(Object.prototype.toString.call(arr))  //"[object Array]"

3.数据类型转换

1. == （相等）和 ===（全等）的区别

   建议只要类型确定使用===来比较

==在比较之前会进行隐式的数据转换，然后再进行比较，如下比较明显是有问题的。

0==[] \\true

===比较时先比较数据类型，数据类型不同直接返回false。

注意NaN == NaN \\false

​ NaN === NaN \\false

NaN用于比较时使用，判断是否有效数字isNaN()判断

2. 强制转换和隐式转换

   强制转换是我们主动把数据转换成我们所需要的数据类型，常见方法 praseInt(), praseFloat(),String(),Number() …等等

   隐式转换是程序自动转换的，常出现在运算符，比较符，if（）中

4.原型原型链

1. 所有对象都有_proto_属性,包括普通对象和函数对象，该属性指向其构造函数的原型对象。
2. 函数对象具有prototype属性，指向该对象的原型对象。
3. 原型对象也是一个普通对象，他的_proto_属性指向object的原型对象。
4. 所有的函数对象都是由function对象new出来的，所以他们的_proto_指向function的原型对象（包括function对象他自己）。
5. 当访问一个对象的一个属性时，若是该对象包含该属性则直接返回这个属性，若不包含就去这个对象的_proto_指向的其构造函数的原型对象中找这个属性，找到则返回这个属性，找不到则在这个原型对象__proto__指向的下一个原型对象继续找，直到找到null为止，找不到就返回undefined
   

5.闭包

作用：提供在函数外部能够访问函数内部作用域的通道，并让这些变量的值始终保存在内存中

闭包的形式：函数内嵌套一个函数，内部函数调用外层函数变量, 将内部函数作为外部函数的返回值返回。

6.call/apply/bind

作用：都是用来改变函数中this的指向的

相同点：这三个方法第一个参数都是接收一个对象的

不同点：call，bind要传入额外参数是要再传入多个参数，apply接收一个数组，自动分配。

​call/apply返回的是调用的函数结果，bind返回的是一个新的函数，必须调用才能执行

var age = 18;
var obj = {
  name: "小红",
  objAge: this.age,
  fn: function () {
    console.log(this.name + this.objAge + "岁");
  },
  fn1: function (source, target) {
    console.log(this.name + this.objAge + "岁" + "从" + source + "到" + target);
  },
};
var obj1 = {
  name: "小蓝",
  objAge: 15,
};
obj.fn(); // 小红18岁
obj.fn.call(obj1); // 小蓝15岁
obj.fn.apply(obj1); // 小蓝15岁
obj.fn.bind(obj1)(); // 小蓝15岁

obj.fn1("北京", "南京"); // 小红18岁从北京到南京
obj.fn1.call(obj1, "北京", "南京"); // 小蓝15岁从北京到南京
obj.fn1.apply(obj1, ["北京", "南京"]); // 小蓝15岁从北京到南京
obj.fn1.bind(obj1, "北京", "南京")(); // 小蓝15岁从北京到南京

7.DOM事件流和事件委托

事件流分为事件捕获和事件冒泡，默认事件发生在事件冒泡阶段。 事件捕获从外到内，时间冒泡从内到外，先捕获，再冒泡。

DOM0级事件

行内绑定onclick，或者先获取dom元素，在添加onclick事件，兼容性好，支持冒泡，不支持捕获，事件会覆盖

DOM2级事件

addEventListener，先获取dom元素，在添加事件，能同时绑定几个事件（相同或不同），然后顺序执行，不会覆盖，支持冒泡和捕获，缺点老版本ie不支持，兼容性问题

事件委托

利用事件冒泡，为父元素添加事件间接操作子元素，比如ul->li中，给ul添加事件不给li添加，减少与dom的交互，能优化性能。

8.cookie/storage

1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的

9.数据和对象的常用方法

数据：push，pop，unshift，shift，splice，join，foreach，map， reduce，filter，some， every，contant。。。

对象 hasOwnProperty，assign，keys，values

10.new一个新对象发生了什么

• 以构造器的prototype属性为原型，创建新对象；

• 将this(也就是上一句中的新对象)和调用参数传给构造器，执行；

• 如果构造器没有手动返回对象，则返回第一步创建的新对象，如果有，则舍弃掉第一步创建的新对象，返回手动return的对象。

11.防抖/节流

防抖和节流目的都是避免频繁操作，造成资源浪费

防抖是频繁点击后只触发一次，一般用于提交表单。先清除延迟=>设置延迟=>延迟到了就执行对应方法 避免频繁提交，只提交最后一次

节流是每隔一定时间才触发一次，一般用于页面滚动，窗口改变等引起的操作

12.requestAnimationFrame

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：

1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

13.this的指向

普通函数中的this

1.默认绑定 函数调用时无任何前缀，this指向window （非严格模式下，严格模式this指向undefined）

2.隐式绑定 函数被谁调用，this指向调用该函数的对象。

3.硬绑定 call/apply/bind 改变this的指向

4.构造函数绑定 构造函数中的this指向new出的对象

箭头函数中的this

箭头函数中的this指向箭头函数定义时的上下文

14.作用域链

代码在环境中执行时，会创造一个作用域链，内部环境可以通过作用域链访问外部环境，反之则不行，想要访问得通过闭包。

15.var/let/const

var声明可变变量，不存在块级作用域，存在变量提升

let声明变量，存在块级作用域，不存在变量提升=》暂时性死区，在window对象中声明不会变为window对象的属性。var会

const与let相似，声明的变量必须先赋值，声明的基本类型不允许修改，声明的引用类型可以修改其中的属性，不能修改指向（地址和值）

16.异步编程★

promise -> resolve/reject

async/await

1.promise的理解

promise是js中进行异步编程的新的解决方案。 （旧的是纯回调函数的形式，会产生回调地狱的问题）

promise是一个构造函数。

promise对象用来封装一个异步操作并获取其结果。

promise中的方法/

then/catch

all/race

async / await 是promise的语法糖

await只能在async中使用，async返回的是一个promise对象，async放在函数名前面。

await后跟一个表达式，如果该表达式是个promise实例对象，就返回promise执行成功后的值。同时会阻塞该表达式后面的代码等待promise运行完再执行

如果该表达式不是promise对象，则直接返回该表达式的值，也会阻塞表达式后面的代码，使之加入微任务队列。

17.箭头函数

箭头函数用（）=>{ } 定义函数

箭头函数都是匿名函数

箭头函数不能用于构造函数，没有new

this的指向问题

优点 写法简洁，不用再定义this

缺点 没有arguments，super

18.js运行机制

js特点是单线程的，为了避免一些任务执行造成堵塞，js就出现了同步任务和异步任务。

异步任务->分为宏任务/微任务

常见的宏任务有script，setTimeout，setInterval，io操作等

常见微任务有promise.then（），Object.observe()

执行流程 先将script加入执行栈，将里面的宏任务加入宏任务队列，微任务加入微任务队列，遇到同步任务按顺序执行，然后清空微任务队列，微任务执行完成后进入下一轮的事件循环。

19.继承方式

原型继承，原型链继承，new继承

20.垃圾回收机制

标记清理 引用计数

现在常用的是标记清理：垃圾回收器在运行时先给所有内存中的变量打上标记，然后会去掉环境可达变量的标记，然后下一次垃圾回收时清除所有带标记的变量，回收他们的内存

不太常用的是引用计数，就是一个变量赋值给另一个变量时引用次数+1，然后如果这个变量被引用移除了，引用次数-1，引用次数变为0时候就说明要回收了，但是如果一个对象内两个变量互相引用他们的引用次数就永远不会为0，就会造成内存泄漏。