函数创建与定义的过程

函数定义阶段
1. 在堆内存中开辟一段空间
2. 把函数体内的代码一摸一样的的存储在这段空间内
3. 把空间赋值给栈内存的变量中
函数调用阶段
1. 按照变量名内的存储地址找到堆内存中对应的存储空间
2. 在调用栈中开辟一段新的函数执行空间
3. 在执行空间中进行形参赋值
4. 在执行空间中进行预解析
5. 在执行空间中完整执行一遍函数内的代码
6. 开辟的函数执行空间销毁

不会销毁的函数执行空间

当函数内返回一个复杂数据类型
并且函数外部有变量接受这个复杂数据类型
函数执行完毕的函数执行空间不会被销毁

function fn() {
    const obj = {
        a: 1,
        b: 2
    }
    return obj
}

const res = fn()
console.log(res)

// 如果后续不需要这个空间了, 只需要让 res 指向别的位置即可
res = 100

认识闭包

需要一个不会被销毁的函数执行空间
需要直接或间接的返回一个函数
内部函数使用着外部函数的私有变量

概念: 函数里的函数

优点:
1. 可以在函数外面访问到函数内部的变量
2. 延长了变量的生命周期
缺点
1. 闭包函数(不会销毁的空间), 大量使用会造成内存溢出

function outer () {
    let a = 100
    let b = 200

    // 我们说 inner 是 outer 的闭包函数
    function inner () {
        /**
         * 我使用了一个 a 变量, 但是 inner 自己没有
         * 所以我用的是 外部函数 outer 内部的变量 a
        */
        // console.log(a)
        return a
    }
    return inner
}

// 我们说 res 是 outer 的闭包函数
let res = outer()

let outerA = res()
console.log(outerA)

沙箱模式

利用了函数内 "间接" 返回一个函数
外部函数返回一个对象, 对象内书写多个函数

function outer () {
    let a = 100
    let b = 200

    // 创建一个 沙箱, "间接的返回一个函数"
    const obj = {
        getA: function () {
            return a
        },
        getB: function () {
            return b
        },
        setA: function (val) {
            a = val
        }
    }
    return obj
}

// 得到一个沙箱
const res1 = outer()

console.log(res1.getA())    // 100
console.log(res1.getB())    // 200

res1.setA(999)
console.log(res1.getA())    // 999

// 重新得到一个沙箱
const res2 = outer()
console.log(res2.getA())    // 100

沙箱模式小案例

<button class="sub">-</button>
<input class="inp" type="text" value="1">
<button class="add">+</button>

<br>

<button class="sub1">-</button>
<input class="inp1" type="text" value="1">
<button class="add1">+</button>

// 准备一个沙箱
function outer() {
    let a = 1
    return {
        getA() {
            return a
        },
        setA(val) {
            a = val
        }
    }
}

// 0. 获取元素
const subBtn = document.querySelector('.sub')
const addBtn = document.querySelector('.add')
const inp = document.querySelector('.inp')

// 0. 准备变量
// let count = 1
let res = outer()
subBtn.onclick = function () {
    let count = res.getA()
    res.setA(count - 1)
    inp.value = res.getA()
}
addBtn.onclick = function () {
    // count++
    let count = res.getA()
    res.setA(count + 1)
    inp.value = res.getA()
}

// 0. 获取元素
const subBtn1 = document.querySelector('.sub1')
const addBtn1 = document.querySelector('.add1')
const inp1 = document.querySelector('.inp1')

// 0. 准备变量
let res1 = outer()
subBtn1.onclick = function () {
    let count = res1.getA()
    res1.setA(count - 1)
    inp1.value = res1.getA()
}
addBtn1.onclick = function () {
    let count = res1.getA()
    res1.setA(count + 1)
    inp1.value = res1.getA()
}

沙箱模式的语法糖

尽可能的简化沙箱模式的语法
利用的是 getter 和 setter 来进行操作数据
语法糖:
- 再不影响功能的情况下, 提供一点更适合操作的语法
- 一碗水, 喝了能让我们补充水分, 水里加点糖, 喝完能让我们补充水分, 并且更好喝了

function outer() {
    let a = 100
    let b = 200

    return {
        get a() { return a },
        get b() { return b },
        set a(val) { a = val }
    }
}

let res = outer()
console.log(res.a)
console.log(res.b)
res.a = 999
console.log(res.a)

闭包的面试题

function fun(n, o) {
    console.log(o)

    const obj = {
        fun: function (m) {
            return fun(m, n)
        }
    }

    return obj
}

var a = fun(0)    // undefined
a.fun(1)    // 0
a.fun(2)    // 0
a.fun(3)    // 0

/**
 *  var a = fun(0)
 *  a.fun(1)
 *  a.fun(2)
 *  a.fun(3)
 *
 *  1. var a = fun(0)
 *          调用 fun(QF001) 函数(QF001) 传递一个 参数 0
 *              全局函数 fun (QF001) 的 形参 n == 0     形参 o == undefined
 *          调用 fun 函数后, 会返回一个对象 存储在 变量 a 中, 这个对象内部有一个属性叫做 fun, 属性值为 一个函数(QF002),
 *              所以我们可以通过 a.fun()   去调用这个函数
 *
 *  2. a.fun(1)
 *      2.1 调用这个函数 会 return 一个函数 fun (为全局函数 QF001) 的调用结果,   
 *      2.2 调用全局函数 fun(m, n)       m 此时 传递的是 1, n 传递的是 0
 *      2.3 执行全局函数 fun(m, n) 内部会输出第二个形参
 *
 *  3. a.fun(2)
 *      2.1 调用这个函数 会 return 一个函数 fun(为全局函数 QF001) 的调用结果
 *      2.2 调用全局函数 fun(m, n)  m 此时传递的是 2, n 传递的是 0
 *      2.3 执行全局函数 fun(m, n) 内部会输出第二个形参
 *
*/

函数柯里化

把一次传递两个参数, 变成需要调用两次但每次只传递一个参数利用了闭包, 把第一次传递的参数保存下来(延长生命周期)

正则验证密码

const reg = /^\w{6,12}$/;
const res = reg.test("asdvkashas");
console.log(res);

封装为函数

function fn1(reg, str) {
    return reg.test(str);
}
console.log(fn1(/^\w{6,12}$/, "abcdefg"));
console.log(fn1(/^\w{6,12}$/, "abcdefghijkl"));
console.log(fn1(/^\w{6,12}$/, "abcdefghijklmnopq"));

封装为柯里化函数

function test(reg) {
    return function (str) {
        return reg.test(str);
    };
}

const testPwd = test(/^\w{6,12}$/);
const testName = test(/^\w{6,8}$/);
const testPhone = test(/^\d{11}$/);
console.log(testPwd("abcdefg"));
console.log(testPwd("QF666"));
console.log(testPwd(12345678901));

函数柯里化封装

/**
 *  函数柯里化
 *      内层函数负责处理功能
 *      外层函数负责处理参数 (当参数满足指定数量时在执行)
 *
 *  功能: 拼接地址栏字符串
 *      http://localhost:8080/index.html
 *          传输协议: http  https
 *          域名:   localhost   127.0.0.1
 *          端口号: 0~65535
 *          地址:   /a  /a/b    /a/b/index
 *
 *  http://localhost:8080/地址1
 *  http://localhost:8080/地址2
 *  http://localhost:8080/地址3
 *  http://localhost:443/地址1
 *  http://localhost:445/地址2
 *  http://localhost:7777/地址3
 *  http://127.0.0.1:7777/地址1
 *  http://127.0.0.2:7778/地址2
 *  http://127.0.0.3:7779/地址3
 *
 */
function fn(a, b, c, d) {
    return a + "://" + b + ":" + c + d;
}
// let res = fn('http', 'localhost', '8080', '/a/b/d')
// console.log(res)

// 外层函数: 负责接受功能参数, 与基础参数
function currying(callback, ...arg) {
    // 利用扩展运算符以数组的形式拿到所有的 基础参数, 没有的话为 空数组

    // 内层函数负责判断参数是否满足指定数量, 满足调用函数, 不满足继续接收参数
    return function (..._arg) {
        // 将来内层函数也有可能接收参数
        _arg = [...arg, ..._arg];
        if (_arg.length === callback.length) {
            // callback.length 拿到函数形参的数量
            return callback(..._arg);
        } else {
            return currying(callback, ..._arg);
        }
    };
}

let r1 = currying(fn, "https", "localhost");
let r2 = currying(fn, "https");
let r3 = currying(fn);
let res1 = r1("8080", "/a/b/c");
let res2 = r1("7777", "/index");

console.log(res1);
console.log(res2);

函数的防抖与节流

防抖:
- 短时间内快速触发同一个事件
- 每一次都用下一次干掉上一次, 永远执行最后一次

// <input type="text" class="inp">
let inp = document.querySelector(".inp");
inp.oninput = (function (timer) {
    return function (e) {
        clearInterval(timer);

        timer = setTimeout(() => {
            console.log("经过了 300 ms 搜索到了", e.target.value, "相关的新闻");
        }, 300);
    };
})(0);

节流:
- 短时间内快速触发同一个事件
- 第一次执行过程中, 不能重复触发, 等到第一次执行完毕后, 才可以触发

// <input type="text" class="inp">
let inp = document.querySelector(".inp");
inp.oninput = ((type) => {
    return (e) => {
        if (type == false) return;

        type = false;

        setTimeout(() => {
            type = true;
            console.log("经过了 300 ms 搜索到了", e.target.value, "相关的新闻");
        }, 300);
    };
})(true);

数据劫持

将来在框架中我们通常都是数据驱动视图也就是说: 修改完毕数据, 视图自动更新

数据劫持
- 以原始数据为基础, 对数据进行一份复刻
- 复刻出来的数据是不允许修改的, 值是从原始数据里面获取的
- 语法: Object.defineProperty(哪一个对象, 属性名, { 配置项 })
  - 配置项:
    1. value: 该属性对应的值
    2. writable: 该属性是否可以被重写, 默认是 false
    3. emunerable: 该属性是否可被美剧, 默认是 false
    4. get: 是一个函数, 叫做 getter 获取器, 可以来决定该属性的值
      - get 函数的返回值, 就是当前这个属性的值
      - 注意: 不能和 value 与 writable 一起使用, 会报错
    5. set: 是一个函数, 叫做 setter 设置器, 当你需要修改该属性的值的时候会触发该函数

const obj = {};
obj.name = "Jack";

Object.defineProperty(obj, "age", {
    // value: 20,
    // writable: true,
    enumerable: true,
    get() {
        return 100;
    },
    set(val) {
        console.log("你想修改 age 的值, 你想修改为", val);
    },
});
// // console.log(obj)
// obj.name = 'Jack001'
obj.age = 50;
console.log(obj);

// for (let k in obj) {
//     console.log(k)
// }

实现数据劫持

const obj = {
    name: "QF001",
    age: 18,
};
const res = {};
Object.defineProperty(res, "name", {
    get() {
        return obj.name;
    },
    set(val) {
        // 设置的时候, 直接去修改原对象 obj 中对应属性的值, 就能够影响到 res对象中对应的值
        obj.name = val;
        box.innerHTML = `名字: ${res.name}; 年龄: ${res.age}`;
    },
});
Object.defineProperty(res, "age", {
    get() {
        return obj.age;
    },
    set(val) {
        // 设置的时候, 直接去修改原对象 obj 中对应属性的值, 就能够影响到 res对象中对应的值
        obj.age = val;
        box.innerHTML = `名字: ${res.name}; 年龄: ${res.age}`;
    },
});
// console.log(res)
// console.log(res.age)
// console.log(res.name)
box.innerHTML = `名字: ${res.name}; 年龄: ${res.age}`;

封装数据劫持

function observer(origin, fn) {
    // origin 劫持的原数据, fn 你想做的事

    // 劫持目标
    const target = {};

    for (let k in origin) {
        Object.defineProperty(target, k, {
            get() {
                return origin[k];
            },
            set(val) {
                // 设置的时候, 直接去修改原对象 obj 中对应属性的值, 就能够影响到 res对象中对应的值
                origin[k] = val;
                fn(target);
            },
        });
    }

    // 首次调用一下, 让页面有数据
    fn(target);

    // 返回一个被劫持后的数据
    return target;
}
const obj = {
    name: "QF001",
    age: 18,
};
function fn(res) {
    box.innerHTML = `名字: ${res.name}; 年龄: ${res.age}`;
}
const app = observer(obj, fn);
console.log(app);

inp.oninput = function (e) {
    app.age = e.target.value;
};

模拟数据劫持 + 渲染

封装操作

/**
 *  为了将来使用者考虑, 需要制定一些规则
 *      + 把 渲染页面这件事, 直接书写在 html 结构内
 *      + 让我来捕获, 我来替你进行渲染
 *
 *  约定一些渲染规则
 *      + 因为我们已经确定了根元素
 *      + 把我的约定放在了根元素内就可以了
 *      + 当你需要渲染一个基本数据的时候
 *          => 约定一个自己认识的符号
 *          => {{}}
 */
/**
 * options 是一个配置项
 *  所有参数都以配置型的方式传递给我
 *      el: 参数, 需要一个选择器 用来锁定一个 页面结构
 *      data: 你需要在页面上渲染的数据
 */
function fn(options = {}) {
    // 1. 确保传递了 el 参数
    if (options.el === undefined) {
        throw new Error("您的 el 选项没有传递, 请您传递");
    }

    // 2. 确保传递了 data 对象
    if (options.data == undefined || options.data.constructor !== Object) {
        throw new Error("您没有按照规定传递一个 对象形式的 data");
    }

    // 3. 确保能正确拿到根节点
    const root = document.querySelector(options.el);
    if (root === null) {
        throw new Error("您传递的 el 参数有误, 我没有获取到对应节点");
    }

    // 4. 劫持 options.data 内的数据
    const _data = {};
    // 4.1 留存一份 data 的数据 (可选, 有了更好)
    _data.origin = options.data;
    // 4.2 保存原始基础结构 (不存的话, 首次渲染完毕页面结构将没有 {{}}, 那么render函数就没办法找到对应的位置赋值, 先写后续演示问题)
    const rootStr = root.innerHTML;
    // 4.3 开始劫持
    for (let k in options.data) {
        Object.defineProperty(_data, k, {
            get() {
                return options.data[k];
            },
            set(val) {
                options.data[k] = val;
                // 重新修改数据时需要重新渲染页面, 封装一个 rander 函数
                rander(root, _data, rootStr);
            },
        });
    }

    // 5. 一开始的时候先渲染一些页面
    rander(root, _data, rootStr);

    // 6. 返回劫持后的对象
    return _data;
}
function rander(root, _data, str) {
    // 正则
    const reg = /{{ *(\w+) *}}/g;

    // 从 str 内捕获到所有的内容
    const res = str.match(reg);
    res.forEach((item) => {
        const key = reg.exec(str)[1];
        console.log(key);

        str = str.replace(/{{ *(\w+) *}}/, _data[key]);
    });

    // 替换完毕以后, 去更新 root 内的数据
    root.innerHTML = str;
}

实际使用

const app = fn({
    el: "#root",
    data: {
        name: "QF001",
        age: 18,
        message: "醒醒, 别睡了, 就说你呢!",
    },
});

DOM 结构

<div id="root">
    <p>你好 想使用我的name属性 : {{ name }}</p>
    <p>你好 想使用我的age属性 : {{ age }}</p>
    <p>你好 想使用我的message属性 : {{ message }}</p>
</div>

数据劫持升级

语法: Object.defineProperties(对象, {配置项})
弊端: 数据劫持后新增的数据无法被劫持

Object.defineProperties(对象, {
    属性1: { 配置项 },
    属性2: { 配置项 },
});
// 原先: Object.defineProperty(对象, 属性, {配置项})

const obj = {
    name: "QF001",
    age: 18,
};
console.log("原始 obj: ", obj);

for (let k in obj) {
    Object.defineProperties(obj, {
        ["_" + k]: {
            value: obj[k],
            writable: true,
            enumerable: false,
        },
        [k]: {
            get() {
                return obj["_" + k];
            },
            set(val) {
                obj["_" + k] = val;
                root.innerHTML = `名字: ${obj.name}; 年龄: ${obj.age}`;
            },
        },
    });
}
root.innerHTML = `名字: ${obj.name}; 年龄: ${obj.age}`;

console.log("劫持后的数据", obj);

数据代理

proxy (数据代理是官方给的, 但是大家还是习惯叫数据劫持)
ES6 提供的语法
内置构造函数 Proxy(代理原始对象, {配置项})

const obj = {
    name: "QF001",
    age: 18,
};
console.log("原始的对象: ", obj);

// 开始代理
const res = new Proxy(obj, {
    // 配置 get 来进行代理设置
    get(target, property) {
        // target, 就是你要代理的目标对象, 当前案例中 为 obj
        // property, 就是该对象内的每一个属性, 自动遍历
        return target[property];
    },
    // 配置 set 来进行修改
    set(target, property, val) {
        // target, 就是你要代理的目标对象, 我们当前案例就是 obj
        // property, 就是你要修改的 对象属性
        // val, 就是你要修改那个属性的值
        target[property] = val;

        console.log(
            "你想要修改",
            property,
            "属性, 你想修改为: ",
            val,
            "我需要根据你修改的内容重新渲染页面"
        );

        // 注意!!! 简单代理需要返回 true (返回 true 代表属性设置成功; 后续详细讲解)
        return true;
    },
});

console.log("代理后的对象: ", res);

res.name = "100";

res.gender = "男";

回调函数 callback

一种函数的调用方式
作用: 当你在 "封装" 异步操作的时候使用回调函数
- 把函数 A 当作参数传递到函数 B 内
- 在函数 B 内以形参的方式调用函数 A
- 函数 A 是函数 B 的回调函数

回调函数示例

function A() {
    console.log("函数A开始执行");
}
function B(cb) {
    console.log("函数B开始执行");
    cb();
}
B(A);

封装一个异步函数

function fn(jinnang = () => {}) {
    console.log("班长去买水了");
    const timer = Math.ceil(Math.random() * 3000);
    setTimeout(() => {
        console.log("班长买完水了");
        console.log("耗时", timer);
        console.log("按照锦囊内的内容行事");
        jinnang();
    }, timer);
}
/**
 * fn 函数一旦调用, 班长出发开始去买水
 *      在班长出发的时候, 给他一个锦囊
 */
fn(() => {
    console.log("去买一瓶牛奶");
});
fn();

当我们发送一个网络请求的时候, 是存在失败现象的
- 我们此时还没有办法发送网络请求, 所以以时间为界限, 约定执行时间如果超过 3500ms 那么就算失败

const timer = Math.ceil(Math.random() * 3000) + 2000;
setTimeout(() => {
    if (timer > 3500) {
        console.log("请求失败", timer);
    } else {
        console.log("请求成功", timer);
    }
}, timer);

封装异步(模拟成功失败的状态)

function fn(chenggong, shibai) {
    const timer = Math.ceil(Math.random() * 3000) + 2000;
    setTimeout(() => {
        if (timer > 3500) {
            console.log("买水失败, 耗时 ", timer);
            shibai();
        } else {
            console.log("买水成功, 耗时: ", timer);
            chenggong();
        }
    }, timer);
}
fn(
    () => {
        console.log("谢谢班长, 在帮我把水退了吧");
    },
    () => {
        console.log("辛苦班长了, 买不到别回来了");
    }
);

回调地狱

当你使用回调函数过多的时候, 会出现的一种代码书写结构

需求:
1. 在买水成功后, 让班长帮忙退掉
2. 在退掉以后, 再次让班长帮忙去买水 (此时必须要在前一个水购买完成之后再去购买)
3. 在第二次买水成功以后, 再次让班长去买水

function fn(chenggong, shibai) {
    // const timer = Math.ceil(Math.random() * 3000) + 2000
    const timer = Math.ceil(Math.random() * 3000);
    setTimeout(() => {
        if (timer > 3500) {
            console.log("买水失败, 耗时 ", timer);
            shibai();
        } else {
            console.log("买水成功, 耗时: ", timer);
            chenggong();
        }
    }, timer);
}
fn(
    () => {
        console.log("班长第一次买水成功, 帮我退掉");
        fn(
            () => {
                console.log("班长第二次买水成功");
                fn(
                    () => {
                        console.log("班长第三次买水成功");
                    },
                    () => {
                        console.log("班长第三次买水失败");
                    }
                );
            },
            () => {
                console.log("班长第二次买水失败");
            }
        );
    },
    () => {
        console.log("班长第一次买水失败");
    }
);

原因:
1. 按照回调函数的语法进行封装, 只能通过传递一个函数作为参数来调用
2. 当你使用回调函数过多的时候, 会出现回调地狱的代码结构
解决:
1. 不按照回调函数的语法封装
2. ES6 推出了一种新的封装异步代码的方式, 叫做 Promise (承诺, 期约)
Promise:
1. 是一种异步代码的封装方案
2. 因为换了一种封装方案, 不需要按照回调函数的方式去调用, 需要按照 Peomise 的形式去调用

认识 Promise

Promise 的三个状态
- 持续: pending
- 成功: fulfilled
- 失败: rejected
promise 的两种转换
- 从持续转为成功
- 从持续转为失败

promise 的基础语法

ES6 内置构造函数

const p = new Promise(function () {
    // 书写我们异步想要做的事
});
// p 就是一个 pormise 实例对象

promise 对象可以触发两个方法
- p.then(函数)
- p.catch(函数)
- 这两个方法只是注册一个成功或者失败的时候会执行的函数

const p = new Promise(function (resolve, reject) {
    // resolve: 是一个形参, 名字自定义, 值是一个函数, 当你调用的时候, 会把当前 promise 的状态转换为 成功
    // reject: 是一个形参, 名字自定义, 值是一个函数, 当你调用的时候, 会把当前 promise 的状态转换为 失败
    // resolve 和 reject 调用时可以传递一个参数, 这个参数会被传递给对应的 then catch
    const timer = Math.ceil(Math.random() * 3000) + 2000;
    setTimeout(() => {
        if (timer > 3500) {
            console.log("买水失败, 耗时 ", timer);
            reject("奖励一个bug");
        } else {
            console.log("买水成功, 耗时: ", timer);
            resolve("送你十个bug");
        }
    }, timer);
});

p.then(function (address) {
    console.log("班长买水成功咯~~~", address);
});
p.catch(function (address) {
    console.log("班长买水失败咯~~~", address);
});

封装 promise 为函数

function fn() {
    const p = new Promise(function (resolve, reject) {
        const timer = Math.ceil(Math.random() * 3000) + 2000;
        setTimeout(() => {
            if (timer > 3500) {
                reject("班长买水失败");
            } else {
                resolve("班长买水成功");
            }
        }, timer);
    });
    return p;
}
// 将来在使用的时候 res 得到的是 promise 的实例对象 p

const res = fn();
res.then(function (type) {
    // 这个函数执行代码 promise 状态为成功状态!!!
    console.log("因为", type, "谢谢班长, 我准备了20个bug, 回馈给你");
});
res.catch(function (type) {
    // 这个函数执行代码
    console.log("因为", type, "谢谢班长, 我准备了800个bug, 开心死你");
});

promise 的链式调用

fn()
    .then(function (type) {
        // 这个函数执行代码 promise 状态为成功状态!!!
        console.log("因为", type, "谢谢班长, 我准备了20个bug, 回馈给你");
    })
    .catch(function (type) {
        // 这个函数执行代码
        console.log("因为", type, "谢谢班长, 我准备了800个bug, 开心死你");
    });

Promise 的调用方式
- 当你在第一个 then 里面返回(return) 一个新的 Promise 对象的时候
- 可以在第一个 then 后面继续第二个 then

fn()
    .then(function (type) {
        console.log(
            "第一次: 因为",
            type,
            "谢谢班长, 我准备了20个bug, 回馈给你"
        );
        return fn();
    })
    .then(function (type) {
        console.log(
            "第二次: 因为",
            type,
            "谢谢班长, 我准备了20个bug, 回馈给你"
        );
        return fn();
    })
    .then(function (type) {
        console.log(
            "第三次: 因为",
            type,
            "谢谢班长, 我准备了20个bug, 回馈给你"
        );
        return fn();
    })
    .catch(function (type) {
        console.log("因为", type, "谢谢班长, 我准备了800个bug, 开心死你");
    });

async 和 await

注意: 需要配合的必须是 Promise 对象
注意: Promise 的调用方案
意义: 把异步代码写的看起来 "像" 同步代码

async 关键字的用法:
- 直接书写在函数的前面即可, 表示该函数是一个异步函数
- 意义: 表示在该函数内部可以使用 await 关键字
await 关键字的用法:
- 必须书写在一个有 async 关键字的函数内
- await 后面等待的内容必须是一个 promise 对象
- 本该使用 then 接受的结果, 可以直接定义变量接受了
常规使用 Promise 语法封装的函数

fn()
    .then(function (res) {
        console.log(res);
    })
    .catch(function (res) {
        console.log(res);
    });

利用 async 和 await 关键字来使用

async function newFn() {
    /**
     * await 是等待的意思
     *
     *  在当前 fn 函数内, await 必须要等到后面的 Promise 结束以后, 才会继续执行后续代码
     */
    const r1 = await fn();
    console.log("第一次: ", r1);
    const r2 = await fn();
    console.log("第二次: ", r1);
    const r3 = await fn();
    console.log("第三次: ", r1);
}

newFn();

async 和 await 语法的缺点

await 只能捕获到 Promise 成功的状态, 如果失败, 会报错, 终止程序继续执行

async function newFu() {
    const r1 = await fn();
    console.log(r1);
    console.log("失败后, 提示用户网络错误");
}
newFu();

解决方法 1:
- 使用 try...catch...
- 语法: try{ 执行代码 } catch(err) { 执行代码 }
  - 首先执行 try 里面的代码, 如果不报错, catch 的代码不执行了
  - 如果报错, 不会爆出错误, 不会终止程序, 而是执行 catch 的代码

async function newFu() {
    try {
        const r1 = await fn();
        console.log(r1);
    } catch (error) {
        console.log("网络错误, 请检查网络并重新请求");
    }
}
newFu();

解决方法 2: 因为改变封装的思路
- 原因: 因为 promise 对象有成功状态和失败状态, 所以会在失败状态时报错
- 解决: 我就让当前的 promise 对象百分百成功, 让成功和时报都按照 resolve 的形式来执行
- 只不过传递出去的参数, 记录一个表示成功或者失败的信息

function fn() {
    const p = new Promise(function (resolve, reject) {
        const timer = Math.ceil(Math.random() * 3000) + 2000;
        setTimeout(() => {
            if (timer > 3500) {
                resolve({ code: 0, msg: "班长买水失败" });
            } else {
                resolve({ code: 1, msg: "班长买水成功" });
            }
        }, timer);
    });
    return p;
}

async function newFn() {
    const r1 = await fn();
    if (r1.code === 0) {
        console.log("第一次请求失败, 请检查您的网络信息");
    } else {
        console.log("第一次请求成功", r1.msg);
    }

    const r2 = await fn();
    if (r2.code == 0) {
        console.log("第二次请求失败, 请检查您的网络信息");
    } else {
        console.log("第二次请求成功", r2.msg);
    }
}
newFn();

01_认识继承

一个构造函数的实例使用另一个构造函数的属性和方法

function Person(name) {
    this.name = name
}
Person.prototype.sayHi = function () {
    console.log('hello world')
}

function Student() {}
Student.prototype.study = function () {
    console.log('好好学习')
}

/**
 *  如果 s1 内带有 name 属性
 *  并且 s1 还可使用 sayHi 这个方法
 *      那么我们就说 Studen 这个类继承自 Person
 *      Student 是 Person 的子类
 *      Person 是 Student 的父类
*/
const s1 = new Student()

02_原型继承

利用自定义原型的方式来实现继承关系
核心: 子类的原型指向父类的实例
优点: 可以继承父类的属性(构造函数体内) 和方法(构造函数原型)
缺点:
- 没有自己的原型
- 继承下来的属性不在自己身上, 在原型上

// 父类
function Person(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.sayHi = function () {
    console.log('hello world')
}

// 子类
function Student (gender, name) {
    this.gender = gender
    this.name = name
}

// 实现继承
Student.prototype = new Person('Jack', 18)

/**
 *  Student 的 prototype 指向了当前构造函数的原型对象
 *  原型链继承就是更改他的原型对象为另一个 构造函数的实例对象
 * 
 *  那么后续在查找的时候, 会先在 Student 的实例身上查找
 *  找到就是用, 没有的话会去 __proto__ 中查找
 *  也就是自己构造函数的原型, 但是现在原型已经被修改为了 Person 构造函数的实例化对象
 * 
 *      所以相当于可以在 Student 的实例上找到或使用 Person 的实例上的方法
*/

// 子类创建实例
const s = new Student('男', 'Jack')
console.log(s)
console.log(s.gender)
console.log(s.name)
console.log(s.age)
s.sayHi()

03_借用构造函数继承

借用构造函数继承 / 借用继承 / call 继承
核心:
- 把父类构造函数当作普通函数来调用, 利用 call 修改 this 指向
优点:
- 把属性都继承在自己身上
缺点:
- 只能继承父类的属性(构造函数体内)不能继承方法(原型上的内容)
- 可以有自己的原型

function Person(name, age) {
    this.name = name
    this.age = age
}

// Person 原型上的方法是给 Person 的实例对象使用
Person.prototype.sayHi = function () { console.log('hello world') }

function Student(gender, ...arg) {
    this.gender = gender

    // 实现继承
    Person.call(this, ...arg)
    /**
     *  Person 是一个构造函数
     *  本质上还是一个函数, 所以是可以不加 new 去调用的
     *  不加 new 内部无法自动创建对象, 所以调用时 内部 this 指向 window
     *  相当于是给 window 添加了 name 和 age 属性
     *  我们可以通过 修改 this 指向的方式, 去将构造函数体内的代码继承到函数体内部
    */
}

const s = new Student('男', 'Jack', 18)
console.log(s)
console.log(s.gender)
console.log(s.name)
console.log(s.age)
// s.sayHi()

const s2 = new Student('女', 'Rose', 20)
console.log(s2)

04_组合继承

把原型继承和借用构造函数继承放在一起使用
优点:
- 能继承属性和方法
- 继承的属性在自己身上
缺点:
- 原型上多了一套属性

function Person(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.sayHi = function () { console.log('hello world') }

function Student(gender, ...arg) {
    this.gender = gender

    // 组合借用继承 - 为了继承构造函数体内的属性
    Person.call(this, ...arg)
}

// 组合原型继承 - 为了继承原型上的方法
Student.prototype = new Person()

const s = new Student('男', 'Jack', 18)
console.log(s)

05_拷贝继承

拷贝继承
- 利用 for in 循环遍历对象
- 把所有的内容复制一份放到子类的原型上

for in 循环的时候, 不光可以便利到对象自己身上的属性, 也可以遍历原型上的属性

function Person(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.sayHi = function () { console.log('hello world') }

function Student(gender, ...arg) {
    this.gender = gender
    const p = new Person(...arg)
    for (let k in p) {
        Student.prototype[k] = p[k]
    }
}

06_ES6的继承

类继承的语法
- 语法:
  - 书写子类的时候
    - class 子类 extends 父类 {}
  - 书写子类的 contructor 的时候
    - super(参数)
- 注意:
  - extends 和 super 必须都出现才能正常继承
  - 在 constructor 内的时候, 必须先写 super 后写自己的
  - ES6 的类可以继承 ES5 的构造函数

function Person(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.sayHi = function () { console.log('hello world') }

// 创建一个类 - 创建一个继承自 Person 的类
// 语法: class 类名 extends 父类 {}
class Student extends Person {
    constructor(gender, ...arg) {
        // 语法: spuer()
        super(...arg)

        // 自己的属性
        this.gender = gender
    }

    // 自己的方法
    study() { console.log('好好学习') }
}

const s = new Student('男', 'Jack', 18)
console.log(s)

07_深浅拷贝

把一个数据结构内的所有内容复制一份放在另一个一摸一样的数据结构内
注意:
- 表示拷贝的是数据结构, 不是方法(一般不考虑函数, 通常我们都是考虑的数组和对象)

赋值

const o1 = { name: 'jack' }
const o2 = o1
console.log(o1, o2)
o2.name = 'Rose'
console.log(o1, o2)

浅拷贝

const o1 = { name: 'Jack', age: 18, info: { weight: 180, height: 180 } }
const o2 = {}
for (let k in o1) {
    o2[k] = o1[k]
}
console.log(o1, o2)
o2.name = 'Rose'
console.log(o1, o2)
// 修改第二层数据
o2.info.weight = 200
console.log(o1, o2)

Object 上有一个方法, 就是进行浅拷贝, 复制
- 语法: Object.assign(新对象, 原始对象)
- 返回值: 把原始对象内的成员浅拷贝的新对象内

const o1 = { name: 'Jack', age: 18, info: { weight: 180, height: 180 } }
const o2 = Object.assign({}, o1)
console.log(o1, o2)
o2.name = 'Rose'
console.log(o1, o2)
// 修改第二层数据
o2.info.weight = 200
console.log(o1, o2)

深拷贝
- 不管多少层数据结构, 都百分之百复制一份过来; 变成两个完全一模一样但是毫不相干的数据结构
- JSON.parse(JSON.stringify(数据)) , 也可以完成深拷贝

const o1 = {
    name: 'Jack',
    age: 18,
    info: {
        weight: 180,
        height: 180
    },
    address: {
        city: '北京',
        desc: {
            scripts: 'xxx路xxx接到'
        }
    },
    hobby: ['篮球', '足球', '羽毛球']
}
function deepCopy(target, origin) {
    /**
     *  target 叫做目标对象
     *  origin 叫做原始对象
     * 
     *      目标: 把 origin 内的内容深拷贝一份到 target 内
    */

    // 循环 遍历 origin
    for (let k in origin) {
        // 如果 origin[k] 是一个对象或者数组, 不能直接转存
        if (origin[k].constructor === Object) {
            // origin[k] 是一个对象, target[k] 应该是一个什么数据类型
            target[k] = {}
            // 把origin[k] 里面的数据深拷贝一份到 target[k]
            deepCopy(target[k], origin[k])
        } else if (origin[k] === Array) {
            target[k] = []
            deepCopy(target[k], target[k])
        } else {
            // 既不是对象也不是数组, 直接转存
            target[k] = origin[k]
        }
    }
}

面向对象

首先要明确, 面向对象不是语法, 是一个思想, 是一种 编程模式
面向: 面(脸), 向(朝着)
面向过程: 脸朝着过程 ---> 关注着过程的编程模式
面向对象: 脸朝着对象 ---> 关注着对象的编程模式
实现一个效果
- 在面向过程的时候, 我们要关注每一个元素, 每一个元素之间的关系, 顺序...
- 在面向过程的时候, 我们要关注的就是找到一个对象来帮我做这个事情, 我等待结果
例子: 我要吃面条
- 面向过程
  - 用多少面粉
  - 用多少水
  - 怎么和面
  - 怎么切面条
  - 做开水
  - 煮面
  - 吃面
- 面向对象
  - 找到一个面馆
  - 叫一碗面
  - 等着吃
- 面向对象就是对面向过程的封装
我们以前的编程思想是: 每一个功能, 都按照需求一步一步的逐步完成
我们以后的编程思想是: 每一个功能, 都先创造一个面馆, 这个面馆能帮我们做出一个 面 (完成这个功能的对象), 然后用面馆创造出一个面, 我们只要等到结果就好了

创建对象的方式

面向对象就是一个找到对象的过程, 所我们需要先创建一个对象

1. 字面量创建对象

var obj = {}
obj.name = 'QF'

2. 内置构造函数创建对象

var obj = new Object()
obj.name = 'QF'

3. 使用工厂函数的方式创建对象

先写一个工厂函数
- 这个工厂函数内可以创造出来一个对象, 并且给对象添加一些属性, 还能把对象返回
使用这个工厂函数创造对象

// 1. 创建一个工厂函数
function createObj() {
    // 1.1 手动创建对象
    var obj = new Object()

    // 1.2 手动向对象中添加成员
    obj.name = 'QF'
    obj.age = 18

    // 1.3 手动返回一个对象
    return obj
}

// 2. 使用工厂函数创建对象
var o1 = createObj()
var o2 = createObj()

4. 使用自定义构造函数创建对象

工厂函数需要经历三个步骤
- 手动创建对象
- 手动添加成员
- 手动返回对象
构造函数会比工厂函数简单一些
- 自动创建对象
- 手动添加成员
- 自动返回对象

先书写一个构造函数
在构造函数内向对象添加一些成员
使用这个构造函数创建一个对象 (和 new 连用)
构造函数可以创建对象, 并且创建一个带有属性和方法的对象
面向对象就是要想办法找到一个有属性和方法的对象
面向对象就是我们自己制造 构造函数 的过程

// 1. 先书写一个构造函数
function Person(name, gender) {
    // 1.2 在构造函数内向对象添加一些成员
    this.age = 18
    this.name = name
    this.gender = gender
}
// 2. 使用这个构造函数创建一个对象 (和 new 连用)
var p1 = new Person('jack', 'man')
var p2 = new Person('rose', 'woman')

构造函数详解

我们了解了对象的创建方式
我们的面向对象就是要么能直接得到一个对象
要么就弄出一个能创造对象的东西, 我们自己创造对象
我们的构造函数就能创造对象, 所以接下来就了了 构造函数

构造函数的基本使用

和普通函数一样, 只不过 调用的时候要和 new 连用 不然就是一个普通函数调用

不写 new 的时候就是普通函数调用, 没有创造对象的能力

function Person () {}
var o1 = new Person()   // 一个对象
var o2 = Person()   // 什么也得不到, 就是一个普通函数的调用

首字母不大些, 只要和 new 连用, 就有创造对象的能力

function person () {}
var o1 = new person()   // 一个对象

当调用的时候, 如果不需要传递参数可以不写 (), 但是建议写上

function person () {}
var o1 = new person   // 一个对象

构造函数内部的 this, 由于和 new 连用的关系, 是指向当前实例对象的

function Person () {
    console.log(this)
}
var o1 = new Person()   // this ---> o1
var o2 = new Person()   // this ---> o2

因为构造函数会自动返回一个对象, 所以构造函数内部不要写 return
- return 一个基本数据类型, 写了没有意义
- return 一个引用数据类型, 那么构造函数本身的意义就没有了

使用构造函数创建一个对象

我们在使用构造函数的时候, 可以通过一些带啊吗和内容来向当前的对象中添加一些内容

function Person() {
    this.name = 'Jack'
    this.age = 18
}
var o1 = new Person()
var o2 = new Person()

我们得到的两个对象里面都有自己的成员 name 和 age
我们在写构造函数的时候其实也可以添加一些方法进去

function Person() {
    this.name = 'Jack'
    this.age = 18
    this.sayHi = function () {
        console.log('hello word')
    }
}
var o1 = new Person()
var o2 = new Person()

这样也是可以的, 但是有一点小缺点
- 第一次 new 的时候, Person 这个函数要执行一遍, 执行一遍就会创造一个新的函数, 并且把函数地址赋值给 this.sayHi
- 第二次 new 的时候, Person 这个函数要执行一遍, 执行一遍就会创造一个新的函数, 并且把函数地址赋值给 this.sayHi

// 有缺点
function Person() {
    this.name = 'Jack'
    this.age = 18
    this.sayHi = function () {
        console.log('hello word')
    }
}
/**
 *  第一次 new 的时候, Person 这个函数要执行一遍
 *  执行一边就会创造一个新的函数, 并且把函数地址赋值给 this.sayHi
*/
var o1 = new Person()
/**
 *  第二次 new 的时候, Person 这个函数要执行一遍
 *  执行一遍就会创造一个新的函数, 并且把函数地址赋值给 this.sayHi
*/
var o2 = new Person()

这样写的话, 我们两个对象内的 sayHi 函数就是一个代码一模一样, 功能一模一样
但却占用了两个内存空间
也就是说 o1.sayHi 是一个地址, o2.sayHi 是一个地址
所以我们执行 console.log(o1.sayHi === o2.sayHi) 的到的结果是 false
缺点: 一模一样的函数出现了两次, 占用了两个空间地址
要想解决的话, 就需要一个东西, 叫做原型

原型

原型的出现, 就是为了解决 构造函数的缺点
也就是给我们提供了一个给对象添加函数的方法
不然构造函数只能给对象添加属性, 不能合理的添加函数就太 low 了

prototype

每一个函数天生自带一个成员, 叫做 prototype, 是一个对象空间
既然每一个函数都有, 构造函数也是函数, 构造函数也有这个对象空间
这个 prototype 对象空间可以由函数名来访问

function Person () {}

console.log(Person.prototype)   // 是一个对象

既然是一个对象, 那么我们就可以向里面放入一些东西

function Person() {}
Person.prototype.name = 'prototype'
Person.prototype.sayHi = function () {}

重点: 在函数的 prototype 里存储的内容, 不是给函数使用的, 是给函数的每一个实例化对象使用的

proto

每一个对象都天生自带一个成员, 叫做 __proto__, 是一个对象空间
既然每一个对象都有, 实例化对象也是对象, 那么每一个实例化对象也有这个成员
这个 __proto__ 对象空间是给每一个对象使用的
当你访问一个对象中的成员的时候
- 如果这个对象自己本身有这个成员, 那么就会直接给你结果
- 如果没有, 就回去 __proto__ 这个对象空间里面找, 里面有的话就会有结果
- 未完待续...
那么这个 __proto__ 又指向哪里呢?
- 这个对象是由那个构造函数 new 出来的
- 那么这个对象的 __proto__ 就指向这个构造函数的 prototype

function Person() {}
var p1 = new Person()
console.log(p1.__proto__ === Person.prototype)  // true

实例化对象的 __proto__ 和所属构造函数的 prototype 是一个对象空间
我们可以通过构造函数名称来向 prototype 中添加成员
对象在访问的时候自己没有, 可以自动去自己的 __proto__ 中查找
那么, 我们之前构造函数的缺点就可以解决了
- 我们可以把函数放在构造函数的 prototype 中
- 实例化对象访问的时候, 自己没有, 就会自动去 __proto__ 中找
- 那么也可以使用了

function Person() {}

Person.prototype.sayHi = function () {
    console.log('hello Person')
}

var p1 = new Person()
p1.sayHi()

p1 自己没有 sayHi 方法，就会去自己的 __proto__ 中查找
p1.__proto__ 就是 Person.prototype
我们又向 Person.prototype 中添加了 sayHi 方法
所以 p1.sayHi 就可以执行了
到这里，当我们实例化多个对象的时候，每个对象里面都没有方法
都是去所属的构造函数的 prototype 中查找
那么每一个对象使用的函数，其实都是同一个函数
那么就解决了我们构造函数的缺点

function Person() {}

Person.prototype.sayHi = function () {
    console.log('hello')
}

var p1 = new Person()
var p2 = new Person()

console.log(p1.sayHi === p2.sayHi)

p1 是 Person 的一个实例
p2 是 Person 的一个实例
也就是说 p1.__proto__ 和 p2.__proto__ 指向的都是 Person.prototype
当 p1 去调用 sayHi 方法的时候是去 Person.prototype 中找
当 p2 去调用 sayHi 方法的时候是去 Person.prototype 中找
那么两个实例化对象就是找到的一个方法，也是执行的一个方法
结论
- 当我们写构造函数的时候
- 属性我们直接写在构造函数体内
- 方法我们写在原型上

原型链

我们刚才聊了构造函数, 也聊了原型
构造函数的 prototype 是一个对象, 每一个对象又自带 __proto__ 属性
构造函数的 prototype 里面的 proto 属性又指向哪里?

一个对象所属的构造函数

每一个对象都有一个自己所属的构造函数
比如: 数组
```
// 数组本身也是一个对象
var arr = []
var arr1 = new Array()
```
- 以上两种方式都是创造一个数组
- 我们就说数组所属的构造函数就是 Array
比如: 函数
```
// 函数本身也是一个对象
var fn = function () {}
var fun = new Function()
```
- 以上两种方式都是创造一个函数
- 我们就说函数所属的构造函数就是 Function

constructor

对象的 __proto__ 里面也有一个成员叫做 constructor
这个属性就是指向当前这个对象所属的工造函数

链状结构

当一个对象我们不知道准确的是谁构造的时候, 我们就把他看成 Object 的实例化对象
也就是说, 我们的 构造函数的 prototype 的 proto 指向的是 Object.prototype
Object.prototype 也是个对象, 那么它的 __proto__ 又指向谁呢?
因为 Object 的 js 中的顶级构造函数, 我们有一句话叫 万物皆对象
所以 Object.prototype 就到顶了, Object.prototype 的 __proto__ 就是 null

原型链的访问原则

访问一个对象的成员时, 自己没有就会去 __proto__ 中找
接下来就是, 如果 __proto__ 里没有就再去 __proto__ 里面找
一直找到 Object.prototype 里面都没有, 那么就会返回 undefined

对象的赋值

到这里, 我们就会觉得, 如果是赋值的话, 那么也会按照原型链的规则来
但是: 并不是! 并不是! 并不是! 重要的事情说三遍
赋值的时候就是直接给对象本身赋值
- 如果原先有就是修改
- 如果原先没有就是添加
- 不会和 __proto__ 有关系

总结

到了这里, 我们就发现了面向对象的思想模式
- 当我想完成一个功能的时候
- 先看内置构造函数有没有能给我提供一个完整功能对象的能力
- 如果没有, 我们就自己写一个构造函数, 能创造出一个完成功能的对象
- 然后再用我们写的构造函数 new 一个对象出来, 帮助我们完成功能就行了
比如: tab选项卡

js基础

函数创建与定义的过程

不会销毁的函数执行空间

认识闭包

沙箱模式

沙箱模式小案例

沙箱模式的语法糖

闭包的面试题

函数柯里化

函数柯里化封装

函数的防抖与节流

数据劫持

模拟数据劫持 + 渲染

数据劫持升级

数据代理

回调函数 callback

回调地狱

认识 Promise

async 和 await

async 和 await 语法的缺点

01_认识继承

02_原型继承

03_借用构造函数继承

04_组合继承

05_拷贝继承

06_ES6的继承

07_深浅拷贝

面向对象

创建对象的方式

1. 字面量创建对象

2. 内置构造函数创建对象

3. 使用工厂函数的方式创建对象

4. 使用自定义构造函数创建对象

构造函数详解

构造函数的基本使用

使用构造函数创建一个对象

原型

prototype

__proto__

原型链

一个对象所属的构造函数

constructor

链状结构

原型链的访问原则

对象的赋值

总结

proto