2.7JS基础笔记——JS高级-CSDN博客

本文链接：https://blog.csdn.net/m0_64838786/article/details/124153677

本文详细解读了JavaScript的基础概念如IIFE、this，原型与原型链，执行上下文与作用域，闭包的原理与应用，以及继承模式和线程机制。涵盖了函数执行、作用域链、闭包实例、原型链继承和Web Workers的实战。

摘要由CSDN通过智能技术生成

系列文章目录

2.6JS基础笔记

一、总结

1.IIFE

①.全称： Immediately-Invoked Function Expression

相当于 “匿名函数自调用”

②.作用

隐藏实现
不会污染外部（全局）命名空间

2.this

①.this是什么

任何函数本质上都是通过某个对象来调用的，如果没有直接指定就是window
所有函数内部都有一个变量this
它的值是调用函数的当前对象

②.如何确定this的值

test(): —— window
p.test(): —— p
new test(): —— 新创建的对象
p.call(obj): —— obj

二、原型与原型链

1.原型

①函数的prototype属性

每个函数都有都有一个prototype属性，它默认指向一个object空对象（即称为：原型对象）
原型对象中有一个属性constructor，它指向函数对象

②给原型对象添加属性（一般都是方法）

作用：函数的所有实例对象自动拥有原型中的属性（方法）

2.显式原型与隐式原型

①每个函数function中都有一个prototype，即显式原型（属性）

②每个实例对象都有一个__proto__，可称为隐式原型（属性）

③对象的隐式原型的值为其对应构造函数的显式原型的值

④内存结构在这里插入图片描述

⑤总结：

函数的prototype属性：在定义函数时自动添加的，默认值是一个空object对象
对象的__proto__属性：创建对象时自动添加的，默认值是构造函数的prototype属性值
程序员能直接操作显式原型，但不能直接操作隐式原型（ES6之前）

3.原型链

①访问一个对象的属性时

先在自身属性中查找，找到返回
如果没有，再沿着__proto__这条链向上查找，找到返回
如果最终没有找到，返回undefined

②别名：隐式原型链

③作用：查找对象的属性（方法）

④构造函数、原型、实体对象的关系：
在这里插入图片描述

函数的显式原型指向的对象默认是空Object实例对象（但Object不满足）
所有函数都是Function的实例（包括Function）
Object的原型对象是原型链尽头

属性问题：

读取对象的属性值时：会自动到原型链中查找
设置对象的属性值时：不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值
方法一般定义在原型中，属性一般通过构造函数定义在对象自身上

4.instanceof

①instanceof如何判断：

表达式：A instanceof B
如果B函数的显式原型对象在A对象的原型链上，返回true，否则返回false

②Function是通过new自己产生的实例
在这里插入图片描述
结果：

练习1：

练习2：

var F = function(){}
Object.prototype.a = function(){
	console.log('a()')
}
Function.prototype.b = function(){
	console.log('b()')
}
var f = new F()
f.a() //√
f.b() //×
F.a() //√
F.b() //√

三、执行上下文与执行上下文栈

1.声明提前

①变量声明提升

通过var定义（声明）的变量，在定义语句之前就可以访问到

值：undefined

②函数声明提升

通过function声明的函数，在之前就可以直接调用

值：函数定义（对象）

2.执行上下文

①代码分类（位置）

全局代码
函数（局部）代码

②全局执行上下文

在执行全局代码前将window确定为全局执行上下文
对全局数据进行预处理：
var定义的全局变量 = => undefined，添加为window属性
function声明的全局函数 = => 赋值（fun），添加为window方法
this = = > 赋值（window）

③函数执行上下文

在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象（虚拟的，存在于栈中）
对局部数据进行预处理
形参变量 = = > 赋值（实参）= = > 添加为执行上下文的属性
arguments = = > 赋值（实参列表），添加为执行上下文的属性
var定义的局部变量 = = > undefined，添加为执行上下文的属性
function声明的函数 = = > 赋值（fun），添加为执行上下文的方法
this = = > 赋值（调用函数的对象）
开始执行函数体代码

3.执行上下文栈

在全局代码执行前，JS引擎就会创建一个栈来存储管理所有的执行上下文对象
在全局执行上下文（window）确定后，将其添加到栈中（压栈）
在函数执行上下文创建后，将其添加到栈中（压栈）
在当前函数执行完后，将栈顶的对象移除（出栈）
当所有的代码执行完后，栈中只剩下window

4.练习

①

    <script type="text/javascript">
        console.log('gb:' + i);
        var i=1;
        foo(1);
        function foo(i){
            if(i==4){
                return;
            }
            console.log('fb:' + i);
            foo(i+1);//递归调用：在函数内部调用自己
            console.log('ge:' + i);
        }
        console.log('ge:' + i);
    </script>

结果：
在这里插入图片描述

②
函数提升优先级比变量提升要高，且不会被变量声明覆盖，但是会被变量赋值覆盖

    <script type="text/javascript">
        function a(){}
        var a;
        console.log(typeof a);

        if(!(b in window)){
            var b=1;
        }
        console.log(b);

        var c=1;
        function c(c){
            console.log(c);
        }
        c(2);
    </script>

结果：
在这里插入图片描述

四、作用域与作用域链

1.作用域

①

就是一块“地盘”，一个代码段所在的区域
它是静态的（相对于上下文对象），在编写代码时就确定了

②分类

全局作用域
函数作用域
没有块作用域（ES6有）

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

2.作用域与执行上下文

①区别1

全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了，而不是在函数调用时
全局执行上下文环境是在全局作用域确定之后，js代码马上执行之前创建
函数执行上下文是在调用函数时，函数体代码执行之前创建

②区别2

作用于是静态的，只要函数定义好了就一直存在，且不会再变化
上下文环境是动态的，调用函数时创建，函数调用结束时上下文环境就会被释放

③联系

上下文环境（对象）是从属于所在的作用域
全局上下文环境 == >全局作用域
函数上下文环境 == >对应的函数使用域

五、闭包

1.闭包的理解

①如何产生闭包

当一个嵌套的内部（子）函数引用了嵌套的外部（父）函数的变量（函数）时，就产生了闭包

②闭包是什么

使用chrome调试
理解一：闭包是嵌套的内部函数
理解二：包含被引用变量（函数）的对象
注：闭包存在于嵌套的内部函数中

③产生闭包的条件

函数嵌套
内部函数引用了外部函数的数据（变量、函数）

2.常见的闭包

①将函数作为另一个函数的返回值

    <script type="text/javascript">
        function fn1(){
            var a=2;
            function fn2(){
                a++;
                console.log(a);
            }
            return fn2;
        }
        var f=fn1();
        f();
        f();
    </script>

结果：在这里插入图片描述

②将函数作为实参传递给另一个函数调用

    <script type="text/javascript">
        function showDelay(msg,time){
            setTimeout(function(){
                alert(msg);
            },time);
        }
        showDelay('atguigu',2000);
    </script>

3.闭包的作用

使用函数内部的变量在函数执行完后，仍然存活在内存中（延长了局部变量的生命周期）
让函数外部可以操作（读写）到函数内部的数据（变量、函数）

闭包的生命周期
产生：在嵌套内部函数定义执行时就产生了（不是在调用）
死亡：在嵌套的内部函数完成垃圾对象时

4.闭包的应用——自定义JS模块

    <script type="text/javascript" src="myMouble.js"></script>
    <script type="text/javascript">
        var module = myMouble();
        module.doSomething();
        module.doSomeOtherthing();
    </script>

function myMouble(){
    var msg='My atguigu';
    function doSomething(){
        console.log('doSomething()'+msg.toUpperCase());
    }
    function doSomeOtherthing(){
        console.log('doSomeOtherthing()'+msg.toLowerCase());
    }
    return{
        doSomething: doSomething,
        doSomeOtherthing: doSomeOtherthing
    }
}

结果：在这里插入图片描述
同上：

    <script type="text/javascript" src="myMouble.js"></script>
    <script type="text/javascript">
        myModule.doSomething();
        myModule.doSomeOtherthing();
    </script>

(function(w){
    var msg='My atguigu';
    function doSomething(){
        console.log('doSomething()'+msg.toUpperCase());
    }
    function doSomeOtherthing(){
        console.log('doSomeOtherthing()'+msg.toLowerCase());
    }
    window.myModule = {
        doSomething: doSomething,
        doSomeOtherthing: doSomeOtherthing
    }
})(window);

定义JS模块：

具有特定功能的js文件
将所有的数据和功能都封装在一个函数内部（私有的）
只向外暴露一个包含n个方法的对象或函数
模块的使用者，只需要通过模块暴露的对象调用方法来实现对应的功能

5.内存溢出与内存泄漏

闭包的缺点：

函数执行完后，函数内的局部变量没有释放，占用内存时间会变长
容易造成内存的泄露

解决方法：

能不用闭包就不用
及时释放

var f = fn1();
f();
f = null;//让内部函数成为垃圾对象 --> 回收闭包

①内存溢出

一种程序运行出现的错误

当程序运行需要的内存超过了剩余的内存时，就会抛出内存溢出的错误

②内存泄露

占用的内存没有及时释放

内存泄露积累多了就让易导致内存溢出

常见的内存泄漏
意外的全局变量
没有及时清理的计时器或回调函数
闭包

四、对象创建模式

①方式一：Object构造函数模式

套路：先创建空Object对象，在动态添加属性、方法
适用场景：起始时不确定对象内部数据
问题：语句太多

    <script>
        var p = new Object();
        p.name = 'Tom';
        p.age = 18;
        p.setName = function(name){
            this.name = name;
        }
    </script>

②方法二：对象字面量模式

套路：使用{ }创建对象，同时指定属性、方法
适用场景：起始时对象内部数据是确定的
问题：如果创建多个对象，有重复代码

    <script>
        var p = {
            name: 'Tom',
            age: 18,
            setName: function(name){
                this.name = name;
            }
        }
    </script>

③方法三：工厂模式

套路：通过工厂函数动态创建对象并返回
适用场景：需要创建多个对象
问题：对象没有一个具体的类型，都是Object类型

    <script>
        function creatPerson(name, age){ //返回一个对象的函数===>工厂函数
            var obj = {
                name: name,
                age: age,
                setName: function(name){
                    this.name = name;
                }
            }
            return obj;
        }
        var p1 = creatPerson('Tom',18);
        var p2 = creatPerson('Bob',16);
    </script>

④方法四：自定义构造函数模式

套路：自定义构造函数，通过new创建对象
适用场景：需要创建多个类型确定的对象
问题：每个对象都有相同的数据，浪费内存

    <script>
        function Person(name ,age){
            this.name = name;
            this.age = age;
            this.serName = function(name){
                this.name = name;
            }
        }
        var p1 = new Person('Tom',13);
        console.log(p1.name);
        console.log(p1 instanceof Person);
    </script>

结果：在这里插入图片描述
⑤方法五：构造函数+原型的组合模式

套路：自定义构造函数，属性在函数中初始化，方法添加到原型上
适用场景：需要创建多个类型确定的对象

    <script>
        function Person(name ,age){//在构造函数中只初始化一般函数
            this.name = name;
            this.age = age;
        }
        Person.prototype.setName = function(name){
            this.name = name;
        }
        var p1 = new Person('Bob',19)
        var p2 = new Person('Lear',21)
        console.log(p1.name,p1.age);
        console.log(p1 instanceof Person);
        console.log(p1);
        console.log(p2);
    </script>

结果：在这里插入图片描述

五、继承模式

1.原型链继承

①方式一：原型链继承
1.套路

定义父类型构造函数
给父类型的原型添加方法
定义子类型的构造函数
创建父类型的对象赋值给子类型的原型
将子类型原型的构造属性设置为子类型
给子类型原型添加方法
创建子类型的对象：可以调用父类型的方法

2.关键

子类型的原型为父类型的一个实例对象

    <script>
        //父类型
        function Supper(){
            this.supProp = 'Supper property';
        }
        Supper.prototype.showSupperProp = function(){
            console.log(this.supProp);
        }
        
        //子类型
        function Sub(){
            this.subProp = 'Sub property';
        }
        //子类型的原型为父类型的一个实例对象
        Sub.prototype = new Supper();
        //让子类型的原型中的constructor指向子类型
        Sub.prototype.constructor = Sub;
        Sub.prototype.showSubProp = function(){
            console.log(this.subProp);
        }
        var sub = new Sub();
        sub.showSupperProp();
        sub.showSubProp();
    </script>

结果：在这里插入图片描述

②方式二：借用构造函数继承（假的）
1.套路

定义父类型构造函数
定义子类型构造函数
在子类型构造函数中调用父类型构造

2.关键

在子类型构造函数中通过call()调用父类型构造函数

    <script>
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        function Studert(name,age,price){
            Person.call(this,name,age);//相当于：this.Person(name,age)
            this.price = price;
        }
        var s = new Studert('Tom' ,18 ,12000);
        console.log(s.name,s.age,s.price);
    </script>

③方式三：原型链+借用构造函数的组合继承
1.利用原型链实现对父类型对象的方法继承
2.利用call()借用父类型构建函数初始化相同属性

    <script>
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.setName = function(name){
            this.name = name;
        }
        function Studert(name,age,price){
            Person.call(this,name,age);//相当于：this.Person(name,age)
            this.price = price;
        }
        Studert.prototype = new Person();
        Studert.prototype.constructor = Studert;
        Studert.prototype.setPrice = function(price){
            this.price = price;
        }
        var s = new Studert('Tom',24,15000);
        s.setName('Bob');
        s.setPrice(16000);
        console.log(s.name,s.age,s.price)
    </script>

结果：在这里插入图片描述

new一个对象背后做了什么
创建一个空对象
给对象设置__proto__，值为构造函数对象的prototype属性值
执行构造函数体（给对象添加属性、方法）

2.面试题

    <script>
        function fun(n,o){
            console.log(o);
            return{
                fun: function(m){
                    return fun(m,n);
                }
            }
        }
        var a = fun(0);
        a.fun(1);
        a.fun(2);
        a.fun(3);

        var b = fun(0).fun(1).fun(2).fun(3);

        var c = fun(0).fun(1);
        c.fun(2);
        c.fun(3);
    </script>

结果：
在这里插入图片描述

六、线程机制与事件机制

1.进程与线程

①进程（process）

程序的一次执行，它占有一片独有的内存空间
可以通过windows任务管理器查看进程

②线程（thread）

是进程内的一个独立执行单元
是程序执行的一个完整流程
是CPU的最小的调度单元

③图解
在这里插入图片描述
④相关知识

应用程序必须运行在某个进程的某个线程上
一个进程中至少有一个运行的线程：主线程，进程启动后自动创建
一个进程中也可以同时运行多个线程，我们会说程序是多线程运行的
一个进程内的数据可以供其中的多个线程直接共享
多个进程之间的数据是不能直接共享的
线程池（thread pool）：保存多个线程对象的容器，实现线程对象的反复利用

⑤相关问题

(1)何为多进程与多线程？

多进程运行：一个应用程序可以同时启动多个实例运行
多线程：在一个进程内，同时有多个线程运行

(2)比较单线程与多线程？

多线程

优点：

能有效提升CPU的利用率
创建多线程开销

缺点：

线程间切换开销
死锁与状态同步问题

单线程

优点：

顺序编程简单易懂

缺点：

效率低

(3)JS是单线程还是多线程？

JS是单线程运行的
但使用H5中的Web Workers可以多线程运行

(4)浏览器运行是单线程还是多线程？

都是多线程运行的

(5)浏览器运行时单进程还是多进程？

有的是单进程，比如：firefox、老版IE
有的是多进程，比如：chrome、新版IE

2.浏览器内核

支撑浏览器运行的最核心的程序

不同浏览器内核可能不同：

Chrome,Safari：webkit
firefox：Gecko
IE：Trident
360，搜狗等国内浏览器：Trident + webkit

内核由很多模块组成：

JS引擎模块：负责JS程序的编译与运行(~~主线程~~ )
html,css文档解析模块：负责页面文本的解析(~~主线程~~ )
DOM/CSS模块：负责dom/css在内存中的相关处理(~~主线程~~ )
布局和渲染模块：负责页面的布局和效果的绘制（内存中的对象）(~~主线程~~ )
定时器模块：负责定时器的管理(~~分线程~~ )
事件响应模块：负责事件的管理(~~分线程~~ )
网络请求模块：负责ajax请求(~~分线程~~ )

3.定时器问题

①定时器真的是定时执行的吗？

定时器一般会延迟一丁点（可以接受），也可能延迟很长时间（不能接受）

②定时器回调函数是在分线程执行的吗

在主线程执行的，JS是单线程的

③定时器是如何实现的？

事件循环模型

4.证明JS是单线程执行的

①如何证明JS是单线程的？

setTimeout()的回调函数是在主线程执行的
定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行

②为什么JS要用单线程模式，而不用多线程模式？

Javascript的单线程，与它的用途有关
作为浏览器脚本语言，Javascript的主要用途是与用户互动，以及操作DOM
这决定了它只能是单线程，否则会带来很复杂的同步问题

③代码的分类？

初始化代码
回调代码

④JS引擎执行代码的基本流程？

先执行初始化代码：包含一些特别的代码
设置定时器
绑定事件监听
发送ajax请求
后面在某个时刻才会执行回调函数

5.事件循环模型

①所有代码分类：

初始化执行代码（同步代码）：包含绑定dom事件监听，设置定时器，发送ajax请求的代码
回调执行代码（异步代码）：处理回调逻辑

②JS引擎执行代码的基本流程：

初始化代码===>回调代码

③模型的两个重要组成部分：

事件（定时器、DOM事件、Ajax）管理模块
回调队列

④模型的运转流程

执行初始化代码，将事件回调函数交给对应模块管理
当事件发生时，管理模块会将回调函数及其数据添加到回调队列中
只有当初始化代码执行完后（可能会一定时间），才会遍历读取回调队列中的回调函数执行

在这里插入图片描述

6.H5 Web Workers

不足：

慢
不能跨域加载JS
worker内代码不能访问DOM（更新UI）
不是每个浏览器都支持这个新特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="数值" id="number">
    <button id="btn">计算</button>
    <script>
        var input = document.getElementById('number');
        document.getElementById('btn').onclick = function(){
            var number = input.value;
            //创建一个Worker对象
            var worker = new Worker('worker.js');
            //绑定接收消息的监听
            worker.onmessage =  function(event){
                console.log('主线程接收分线程返回的数据：'+event.data);
                alert(event.data);
            }
            //向分线程发送消息
            worker.postMessage(number);
            console.log('主线程向分线程发送数据：' + number);
        }
    </script>
</body>
</html>

function fibonacci(n){
    return n<=2 ? 1:fibonacci(n-1) + fibonacci(n-2);
}
var onmessage = function(event){
    var number = event.data;
    console.log('分线程接收到主线程发送的数据：'+number);
    //计算
    var result = fibonacci(number);
    postMessage(result);
    console.log('分线程向主线程返回数据'+result);
    //alert是window的方法，在分线程不能使用
    //分线程中的全局对象不再是window，所有在分线程中不能更新界面
}