菜狗学前端之JS高级笔记

老样子。复制上来的图片都没了，想看原版可以移步对应资源下载(资源刚上传，还在审核中)

(免费) JS高级笔记https://download.csdn.net/download/m0_58355897/89102910

一些前提概念

一什么是js高级

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

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

二什么是面向对象编程

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

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

一代码段和作用域

（一）代码段

1.什么是代码段

一个script就是一个代码段

一个js文件也是一个代码段

PS：代码块：{}之间的就是代码块

2.代码段特点

上面代码段定义的变量下面的代码段可以使用

下面代码段定义的变量上面的代码段不可以使用(因为代码从上向下执行)

代码段之间互不影响一个代码段中的错误不会影响到另一个代码段

一个html页面中,可以存在多个代码段

（二）作用域

1.作用域

a.分类

全局变量(直接变量名、function函数体外的包括if/for中的var变量名)的作用范围是全局

局部变量(function函数体中用var声明的变量、function函数的形参)的作用范围是局部

b.主要作用

隔离变量，不同作用域下同名变量不会有冲突。

2.作用域链

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

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

以下图的代码为例，看下作用域链上查找一个变量的查找规则：

首先，在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2

然后，在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3

再次执行2的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常

二预解析

（一）预解析概念

浏览器不会直接执行代码，而是加工处理后再执行，这个加工处理的过程我们称之为预解析

（二）预解析期间操作

1.提升操作

加var的变量仅声明提升

(函数内部的局部变量，提升到函数体的最前面)

(函数外部的全局变量，提升到代码段最前面)

function函数声明+赋值提升

(函数内部的子函数，提升到函数体的最前面)

(非函数内部的子函数，提升到代码段的最前面)

2.代码举例

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

（三）提升的特殊情况

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('函数');
        }

2.for循环条件中var i变量的提升

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);
        }

3.var声明的变量名和function声明的函数名冲突时的提升

当我们使用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已经不是函数

4.没有var声明直接不提升

报错：a is not defined

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

5.let变量声明提升但未初始化

报错：Cannot access 'a' before initialization 初始化

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

三执行上下文

（一）内存的分区

1.数据类型

对内存来说，能够合理利用存储空间

基本数据类型 Number String Boolean Null Undefined

引用数据类型 Object Array Function

2.内存分区：堆区栈区

基本数据类型存放在栈区（先进后出）

引用数据类型存放在堆区堆空间与一个对应的地址对应的地址仍存在栈区

GO 全局对象

VO 变量对象用来存放当前执行上下文中创建的数据

（二）执行上下文

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

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

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

1.执行上下文概念

执行上下文就是js代码执行环境的抽象概念理解

只要代码运行，就一定在执行上下文中

2.执行上下文过程

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

入栈

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

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

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

出栈

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

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

3.画图分析举例

四声明变量 var|let|const

（一）加var与不加var的区别

不管加不加var,创建的是全局变量,都会放在GO中,也就是说可以通过window.xx

加var的变量可能是全局变量, 也可能是局部变量, 通过是否写在函数内区分

局部变量不会挂载在window上

加var的变量在预解析的时候会提升, 不加var不会提升

加var的变量不能用delete()方法删除，不加var能

（二）let声明变量(ES6)

1.产生原因

之前使用var声明, 提升会打乱我们代码的执行顺序

2.特点

let声明的变量不会提升(提升了但是没有初始化)

let会和{} 形成块级作用域

使用let声明的变量不会挂载在window上

使用let声明的变量不能重复声明

3.代码举例

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;

（三）const声明常量(ES6)

1.特点

const声明的变量不会提升

和{}会形成块级作用域

不会挂载window上

声明的变量不能修改(常量)

const声明的变量必须赋值,只声明不赋值直接报错

2.代码举例

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);

五高阶函数

（一）高阶函数定义

一个函数它的参数是函数或者它的返回值是函数,那么这个函数叫高阶函数

（二）常见的内置高阶函数

数组的一些方法是参数为函数的高阶函数：

some() 一真全真

every() 一假全假

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

forEach()

map()

filter()

find()

findIndex()

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));

六 IIFE 立即执行函数表达式

立即调用函数表达式（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');
        })()

七闭包

（一）概念和理解

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

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

一个本该被销毁的变量空间

由于其内部对其引用, 导致无法被销毁, 形成闭包

（二）特点及缺点

1.特点

延长了变量的生命周期

扩大了变量的作用范围

保护变量

个人理解需注意的tip：

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

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

2.缺点

导致内存泄漏

(如果写了大量的闭包,产生了多个独立空间但是没有及时销毁,导致内存泄漏)

（三）代码举例

1.注意变量会累积变化，因为同一闭包中的变量被函数连续调用

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()

2.不管在哪里调用闭包函数,那么其中所需变量一定是闭包中的变量

(闭包中的i仅服务于y函数)

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绑定分类

1.概念

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

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

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

2.分类

默认绑定；

隐式绑定；

显式绑定；

new绑定；

（二）默认绑定

默认绑定的this值：window对象

直接this

函数独立调用时里面的this

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

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

（三）隐式绑定

隐式绑定的this值：调用方法的对象

隐式绑定实际上就是对象打点调用身上的方法

谁打点调用 this就指向谁

两种写法

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()

显式绑定主要是三个函数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绑定

1.概念

通过new一个构造器(类),生成一个实例化对象

new一个类,就得到一个对象

对于构造器来说里面的this默认绑定的是window

当我们使用new的时候里面的this指向发生了改变指向是生成的实例化对象

2.new(运算符/操作符做了什么事情)

为什么要使用new呢？

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

创建出了一个实例化对象（开辟了一个新的堆空间）

让构造器中this指向新的实例化对象(指向了新的堆空间)

执行了构造函数

返回的是一个堆空间的地址，把地址给了car

3.代码举例

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这个对象--'车',"蓝色"

（六）this绑定的优先级

this绑定优先级：new绑定>显示绑定>隐式绑定>默认绑定

（七）this指向特殊情况

1.内置函数的this指向

a.事件监听器中的this指向事件源

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

b.定时器里的this指向window(无论定时器放在哪都是这样)

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

c.forEach里的this默认window;添加第二个参数时，指向它

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: '张三' })

2.箭头函数无this指向逐级向上查找

箭头函数需要逐级向上找this

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

箭头函数中没有this

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);

(二) 构造函数方式（首字母需要大写）

1.内置Object对象构造器

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

2.自定义构造器/类

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()

十构造器|原型对象|实例化对象相关

(一) 原型|原型模式|原型对象|原型链概念

原型

一个可以被复制的类，通过复制原型，可以创建出来一个一摸一样的对象

也就是说原型就是一个模板

原型模式(一种设计模式)

原型模式指的是用于重复创建的对象，既可以重复创建又能保证性能

原型对象

是抽象的是一个内存中的空间

一个对象的诞生=构造器+原型对象（底层）

原型链

当在实例化的对象中访问一个属性时，首先会在该对象内部(自身属性)寻找，如找不到，则会向其__proto__指向的原型中寻找，如仍找不到，则继续向原型中__proto__指向的上级原型中寻找，直至找到或Object.prototype.__proto__为止（值为null），这种链状过程即为原型链。

(二) 构造器、原型对象、实例化对象及原型链

1.构造器、原型对象、实例化对象关系

在构造器身上有一个prototype属性，指向构造器的原型对象(显示原型对象)

在原型对象上有一个属性叫constructor，指向这个原型对象对应的构造器

每一个生成的实例化对象都一个属性__proto__，指向对应的原型对象(隐式原型对象)

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

PS：console.dir()打印对象

2.原型链(沿之向上寻找)

寻找对象的属性(方法)的机制,就是沿着__proto__形成的链式结构向上寻找

(自己身上没有此属性 -> 原型对象 -> Object -> null)

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

3.对象的私有属性和公有属性

在实例化对象自己身上的叫私有属性

在原型对象身上叫公有属性

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

(三) 一些实例情况

1.__proto__改变--堆地址不同

2.prototype改变--旧原型对象依然是原型链一环

3.实例化对象调用VS原型对象调用

PS:undefined类型转number类型是NaN，而NaN+任何数都为NaN

4.实例化对象没有某属性沿原型链向上查找

十一继承

(一) 继承相关概念

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

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

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

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

不使用继承时：

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
        }

(二)私有属性继承--call继承

优点可以继承私有属性

缺点没有继承公有属性

// 核心代码--改变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: "小花"

(三)公有属性继承

1.原型继承

原型继承对于私有属性来说没什么意义,对于公有属性来说可以继承

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

Son.prototype = new Father()

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

沿原型链查找.prototype.prototype.say

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... 沿原型链查找

2.Object.create() 创建一个对象,可指定对象的原型对象->能用于继承公有属性

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

用于公有属性继承：沿原型链查找.prototype.prototype.say

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... 沿原型链查找

(四)公+私有属性继承

1.组合继承=call+原型继承

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

沿原型链查找.prototype.prototype.say

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()//公有方法

2.寄生继承=call+Object.create()

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

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

沿原型链查找.prototype.prototype.say

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()//公有方法

十二 ES6中声明类及继承

(一)声明类class

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...

(二)继承类extends

父类Student

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

子类Montor

不写constructor(xx){super(xx)}时也继承父类

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...

新增自己属性/方法时写constructor须用super()继承父类

粉-继承父类；绿-子类新增

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及其数据格式

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

JSON数据格式：

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

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

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

字符串

JSON
"hello"

对象

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

数组

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

(二)JSON的序列化和反序列化

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...

十四 JS中的错误类型及处理

(一)JS中的错误类型

总结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 捕获错误 try和catch须连用

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

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

1.抛出错误并捕获

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

2.抛出自定义错误(throw)并捕获

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

十五其他(严格模式等)

(一)用class封装数据存储的工具

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和eval和严格模式

1.with--扩展一个语句的作用域链

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);

2.eval--字符串转js

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

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

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

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

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

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

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

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

严格模式时不允许：

不能使用不加var或者let的变量

形参的参数不能重名

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

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()

(三)柯里化函数和组合函数

1.柯里化函数

只传递给函数一部分参数来调用它, 让它返回一个函数去处理剩余的参数, 这个过程，就是柯里化。

PS：说白了就是分开参数连续调用新函数

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>

2.组合函数

组合函数：其实就是先执行内参数函数获得返回值作为参数后再执行外函数

即先执行参数函数，再执行外函数

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