菜狗学前端之JS高级笔记

一些前提概念

一 什么是js高级

•  js高级是对js基础语法的一个补充说明，本质上还是对ECMAScript语法的进阶与延伸

• 高级所要学习的语法相比而言没有js基础的多,但是会更加晦涩难懂,更加侧重的是理解

二 什么是面向对象编程

• 面向对象不是一门技术，而是一种解决问题的思维方式

• 面向对象的本质是对面向过程的一种封装

寻找变量的过程 叫作用域链 链式过程

（就近原则--从内向外地冒泡寻找）

JavaScript
        // 预解析前
        var a = 1;
        function fn() {
            console.log(a);//und
            var a = 10
        }
        fn()
        console.log(a);//1

JavaScript
        // 预解析后
        var a//全局变量
        function fn() {
            var a//局部变量
            console.log(a);//und
            a = 10
        }
        a = 1
        fn()
        console.log(a);//1

 var gn = function () {
            console.log('函数');
        }

函数表达式：提升的是var声明的变量，而不是后面的function(){}

        // 如果碰到xxx is not a function

        // 思考自己调用的位置是变量还是函数

JavaScript
        gn()
        var gn = function () {
            console.log('函数');
        }

JavaScript
        var gn;
        gn() //und()  gn is not a function
        gn = function () {
            console.log('函数');
        }

for (var i = 0; i < 10; i++) {}

for循环：虽然不是函数 但里面var声明的变量依旧会提升

JavaScript
        console.log(i);//undefined
        for (var i = 0; i < 10; i++) {
            console.log(i);
        }

JavaScript
        var i;
        console.log(i);//undefined
        for (i = 0; i < 10; i++) {
            console.log(i);
        }

当我们使用var声明的变量名和function声明的函数名 产生冲突的时候

函数的优先级高于var声明的变量 函数属于一等公民

总结：

声明冲突时无论先后函数优先(调用的皆是函数)，直至变量赋值后同名函数才被同名变量覆盖(函数无法再被调用)

JavaScript
        console.log(value);
        var value = 111;
        function value() {
            console.log('我是一个函数');
        }
        console.log(value);

JavaScript
        var value;
        function value() {
            console.log('我是一个函数');
        }
        console.log(value); //函数体  //函数与变量同名，函数不会被仅声明的变量覆盖
        value = 111;//变量赋值
        console.log(value);//111  //函数被变量覆盖
        value()//报错 value已经不是函数

JavaScript
        console.log(a);//报错  Uncaught ReferenceError: a is not defined
        a = 100;
        console.log(a); //上面代码报错,代码停止执行

JavaScript
    console.log(a);//Uncaught ReferenceError: Cannot access 'a' before initialization 初始化
    let a=1;
     console.log(a); //上面代码报错,代码停止执行

• 当代码运行时，会产生一个对应的执行环境

• 在这个环境中，所有变量会被事先提出来（变量提升），有的直接赋值，有的为默认值 undefined(预解析)

• 代码从上往下开始执行，就叫做执行上下文。

代码被浏览器解析后，形成执行上下文ECS

入栈

1)当全局代码执行 产生ECG(鹅蛋)

2)当函数执行的时候 产生ECfn(鸡蛋)

3)ECG 或者 ECfn 放在ECS中,ECS是执行上下文栈

出栈

4)当函数调用完毕之后，就出栈（内存释放）

5)当全局代码没有被引用,就出栈

JavaScript
        //情况1:
        console.log(a);//Cannot access 'a' before initialization
        let a = 1;

        //情况2:
        if (true) {
            let a = 1;
            console.log(a);//1  和{}形成块级作用域
        }
        console.log(a);//a is not defined

        //情况3:
        let a2 = 1;
        console.log(window);
        console.log(window.a2);

        //情况4:
        var a;
        var a;

        let a;
        let a;

JavaScript
        //情况1:
        const a = 100;
        console.log(a);//100
        a = 110;
        console.log(a);//对常量变量赋值 Assignment to constant variable.

        //情况2:
        console.log(b);//Cannot access 'b' before initialization
        const b = 120;

        //情况3:
        var c;
        let c;//
        const c;//

        // 情况4:
        const a1 = 100
        console.log(window);

JavaScript
//some：
        let arr = [10, 20, 30, 40, 52];
        let flag = arr.some(item => item < 51);
        console.log(flag); //输出结果true
 
//every：
        let arr = [11, 21, 31, 42, 51];
        let flag = arr.every(item => item < 51);
        console.log(flag); //输出结果false

JavaScript
        var arr = [1, 5, 2, 3]

        // 1.arr.forEach()
        // 作用:遍历数组  不能改变原数组
        // 注意:不能对空数组进行检测

        // 2.map
        // 作用:映射/加工   返回值是一个根据映射条件加工后的新数组,不能改变原数组
        // 语法:
        // arr.map(function (item, index, arr) {

        // })

        let res = arr.map(function (item, index, arr) {
            // item:当前元素的值
            // index:索引值
            // arr:当前数组(可选参数)
            return item + "hello"
        })
        console.log(arr);
        console.log(res);

        // 3.filter
        // 作用:过滤  把符合条件的元素放在新数组中,返回的新数组
        // return 后面是条件 条件为true的时候会返回到新数组当中
        let res2 = arr.filter(function (item, index) {
            // return item > 2
            // return 10  // 10-true
            return 0  // 0-false
        })
        console.log(res2);//[5,3]
        console.log(arr);

        // 4.find
        // 作用:查找 把符合条件的元素放在新数组中,返回的新数组
        // 如果数组中有对应的元素则返回元素,如果没有则返回undefined
        let res3 = arr.find(function (item, index) {
            // return item == 2
            return item == 0 //undefined
        })
        console.log(arr);
        console.log(res3);

        // 5.findIndex
        // 作用：查找数组中是否有某一个元素的索引
        // 如果数组中有对应的元素则返回元素的索引值,如果没有则返回-1
        let res4 = arr.findIndex(function (item, index) {
            // return item == 2
            // return item == 1 //0
            return 0 //-1

        })
        console.log(res4);

JavaScript
        // 对于高阶函数来说 ,实际上传递的是函数的堆地址
        function fn(func) {
            func()
        }
        function gn() {
            console.log('gn..');
        }
        fn(gn)

JavaScript
        // 需要封装一个函数
        // 三个参数 这个函数的作用是计算  加 减 乘
        function calc(num1, num2, func) {
            return func(num1, num2)

        }
        // 相加
        function add(a, b) {
            return a + b
        }
        // 相减
        function sub(a, b) {
            return a - b
        }
        // 相乘
        function mul(a, b) {
            return a * b
        }
        console.log(calc(3, 4, add));
        console.log(calc(30, 40, sub));

立即调用函数表达式（immediately invoked function expression）;

主要作用: 立即执行函数 

JavaScript
     (function fn1(形参) {
         console.log('fn1');
     })(实参)

JavaScript
    (function fn1(形参) {
        console.log(';fn1');
    }(实参))

JavaScript
        ;(function fn1() {
            console.log(';fn1');
        }())
        +function fn1() {
            console.log('+fn1');
        }()
        -(function fn1() {
            console.log('-fn1');
        })()
        *(function fn1() {
            console.log('*fn1');
        })()
        /(function fn1() {
            console.log('/fn1');
        })()
        ~(function fn1() {
            console.log('~fn1');
        })()
        ^(function fn1() {
            console.log('^fn1');
        })()
        !(function fn1() {
            console.log('!fn1');
        })()

函数执行后返回结果是一个内部函数,并被外部变量所引用，

如果内部函数持有被执行函数作用域的变量，即形成了闭包。

个人理解 需注意的tip：

可产生多个闭包，每个闭包各自独立

同一闭包下的变量固定，连续调用闭包函数其中的变量值会累积变化而非重置

JavaScript
        function fn1(a) {
            function gn() {
                console.log(++a);
            }
            return gn
        }

        //注意变量会累积变化，因为同一闭包中的变量被函数连续调用
        //除非重新函数赋值再调用才会重新开始，新闭包，新闭包中的变量
        let fn2 = fn1(1)//将a赋值为gnfunction gn() {console.log(++a);}  a=1
        fn2()//2 第一次调用gn()
        fn2()//3 第二次调用gn()
        
        let fn3 = fn1(1）//将a赋值为gnfunction gn() {console.log(++a);}  a=1
        fn3()//2 第一次调用gn()
        fn3()//3 第二次调用gn()

JavaScript
        var i = 0;
        function A() {
            var i = 10;
            function X() {
                console.log(i);
            }
            return X
        }
        var y = A();//此时 这个y实际上是函数x, 因为x函数内部的i使用的是定义出来的i, 所以形成闭包
        y()//10

        function B() {
            var i = 20;
            y()//不管在哪里调用y函数,那么这个i一定是闭包中的i(闭包中的i仅服务于y函数)
        }
        B()//10

• this在不同的位置 指的是不用的东西

• this指向的东西  和位置以及调用方式有关系

• 常见的this指向的是对象 或者是window 或者是其他事件源

1. 默认绑定；

1. 隐式绑定；

1. 显式绑定；

1. new绑定；

JavaScript
        //1.直接this
        console.log(this);//window

        //2.当一个函数独立调用时,此时里面的this是默认绑定,指向是window
        function fn() {
            console.log(this);
        }
        fn()

JavaScript
        // 写法一:
        var obj = {
            name: "wang",
            fn: function () {
                // console.log('fn...');
                console.log(this); //obj
            }
        }
        obj.fn()//obj

JavaScript
        // 写法二:
        var obj = {
            name: "wang",
            // fn: fn
            // key和value的名字一样是,可以省略写一个
            fn
        }
        function fn() {
            console.log(this);
        }
        obj.fn()//obj

显式绑定 主要是三个函数call() apply() bind()        对象身上的内置方法

• 一次性

1.call() 改变this指向且调用函数

2.apply() 与call()类似 但传参写法不同加[]

• 可永久

3.bind() 仅改变this指向但不调用 调用的话需要再()

PS：只有apply传参需要加[],call和bind方法不需要

JavaScript
        function fn(a, b) {
            this.a = a
            this.b = b
            console.log(this);
        }

//1.call() 作用:1.改变this指向   2.让函数执行
        let call = {
            name: 'call',
            a: 0,
            b: 0
        }
        fn.call(call, 1, 2)]//执行了fn函数,将函数中this指向了obj
        fn()//window  不是永久改变,只改变一次
        
//2.apply() 作用:1.改变this指向   2.让函数执行
        let apply = {
            name: 'apply',
            a: 0,
            b: 0
        }
        fn.apply(apply, [1, 2])//和call使用方式一样 传参方式不同
        fn()//window  不是永久改变,只改变一次
        
//3.bind() 作用:1.改变this指向
        let bind = {
            name: 'bind',
            a: 0,
            b: 0
        }
        let bind2 = fn.bind(bind, 1, 2)//会返回一个新的绑定好的this指向的函数
        bind2()//永久指向 bind2里面的this永久指向bind

为什么要使用new呢？

因为new可以改变this指向，并且执行构造器

JavaScript
        // 1.构造器
        function Car(carName, carColor) {
            this.carName = carName
            this.carColor = carColor
            console.log(this);
        }

        Car('车', '绿色')//window--'车',"绿色"
        
        // 2.通过new构造器,得到一个实例化对象
        //也算是谁=new 构造器，this指向谁(类似于隐式绑定的谁调用this指向谁)
        let car = new Car('车', "蓝色")//car这个对象--'车',"蓝色"
        console.log(car);//car这个对象--'车',"蓝色"

JavaScript
        // 1.事件监听器中的this指向事件源
        var divEle = document.querySelector('div')
        divEle.onclick = function () {
            console.log(this);//<div>this指向</div> 也就是<div>this指向</div>
        }

JavaScript
        // 2.定时器里的this指向window(无论定时器放在哪都是这样)
        var obj = {
            fn: function () {
                console.log(this, '这是定时器外面的this');//obj 隐式绑定 Object
                setTimeout(function () {
                    console.log(this, '这是定时器里面的this');//Window
                }, 1000)
            }
        }
        obj.fn()

JavaScript
        // 3.forEach
        // 默认Window
        // 添加第二个参数时，改变第一个参数的this
        var arr = [1, 2, 3]
        // 默认
        arr.forEach(function () {
            console.log(this);//window
        })
        // 添加第二个参数时，改变第一个参数的this
        arr.forEach(function (item) {
            if (item == 2) {
                this.age = 2
            }
            console.log(this);//Window --> { name: "张三",age:2}
        }, { name: '张三' })

JavaScript
        // 箭头函数中没有this,需要逐级向上找this
        console.log(this);//window

        var obj = {
            fn: function () {
                console.log(this);//obj
            },
            gn: () => {
                console.log(this);//window
            }
        }

        obj.fn()//obj
        obj.gn()//window

JavaScript
        // 没有办法改变，因为箭头函数中没有this
        let fn = () => {
            console.log(this);//window
        }
        fn.call('malu')//window

        创建对象方式总结：

        1.使用字面量的方式直接创建对象

        2.使用new关键字：使用new关键字通过构造函数创建对象

        3.使用工厂模式：可根据参数返回不同的对象

        4.使用原型模式：使用一个原型模式创建新的对象

        5.使用Object.create方法

        6.使用class关键字：ES6提供的class关键字

        ps:遍历对象只能用 for(var key in arr){}  不能用for of哦

JavaScript
        let obj = {
            name: '名字',
            fn: function () {
                console.log('字面量创建对象');
            }
        }
        console.log(obj);

JavaScript
        //内置对象构造器
        var obj1 = new Object({ name: '名字', age: 18 })
        console.log(obj1);//Object age: 18 name: "名字"

JavaScript
        // 自定义Student 构造器/类 注意:首字母需要大写
        function Student(sname, sage) {
            this.sname = sname
            this.sage = sage
        }
        // new 构造器 构建出来一个实例化对象
        let obj2 = new Student('学生', 18)
        console.log(obj2);//Student sage: 18 sname: "学生"

JavaScript
        function Student(name, age) {
            var obj = {}
            obj.name = name
            obj.age = age
            obj.dohomework = function () {
                console.log('写作业..');
            }
            return obj
        }

        let stu1 = new Student('花花', 12)
        let stu2 = new Student('花', 18)
        console.log(stu1);
        console.log(stu2);
        stu1.dohomework()

JavaScript
       function Student(name) {
            this.name = name
        }
        //打印构造器对象Student
        console.dir(Student);//f Student(name)

        // 通过prototype
        // 打印构造器对象Student的显式原型对象
        console.dir(Student.prototype)//Object
        console.dir(Student.prototype.constructor)//ƒ Student(name)
        console.dir(Student.prototype.prototype)//undefined
        
        // 比较两种方式获得的原型对象
        console.log(Student.prototype === stu1.__proto__);//true

JavaScript
        let stu1 = new Student('张三')
        //打印实例化对象stu1
        console.dir(stu1)//Student
        
        // 原型链:寻找属性的机制,就是沿着__proto__形成的链式结构寻找(自己身上没有此属性 -> 原型对象 -> null)
        //1.打印实例化对象的隐式原型对象
        console.dir(stu1.__proto__.constructor)//ƒ Student(name)
        //2.Object的原型对象
        console.dir(stu1.__proto__.__proto__)//Object(原始真正的Object)
        //3.null
        console.dir(stu1.__proto__.__proto__.__proto__)//null

JavaScript
        // 共有属性age
        Student.prototype.age = 18
        // 私有属性name
        let stu2 = new Student('李四')
        console.log(stu2.name);//李四
        console.log(stu2.age);//18

继承，可以让多个构造函数产生关联，便于管理和复用

所谓的继承 就是子类继承父类的属性和方法

举例：教师类 教导主任 老师

父类的范围大一些 子类的范围小一些 子类的属性多一点

JavaScript
        //学生类
        function Student(name, age) {
            this.name = name
            this.age = age
        }

        // 班长类
        function Mointer(name, age, m_id) {
            //重复写，冗余
            this.name = name
            this.age = age
            this.m_id = m_id
        }

            // 核心代码--改变this指向并执行函数

            Father.call(this, name, age)

JavaScript
        function Father(name, age) {
            //私有属性
            this.name = name
            this.age = age
        }

        function Son(name, age, father) {
            // 核心代码--改变this指向并执行函数
            Father.call(this, name, age)
            // 当我们 new Son的时候
            // 此时当前位置的this指向的是新的实例化对象
            this.father = father
        }

        let son = new Son('小花', 18, '爹')
        console.log(son);//Son age: 18 father: "爹" name: "小花"

        // 核心代码--原型继承

        Son.prototype = new Father()

        Son.prototype.constructor = Son//可写可不写 没大影响

JavaScript
       function Father(name, age) {
            this.name = name
            this.age = age
        }

        Father.prototype.say = function () {
            console.log('say...');
        }

        function Son(name, age, father) {
            // this.name = name
            // this.age = age
            this.father = father
        }

        // 核心代码--原型继承
        Son.prototype = new Father()
        Son.prototype.constructor = Son

        let son=new Son('小花',18,'爹')
        console.log(son);//Son father: "爹"
        son.say()//say... 沿原型链查找

 Object 是一个内置构造器 有一个方法create  Object.create

作用:创建一个对象，并且可以指定对象的原型对象

//let res = Object.create(obj)

//核心代码 Son.prototype = Object.create(Father.prototype)

JavaScript
        let obj = {
            name: '张三',
            say:function(){
                console.log('say...');
            }
        }

        // 想把谁当成原型对象，在参数里面就写谁
        let res = Object.create(obj)
        console.log(res);//Object prototype name: '张三' say:function()
        res.say()//say... 沿原型链查找

        // 可以定义一个没有原型对象的对象
        let res2 = Object.create(null)
        console.log(res2);//Object no properties

JavaScript
        function Father(name, age) {
            this.name = name
            this.age = age
        }
        //公有方法
        Father.prototype.say = function () {
            console.log('say...');
        }

        function Son(name, age, father) {
            this.father = father
        }
        //通过Object.create继承公有属性
        Son.prototype = Object.create(Father.prototype)
        let son = new Son('小花', 18, '爹')
        console.log(son);//Object father: "爹" prototype Prototype say:function()
        son.say()//say... 沿原型链查找

        function Son(name, age, father) {
            // call继承私有属性
            Father.call(this, name, age)
            this.father = father
        }
        // 原型继承公有方法
        Son.prototype = new Father()

JavaScript
        function Father(name, age) {
            // 私有属性
            this.name = name
            this.age = age
        }

        //在父类的原型身上添加了一个公有方法
        Father.prototype.say = function () {
            console.log('say...');
        }

        function Son(name, age, father) {
            // call继承私有属性
            Father.call(this, name, age)
            this.father = father
        }
        // 原型继承公有方法
        Son.prototype = new Father()
        // Son.prototype.constructor = Son

        let son = new Son('小花', 18, '爹')
        console.log(son);//私有属性
        son.say()//公有方法

        function Son(name, age, father) {
            // call继承私有属性
            Father.call(this, name, age)
            this.father = father
        }

        //通过Object.create继承公有属性
        Son.prototype = Object.create(Father.prototype)

JavaScript
        function Father(name, age) {
            //私有属性
            this.name = name
            this.age = age
        }
        //公有方法
        Father.prototype.say = function () {
            console.log('say...');
        }

        function Son(name, age, father) {
            // call继承私有属性
            Father.call(this, name, age)
            this.father = father
        }
        //通过Object.create继承公有属性
        Son.prototype = Object.create(Father.prototype)
        // Son.prototype.constructor = Son
        let son = new Son('小花', 18, '爹')
        console.log(son);//私有属性
        son.say()//公有方法

class Xxx{

constructor(xx,xx,...){

// 这里的属性是会挂载在实例化对象上

// 私有属性/方法

this.xx=xx

this.xx=function(){}

...

}

// 在constructor外面写，会挂载在原型对象上

           // 公有属性/方法

xxx=xxx//这里属性仍绑定到实例化对象身上，私有属性

xxx(){}

}

JavaScript
        class Student {
            // 在class声明的这个类中，有一个函数叫constructor
            constructor(name, age) {
                // 这里的属性是会挂载在实例化对象上
                // 私有属性/方法
                this.name = name
                this.age = age
                this.work = function () {
                    console.log('work...');
                }
            }
            // 在constructor外面写，just方法会挂载在原型对象上
            // 私有属性
            a = 1
            // 公有方法
            say() {
                console.log('say...');
            }
        }
        let stu1 = new Student('张三', 18)
        console.log(stu1);
        stu1.work()//work...
        stu1.say()//say...

JavaScript
        class Student {
            constructor(name, age) {
                // 私有属性/方法
                this.name = name
                this.age = age
                this.work = function () {
                    console.log('work...');
                }
            }
            // 私有属性
            a = 1
            // 公有方法
            say() {
                console.log('say...')
            }
        }

JavaScript
        class Montor extends Student {
            // 1.不写constructor时也继承父类
            // 子类私有属性
            b = 2
            // 子类公有方法
            talk() {
                console.log('talk...')
        }

        let mon = new Monitor('班长', 20, 1)
        console.log(mon);
        mon.work()//work...
        mon.say()//say...
        mon.talk()//talk...

JavaScript
        class Monitor extends Student {
            // 2.新增自己属性/方法时写constructor用super()
             constructor(name, age, id) {
                //继承父类
                super(name, age)
                //新增子类私有属性
                this.id = id
            }
            // 子类私有属性
            b = 2
            // 子类公有方法
            talk() {
                console.log('talk...')
            }
        }

        let mon = new Monitor('班长', 20, 1)
        console.log(mon);
        mon.work()//work...
        mon.say()//say...
        mon.talk()//talk...

JSON   作为前端和后端的数据交互的一种格式

JSON数据格式：

        格式1： "hello"  需要使用双引号包裹起来

        格式2： 写成对象的时候 属性名必须添加双引号 如果嵌套对象的时候 嵌套对象也需要使用双引号包裹

        格式3： 写成数组的时候 ，当元素是纯数字 可以不添加引号 其余都要添加

JSON
"hello"

JSON
{
    "name": "小花",
    "hobby": [
        "踢足球",
        "打篮球"
    ],
    "age": 18
}

JSON
[
    "小花",
    18,
    {
        "name": "小花花"
    },
    [
        1,
        2
    ]
]

 JSON的序列化 JSON.stringify()--对象变字符串

 JSON的反序列化 JSON.parse()--字符串变对象

JavaScript
        let obj = {
            name: "小花",
            age: 18,
            score: [1, 2, 3]
        }
        // JSON的序列化 JSON.stringify()
        console.log(JSON.stringify(obj));//{"name":"小花","age":18,"score":[1,2,3]}
        // JSON的反序列化 JSON.parse()
        console.log(JSON.parse(JSON.stringify(obj)));//Object age: 18...

总结5种错误情况：

        1.xx is not defined  未声明直接使用

        2.let 不能再初始化之前使用 Cannot access 'a' before initialization

        3.xx is not a function   当你调用函数的时候()前面不是一个函数

        4.const声明的变量不能被改变 Assignment to constant variable

        5.超出最大执行栈  Maximum call stack size exceeded

JavaScript
        // 1.未声明直接使用
        // Uncaught ReferenceError: a is not defined
        console.log(a);

        // 2.let在初始化之前使用
        // Uncaught ReferenceError: Cannot access 'b' before initialization
        console.log(b);
        let b

        // 3.const不能二次赋值
        // Uncaught TypeError: Assignment to constant variable.
        const c = 10
        c = 11

        // 4.调用函数的时候()前面不是一个函数
        // Uncaught TypeError: fn is not a function
        let fn=1
        fn()

        // 5.超出最大执行栈(如陷入死循环)
        // Uncaught RangeError: Maximum call stack size exceeded
        function f1() {
            f2()
        }
        function f2() {
            f1()
        }
        f1()

处理错误：(为了使错误不阻塞后面的代码执行)

try catch 捕获错误 try和catch须连用

        1.默认错误try{}catch(err){console.log(err)}

        2.自定义错误类型try{throw xxx}catch(err){console.log(err)}

JavaScript
        // 抛出默认错误
        try {
            console.log(a);//会产生错误的代码
        } catch (err) {
            console.log(err);//ReferenceError: a is not defined 以字符串的方式抛出
        }
         console.log("try-catch处理异常后报错不影响后面代码执行");//try-catch处理错误后报错不影响后面代码执行

JavaScript
        try {
            let age = "hhh"
            if (typeof age != "number") {
                // throw 抛出自定义错误
                throw "请输入数字"
            }
        } catch (err) {
            console.log(err);//请输入数字
        }
         console.log("try-catch处理异常后报错不影响后面代码执行");//try-catch处理错误后报错不影响后面代码执行

JavaScript
class Cache {
    constructor(sort) {
        this.storage = (sort === localStorage) ? localStorage : sessionStorage
    }
    // 增|改
    setItem(key, value) {
        if (value) {
            this.storage.setItem(key, JSON.stringify(value));
        }
    }
    // 查
    getItem(key) {
        let value = this.storage.getItem(key);
        if (value) {
            return JSON.parse(value);
        } else {
            return "仓库中没有";
        }
    }
    // 删
    removeItem(key) {
        if (key) {
            this.storage.removeItem(key);
        }
    }
    // 清空所有
    clear() {
        this.storage.clear()
    }
}

let localCache = new Cache(localStorage)
let sessionCache = new Cache(sessionStorage)

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./cache.js"></script>
</head>

<body>
    <script>
        localCache.setItem("stu", { name: "小花", age: 18 })
        localCache.setItem("stu2", { name: "小花", age: 18 })
        console.log(localCache.getItem("stu"));
        localCache.removeItem("stu2")
        // localCache.clear()

        sessionCache.setItem("stu", { name: "小花", age: 18 })
        sessionCache.setItem("stu2", { name: "小花", age: 18 })
        console.log(sessionCache.getItem("stu"));
        sessionCache.removeItem("stu2")
        // sessionCache.clear()
    </script>
</body>

</html>

with语句 作用：扩展一个语句的作用域链

• 优点：可以让代码更加简洁(不需要打点查找)   

• 缺点：破坏了作用域

PS:当传入复杂对象时，相较连续多次打点，with可以使效率提高  

JavaScript
        //不使用with
        var obj1 = {
            name1: "张三",
            obj2: {
                name2: "李四"
            }
        }
        console.log(obj1.obj2.name2);
        console.log(obj1.obj2.name2);
        console.log(obj1.obj2.name2);

        //使用with
        with (obj1.obj2) {
            var newName = name2
        }
        console.log(newName);
        console.log(newName);
        console.log(newName);

eval-比较特殊的函数 可以把字符串当成js代码去执行

作用：是一种接受字符串作为参数，并且可以将接受的字符参数转变成js的表达式且立即执行函数

注意：eval的参数是一个字符串

JavaScript
        var str='var msg="哈哈哈";console.log(msg)'
        console.log(str);//var msg="哈哈哈";console.log(msg)
        eval(str)//哈哈哈

严格模式：消除js中某些不合理或者不严谨的地方

作用：提高js的程序运行效率 为以后的js版本做铺垫

在一个js文件中开启"use strict" 这个文件中写的代码都受严格模式的约束

JavaScript
        'use strict'
        // 1.不能使用不加var或者let的变量
        // b=1;
        var b = 1
        let c = 2
        console.log(b);
        console.log(c);

        // 2.形参的参数不能重名
        // function fn(a, a, a) {
        //     console.log(a, a, a);
        // }
        // fn(1, 2, 3)//Duplicate parameter name not allowed in this context

        // 3.在严格模式下，函数的独立调用不再默认绑定(即this不再指向window)
        console.log(this);//window

        setTimeout(() => {
            console.log(this);//window
        }, 100)

        function gn() {
            console.log(this);//und
        }
        gn()

HTML
    <script>
        //没有经过柯里化函数处理
        function add(a, b, c) {
            return a + b + c
        }
        console.log(add(1, 2, 3));//7
    </script>

    <script>
        // 只传递给函数一部分参数来调用它, 让它返回一个函数去处理剩余的参数, 这个过程，就是柯里化。
        // 柯里化函数：说白了就是分开参数连续调用新函数
        function fn1(a) {
            return function (b) {
                // b++
                return function (c) {
                    // c+=b
                    return a + b + c
                }
            }
        }
        console.log(fn1(1)(2)(3));//6
        // console.log(fn(1)(2)(3)); //10
    </script>

    <script>
        // 简化版柯里化函数
        let fn2 = a => b => c => a + b + c
        console.log(fn1(1)(2)(3));//6
    </script>

JavaScript
        function fn1(a) {
            console.log(a);
        }
        function fn2(b) {
            return ++b
        }
        //先执行fn2(1)得到返回值2，然后执行fn1(2)
        fn1(fn2(1))//2