JS知识点总结

清除字符串前后所有空格

function trim(str) {
    if (str && typeof str === "string") {
        return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
    }
}

一个页面从输入 URL 到页面加载显示完成过程中都发生了什么

1. 浏览器地址栏输入url
2. 浏览器会先查看浏览器缓存–系统缓存–路由缓存，如有存在缓存，就直接显示。如果没有，接着第三步
3. 域名解析（DNS）获取相应的ip
4. 浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手
5. 握手成功，浏览器向服务器发送http请求，请求数据包
6. 服务器请求数据，将数据返回到浏览器
7. 浏览器接收响应，读取页面内容，解析html源码，生成DOm树
8. 解析css样式、浏览器渲染，js交互绑定多个域名，数量不限；

三次握手(建立连接)

1. 主机向服务器发送一个建立连接的请求（您好，我想认识您）；
2. 服务器接到请求后发送同意连接的信号（好的，很高兴认识您）；
3. 主机接到同意连接的信号后，再次向服务器发送了确认信号（我也很高兴认识您）
4. 自此，主机与服务器两者建立了连接。

TCP 协议

1. 三次握手的过程采用 TCP 协议，其可以保证信息传输的可靠性，三次握手过程中，若一方收不到确认信号，协议会要求重新发送信号。

四次挥手(断开连接)

1. 主机向服务器发送一个断开连接的请求（不早了，我该走了）；

2. 服务器接到请求后发送确认收到请求的信号（知道了）；

3. 服务器向主机发送断开通知（我也该走了）；

4. 主机接到断开通知后断开连接并反馈一个确认信号（嗯，好的），服务器收到确认信号后断开连接；

Ajax如何使用

一个完整的AJAX请求包括五个步骤：

创建XMLHTTPRequest对象
使用open方法创建http请求，并设置请求地址
xhr.open（get/post，url，async，true（异步），false（同步））经常使用前三个参数

设置发送的数据，用send发送请求
注册事件（给ajax设置事件）
获取响应并更新页面

出现跨域问题的原因:

在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。在请求的过程中我们要想回去数据一般都是post/get请求，所以..跨域问题出现

跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号(如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。

同源策略 是由NetScape提出的一个著名的安全策略。所谓的同源，指的是协议，域名，端口相同。浏览器处于安全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。
 

什么是事件冒泡？

一个事件触发后，会从子元素向父元素进行传播，这种传播分为三个阶段，

捕获阶段（从window对象传导到目标节点（从外到里），这个阶段不会响应任何事件），目标阶段，（在目标节点上触发），冒泡阶段（从目标节点传导回window对象（从里到外）），事件委托/事件代理就是利用事件冒泡的机制把里层需要响应的事件绑定到外层

//上面点击会出现事件冒泡
document.getElementById("hr_three").onclick=function(e){

    e.stopPropagation(); //阻止了事件冒泡,
    
}

 

数组方法有哪些

push() 从后面添加元素，返回值为添加完后的数组的长度

arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素

arr.shift() 从前面删除元素，只能删除一个 返回值是删除的元素

arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度

 arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素

arr.concat() 连接两个数组 返回值为连接后的新数组

str.split() 将字符串转化为数组

 arr.sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的

arr.reverse() 将数组反转,返回值是反转后的数组

 arr.slice(start,end) 切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组

 arr.forEach(callback) 遍历数组,无return  即使有return，也不会返回任何值，并且会影响原来的数组

 arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组 。

 arr.filter(callback) 过滤数组，返回一个满足要求的数组 
 

数组去重的方式 

使用indexof（）方法
使用lastindexof（）方法  和indexof方法一样  indexof从头部开始匹配  lastindexof从尾部匹配
ES6的set结构  set不接受重复数据
 使用sort方法先将原数组排序，然后与相邻的比较，如果不同则存入新数组
使用filiter和indexof方法
使用ES6 的set和扩展运算符
使用set和Array.from（）方法             array.from可以将set结构转成数组
用splice和双层循环
使用includes方法
 

什么是原型

 任何对象实例都有一个原型，也叫原型对象，这个原型对象由对象的内置属性_proto_指向它的构造函数的prototype指向的对象，即任何对象都是由一个构造函数创建的，但是不是每一个对象都有prototype，只有方法才有prototype。
什么是原型链？
原型链基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。我们知道，每个构造函数都有一个原型对象，每个原型对象都有一个指向构造函数的指针，而实例又包涵一个指向原型对象的内部指针。
    原型链的核心就是依赖对象的_proto_的指向，当自身不存在的属性时，就一层层的扒出创建对象的构造函数，直至到Object时，就没有_proto_指向了。
因为_proto_实质找的是prototype，所以我们只要找这个链条上的构造函数的prototype。其中Object.prototype是没有_proto_属性的，它==null。

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含指向原型对象内部的指针。我们让原型对象（1）等于另一个原型对象的实例（2）,
此时原型对象（2）将包含一个指向原型对象（1）的指针，
再让原型对象（2）的实例等于原型对象（3），如此层层递进就构成了实例和原型的链条，这就是原型链的概念

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数想指针(constructor)，而实例对象都包含一个指向原型对象的内部指针(__proto__)。如果让原型对象等于另一个原型对象的实例，此时的原型对象将包含一个指向另一个原型的指针(__proto__)，另一个原型也包含着一个指向另一个构造函数的指针(constructor)。假如另一个原型又是另一个类型的实例……这就构成了实例与原型的链条。也叫原型链
原型继承是js的一种继承方式，原型链作为实现继承的主要方法,其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法, 
原型继承：利用原型中的成员可以被和其相关的对象共享这一特性，可以实现继承，这种实现继承的方式，就叫做原型继承.
 

请写出一个简单的类与继承

创建类有三种：

• 使用function和this关键字
• 原型方法  用prototype和this关键字
• 使用object.create()方法构造

继承有六种：

• 原型继承        借用构造函数继承        组合继承        原型式继承    寄生式继承         寄生组合式继承
   

Object.prototype.toString.call()方法 

Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(“abc”);// "[object String]"
Object.prototype.toString.call(123);// "[object Number]"
Object.prototype.toString.call(true);// "[object Boolean]"