菜狗学前端之JS高级笔记

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

(免费) JS高级笔记icon-default.png?t=N7T8https://download.csdn.net/download/m0_58355897/89102910

一些前提概念

一 什么是js高级

  •  js高级是对js基础语法的一个补充说明,本质上还是对ECMAScript语法的进阶与延伸
  • 高级所要学习的语法相比而言没有js基础的多,但是会更加晦涩难懂,更加侧重的是理解

        

二 什么是面向对象编程

  • 面向对象不是一门技术,而是一种解决问题的思维方式
  • 面向对象的本质是对面向过程的一种封装

一 代码段和作用域

(一)代码段

1.什么是代码段

  • 一个script就是一个代码段
  • 一个js文件也是一个代码段

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

2.代码段特点

  1. 上面代码段定义的变量 下面的代码段可以使用
  1. 下面代码段定义的变量 上面的代码段不可以使用(因为代码从上向下执行)
  1. 代码段之间互不影响 一个代码段中的错误 不会影响到另一个代码段
  1. 一个html页面中,可以存在多个代码段

(二)作用域

1.作用域

a.分类

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

b.主要作用

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

2.作用域链

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

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

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

  1. 首先,在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2
  1. 然后,在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3
  1. 再次执行2的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常

二 预解析

(一)预解析概念

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

(二)预解析期间操作

1.提升操作

  1. 加var的变量仅声明提升
  • (函数内部的局部变量,提升到函数体的最前面)
  • (函数外部的全局变量,提升到代码段最前面)
  1. 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的区别

  1. 不管加不加var,创建的是全局变量,都会放在GO中,也就是说可以通过window.xx
  1. 加var的变量可能是全局变量, 也可能是局部变量, 通过是否写在函数内区分
  1. 局部变量不会挂载在window上
  1. 加var的变量在预解析的时候会提升, 不加var不会提升
  1. 加var的变量不能用delete()方法删除,不加var能

(二)let声明变量(ES6)

1.产生原因

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

2.特点

  1. let声明的变量不会提升(提升了但是没有初始化)
  1. let会和{} 形成块级作用域
  1. 使用let声明的变量不会挂载在window上
  1. 使用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.特点

  1. const声明的变量不会提升
  1. 和{}会形成块级作用域
  1. 不会挂载window上
  1. 声明的变量不能修改(常量)
  1. 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.特点

  1. 延长了变量的生命周期
  1. 扩大了变量的作用范围
  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.分类

  1. 默认绑定;
  1. 隐式绑定;
  1. 显式绑定;
  1. new绑定;

(二)默认绑定

默认绑定的this值:window对象

  1. 直接this
  1. 函数独立调用时里面的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指向,并且执行构造器

  1. 创建出了一个实例化对象(开辟了一个新的堆空间)
  1. 让构造器中this指向新的实例化对象(指向了新的堆空间)
  1. 执行了构造函数
  1. 返回的是一个堆空间的地址,把地址给了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

  1. 不写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...

  1. 新增自己属性/方法时写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: 写成数组的时候 ,当元素是纯数字 可以不添加引号 其余都要添加

  1. 字符串

JSON
"hello"

  1. 对象

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

  1. 数组

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" 这个文件中写的代码都受严格模式的约束

严格模式时不允许:

  1. 不能使用不加var或者let的变量
  1. 形参的参数不能重名
  1. 在严格模式下,函数的独立调用不再默认绑定(即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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/528489.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言从入门到实战————文件操作

目录 前言 1. 为什么使用文件&#xff1f; 2. 什么是文件&#xff1f; 2.1 程序文件 2.2 数据文件 2.3 文件名 3. ⼆进制文件和文本文件&#xff1f; 4. 文件的打开和关闭 4.1 流和标准流 4.1.1 流 4.1.2 标准流 4.2 文件指针 4.3 文件的打开和关闭 5. 文…

DSP报错#10099-D</a> program will not fit into available memory

DSP报错#10099-D程序将无法放入可用内存 问题解决方法后续 问题 开发TMS320Fxxxxx出现以下问题&#xff1a; <a href"file:/D:/TI/ti/ccs/tools/compiler/dmed/HTML/10099.html">#10099-D</a> program will not fit into available memory, or the se…

P5200A泰克P5200A高压差分探头

181/2461/8938产品概述&#xff1a; 特点: 1.3 kV差分1 kV至地&#xff08;每个通道&#xff09;50 MHz带宽50倍/500倍衰减UL认证3111-1IEC 1010认证不再不安全地浮动您的范围出色的信号保真度轻松连接IC和汇流条对用户和DUT安全由9 VDC墙壁适配器供电超量程指示器安全认证可…

rhce复习3

DNS DNS&#xff08;Domain Name System&#xff09;是互联网上的一项服务&#xff0c;它作为将域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使人更方便的访问互联网。 DNS系统使用的是网络的查询&#xff0c;那么自然需要有监听的port。DNS使用的是53端口&#x…

SRIO学习(1)SRIO介绍以及IP核详解

文章目录 一、SRIO介绍1.1、概要1.2、RapidIO与传统嵌入互连方式的比较1.3、串行RapidIO协议&#xff08;SRIO&#xff09; 二、RapidIO协议结构及包格式2.1、逻辑层2.2 传输层2.3 物理层 三、IP核详解3.1、逻辑层3.1.1 I/O端口3.1.2 消息&#xff08;Message&#xff09;端口3…

【云呐】工单管理流程,工单管理怎么处理

工单创建  客户或内部员工在系统中创建工单。工单应包括以下信息&#xff1a;  问题的描述  工单的优先级和紧急程度  相关的客户或内部员工信息  工单的类型或类别  相关的附件或文件 工单分配  工单需要分配给适当的人员或团队来解决。分配过程可能涉及到以下步…

龙蜥社区「人人都可以参与开源」—— 走进“龙蜥社区”感受开源魅力

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《linux深造日志》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引入 开源这个关键字我相信各位开发者们或多或少都听说过&#xff0c;简单来讲开源就是源码开放&#xff0c;但是不意味着使…

【DM8】间隔分区

是范围分区的一个扩展 如果使用了间隔函数做分区&#xff0c;在数据插入的时候&#xff0c;如果没有合适的分区&#xff0c;数据库会自动创建一个新的分区。 –year往后推两年 SELECT SYSDATE numtoyminterval(2,‘YEAR’); –month往后推两年 SELECT SYSDATE numtoyminterv…

交换机与队列的介绍

1.流程 首先先介绍一个简单的一个消息推送到接收的流程&#xff0c;提供一个简单的图 黄色的圈圈就是我们的消息推送服务&#xff0c;将消息推送到 中间方框里面也就是 rabbitMq的服务器&#xff0c;然后经过服务器里面的交换机、队列等各种关系&#xff08;后面会详细讲&…

智慧园区预付费4G水电表管理系统

智慧园区预付费4G水电表管理系统&#xff0c;作为智慧城市建设的重点之一&#xff0c;利用4G通信技术对园区内的水电使用进行实时监控和管理。这种系统借助现代通信技术和物联网的发展&#xff0c;为园区水电能源的预付费、计量、监控和管理提供了新的解决方案。本文将从该系统…

750万人受影响,印度电子巨头boAt重大数据泄露事件

近日&#xff0c;印度消费电子巨头boAt遭遇重大数据泄露事件&#xff0c;超过750万客户的个人数据遭到泄露&#xff0c;泄露的个人数据包括姓名、地址、联系电话、电子邮件 ID 和客户 ID 以及其他敏感信息&#xff0c;目前这些泄露数据正在暗网上流传。 boAt Lifestyle数据库被…

vue项目初始化和部署

目录 1. 技术简介... 2 2. 安装Node.js. 3 3. 全局安装Vue CLI (脚手架工具) 5 4. 创建一个新的Vue项目... 6 5. 在阿里云虚拟机安装和配置Nginx. 9 6. 将Vue项目打包部署到Nginx下... 14 7. 访问部署的项目... 14 1. 技术简介 Vue.js&#xff08;通常简称为Vue&#x…

vue3 +Taro 页面实现scroll-view 分页功能

需求 现在分页列表 后端只给你一个分页的数据列表 没有总页数 没有当前的分页 页数 只有这么一个list 、、、 如何去分页 我这使用的是scroll-view 组件 滑动到底部的事件 根据你当前设定的每页的数据数量和后端返回给你的数据列表数量 当某一次分页 两个数量不相等了以后 就…

群晖NAS使用Docker部署Potopea在线图片编辑工具并实现公网访问

文章目录 1. 部署Photopea2. 运行Photopea3. 群晖安装Cpolar4. 配置公网地址5. 公网访问测试6. 固定公网地址 本文主要介绍如何在群晖NAS使用Docker部署Potopea在线图片编辑工具&#xff0c;并结合cpolar内网穿透实现公网环境可以远程访问本地部署的Potopea. Photopea是一款强大…

【word技巧】Word文档打开密码,两种方法

想要保护Word文档不被任何人打开&#xff0c;保护文件内容&#xff0c;我们可以给word文档设置一个打开密码&#xff0c;今天分享word文档打开密码的两种设置方法。 给word文档设置打开密码有两种方法&#xff0c;方法如下&#xff1a; 方法一&#xff1a; 打开word文档之后…

HarmonyOS 开发-搜索页一镜到底案例

介绍 本示例介绍使用bindContentCover、transition、animateTo实现一镜到底转场动画&#xff0c;常用于首页搜索框点击进入搜索页场景。 效果图预览 使用说明 点击首页搜索框跳转到搜索页面显式一镜到底转场动画 实现思路 通过点击首页搜索框改变bindContentCover全屏模态…

Java绘图坐标体系

一、介绍 下图说明了Java坐标系。坐标原点位于左上角&#xff0c;以像素为单位。在Java坐标系中&#xff0c;第一个是x坐标&#xff0c;表示当前位置为水平方向&#xff0c;距离坐标原点x个像素&#xff1b;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐…

【机器学习】深入解析机器学习基础

在本篇深入探讨中&#xff0c;我们将揭开机器学习背后的基础原理&#xff0c;这不仅包括其数学框架&#xff0c;更涵盖了从实际应用到理论探索的全方位视角。机器学习作为数据科学的重要分支&#xff0c;其力量来源于算法的能力&#xff0c;这些算法能够从数据中学习并做出预测…

甲方安全建设之研发安全-SCA

前言 大多数企业或多或少的会去采购第三方软件&#xff0c;或者研发同学在开发代码时&#xff0c;可能会去使用一些好用的软件包或者依赖包&#xff0c;但是如果这些包中存在恶意代码&#xff0c;又或者在安装包时不小心打错了字母安装了错误的软件包&#xff0c;则可能出现供…

移动端app如何设计测试用例?

1. 用户界面测试 布局和元素 验证所 有UI元素&#xff08;如按钮、文本框、图像等&#xff09;的位置和尺寸是否与设计图一致。 验证文本颜色、字体和大小是否易于阅读。 验证交互元素&#xff08;如按钮&#xff09;的点击区域是否足够大&#xff0c;易于触摸。 导航和流…