1.关于闭包

什么是闭包？

闭包是有权限访问其它函数作用域内的变量的一个函数。
闭包概念：形成一个[不被销毁]的[私有的作用域]
闭包作用：保存变量[不被销毁] 保护变量[私有作用域]
闭包形式：函数嵌套函数，且返回一个堆内存

函数嵌套函数不一定是闭包

闭包的条件：
1.父函数有子函数
2.子函数使用了父函数的局部变量
3.子函数还可以通过别的方式调用（判断闭包的重要点）

在js中，变量分为全局变量和局部变量，局部变量的作用域属于函数作用域，在函数执行完以后作用域就会被销毁，内存也会被回收，但是由于闭包是建立在函数内部的子函数，由于其可访问上级作用域的原因，即使上级函数执行完，作用域也不会被销毁，此时的子函数——也就是闭包，便拥有了访问上级作用域中变量的权限，即使上级函数执行完以后作用域内的值也不会被销毁。

闭包解决了什么？

本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。由于闭包可以缓存上级作用域，这样函数外部就可以访问到函数内部的变量。

闭包的应用场景

ajax请求成功的回调
一个事件绑定的回调方法
setTimeout的延时回调
一个函数内部返回另一个匿名函数

闭包的优缺点

优点：让代码更加规范、简介
缺点：使用闭包过多，内存消耗大，造成内存的泄露

2.原型和原型链

(1).所有的引用类型都有一个proto（隐式原型）属性，属性值是一个普通的对象
(2).所有的函数除了有proto属性，还都有一个prototype（显式原型）属性，属性值是一个普通的对象
(3).所有引用类型都有一个constructor（构造函数）属性，该属性（是一个指针）指向它的构造函数
(4.).所有引用类型的proto属性指向它构造函数的prototype

当一个对象调用自身不存在的属性/方法时，会先去它的proto上查找，也就是它的构造函数的prototype；如果没有找到，就会去该构造函数的prototype的proto指向的上一级函数的prototype中查找，最后指向null。这样一层一层向上查找的关系会形成一个链式结构，称为原型链。

深入理解JS的原型和原型链

用自己的方式（图）理解constructor、prototype、proto和原型链

举例理解JS的原型和原型链

3.ES5继承和ES6继承

ES5：组合式继承，先创建子类的实例对象，然后再将父类的方法通过call方法添加到this上，通过原型和构造函数的机制来实现

示例：

// 定义一个父类function Parent() {    this.name = '爸爸'    this.age = 50    this.sex = '男'}// 在父类的原型上添加一个方法Parent.prototype.play = function () {    console.log('去打麻将')}// 定义一个子类function Child(name) {    this.name = name    // 第一步：继承父类的属性    Parent.call(this)}// 第二步：实现子类继承父类的方法（儿子从爸爸那里学会了打麻将）Child.prototype = new Parent()// 第三步：找回丢失的构造函数Child.prototype.constructor = Child

ES6：先创建父类的实例对象this（所以必须先调用父类的super()方法，然后在用子类的构造函数修改this），通过class关键字定义类，类之间通过extends关键字实现继承，子类必须在constructor方法中调用super方法。因为子类没有自己的this对象，而是继承了父类的this对象，然后对其加工，如果不调用super方法，子类得不到this对象。

class Parent {    constructor(name, sex) {        this.name = name        this.sex = sex    }    play() {        console.log(this.name + '打麻将超级垃圾')    }    speak() {        console.log('性别是：' + this.sex)    }}// 父类的实例化let father = new Parent('老高','男')father.play() // 打麻将超级垃圾father.speak() // 性别是男// 创建一个子类去继承父类class Child extends Parent{    constructor(name, sex) {        // 调用父类的 constructor        super(name, sex)    }}// 子类的实例化let son = new Child('小高', '女')son.play()son.speak()

4.原生AJAX请求步骤

五步使用法：
(1).创建XMLHTTPRequest对象
(2).使用open方法设置和服务器的交互信息
(3).设置发送的数据，开始和服务器端交互
(4).注册事件
(5).更新界面

Get请求：

// 第一步：创建异步对象let xhr = new XMLHttpRequest()// 第二步：设置请求的url参数，参数1是请求的类型，参数2是请求的url，可以携带参数xhr.open('get', '/baidu.com?username=1')// 第三步：设置发送的数据，开始和服务端交互xhr.send()// 第四步：注册事件onreadystatechange，当状态改变时会调用xhr.onreadystatechange = function () {    if (xhr.readyState === 4 && xhr.status === 200) {        // 第五步：如果到达这一步，说明数据返回，请求的页面是存在的        console.log(xhr.responseText)    }}

POST请求：

// 第一步：创建异步对象let xhr = new XMLHttpRequest()// post请求一定要添加请求头，不然会报错xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')// 第二步：设置请求的url参数，参数1是请求的类型，参数2是请求的url，可以携带参数xhr.open('post', '/baidu.com')// 第三步：设置发送的数据，开始和服务端交互xhr.send('username=1&password=123')// 第四步：注册事件onreadystatechange，当状态改变时会调用xhr.onreadystatechange = function () {    if (xhr.readyState === 4 && xhr.status === 200) {        // 第五步：如果到达这一步，说明数据返回，请求的页面是存在的        console.log(xhr.responseText)    }}

5.关于事件委托

什么是事件委托

事件委托也叫事件代理，就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

事件委托的作用

(1).提高性能：每一个函数都会占用内存空间，只需添加一个时间处理程序代理所有事件，所占用的内存空间更少；
(2).动态监听：使用事件委托可以自动绑定动态添加的元素，即新增的节点不需要主动添加也可以具有和其它元素一样的事件。

实现方式

我们先来看看，如果不用事件委托，需要绑定多个相同事件的时候是如何实现的：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><ul>    <li class="item">按钮</li>    <li class="item">按钮</li>    <li class="item">按钮</li>    <li class="item">按钮</li></ul></body><script>    window.onload = function () {        let lis = document.getElementsByClassName('item')        for (let i = 0; i < lis.length; i++) {            lis[i].onclick = function () {                console.log('用力的点我')            }        }    }</script></html>

不使用事件委托，那就要遍历每一个li元素，给每个li元素绑定一个点击事件，这样的做法非常耗费内存，如果有100个、1000个li元素，那对性能的影响是非常大的。

那么使用事件委托是怎么实现的呢？

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><ul id="wrap">    <li class="item">按钮</li>    <li class="item">按钮</li>    <li class="item">按钮</li>    <li class="item">按钮</li></ul></body><script>    window.onload = function () {        let ul = document.getElementById('wrap')        ul.onclick = function (ev) {            // 获取到事件对象            let e = ev || window.event            // 如果点击的元素的calssName为item            if (e.target.className === 'item') {                console.log('用力的点我')            }        }    }</script></html>

这样一来，通过事件委托，只需要在li元素的父元素ul上绑定一个点击事件，通过事件冒泡的机制，就可以实现li的点击效果。并且通过js动态添加li元素，也能绑定点击事件。

6.null不是一个对象，但为什么typeof null === object

原理是这样的，不同的对象在底层都会表示为二进制，在js中如果二进制的前三位都为0，就会被判断为object类型，null的二进制全为0，自然前三位也是0，所以typeof null === objcet。

7.关于深拷贝和浅拷贝

浅拷贝：只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存

实现：

方法1：直接用=赋值

let obj1 = {a: 1}let obj2 = obj1

方法2：Object.assign

当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝。

let obj1 = {a: 1}let obj2 = {}Object.assign(obj2, obj1)

方法3：for in循环只遍历第一层

function shallowObj(obj) {    let result = {}    for (let key in obj) {        if (obj.hasOwnProperty(key)) {            result[key] = obj[key]        }    }    return result}let obj1 = {    a: 1,    b: {        c: 2    }}let obj2 = shallowObj(obj1)obj1.b.c = 3console.log(obj2.b.c) // 3

深拷贝：
方法1：用 JSON.stringify 把对象转换成字符串，再用 JSON.parse 把字符串转换成新的对象

let obj1 = {    a: 1,    b: 2,}let obj2 = JSON.parse(JSON.stringify(obj1))

方法2：采用递归去拷贝所有层级属性

function deepClone(obj) {    // 如果传入的值不是一个对象，就不执行    if (Object.prototype.toString.call(obj) !== '[object Object]') return    // 根据传入值的类型初始化返回结果    let result = obj instanceof Array ? [] : {}    for (let key in obj) {        if (obj.hasOwnProperty(key)) {            // 如果obj是个对象，就递归调用deepClone去遍历obj的每一层属性，如果不是对象就直接返回值            result[key] = Object.prototype.toString.call(obj[key]) === '[object Object]' ? deepClone(obj[key]) : obj[key]

若转载，请注明出处

文章转载于:https://www.jianshu.com/p/ebddcc498ea2

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《闭包，原型链，继承，AJAX请求步骤等javaScript基础》