五十二——七十一

约定不等于承诺〃 2023-09-30 17:59 63阅读 0赞

## 五十二、JavaScript——函数简介 ##

#### 一、函数 ####

>  *   **函数（Function)**
> 
> \- 函数也是一个对象
> 
> \- 它具有其他对象所有的功能
> 
> \- 函数中可以储存代码，且可以在需要时调用这些代码
> 
> 语法：
> 
> function 函数名（）\{
> 
> 语句。。。
> 
> \}
> 
>  *   **调用函数**
> 
> \- 调用函数就是执行函数中存储的代码
> 
> \- 语法：
> 
> 函数对象（）

*   **检查函数对象**

\- 使用（typeof 函数名）

\- 注意： 函数名不要加括号 ：（typeof fn）即可

>  *  函数创建
> 
> 语法：
> 
> function 函数名（）\{
> 
> 语句。。。
> 
> \}

![86e2a683c24f4bbd83cef3f33f4e674e.png][]

>  *   **调用函数**
> 
> \- 调用函数就是执行函数中存储的代码
> 
> \- 语法：
> 
> 函数对象（）

![2b9e1e91f1ee4adab04a738080b84e25.png][]

>  *   **检查函数对象**
> 
> \- 使用（typeof 函数名）
> 
> \- 注意： 函数名不要加括号 ：（typeof fn）即可

![6ba7a459689b432fa10de8b1fd2c1533.png][]

## 五十三、JavaScript——函数的创建方式 ##

#### 一、函数的创建方式 ####

>  *  **函数的定义方式**
> 
>  **1.函数声明**
> 
> function 函数名(\[参数\])\{
> 
> 语句。。。
> 
> \}
> 
> **2. 函数表达式**
> 
> const 变量 = function()\{
> 
> 语句。。。
> 
> \}
> 
> **3. 箭头函数**
> 
> () => \{
> 
> 语句。。。
> 
> \}
> 
> \- 只有一个语句的时候，大括号可以省略不写

![ebd026be5fac49c3a396c6e805f70f7b.png][]

## 五十四、JavaScript——参数简介 ##

#### 一、参数简介 ####

>  *   **参数**
> 
> \- 在定义函数时，可以在函数中执行数量不等的形式参数（形参）
> 
> \- 在函数中定义参数，就相当于在函数内部声明了对应变量但没有赋值
> 
>  *   **实际参数**
> 
> \- 在调用函数时，可以在函数的()中传递数量不等的实参
> 
> \- 实参就会赋值给对应的形参
> 
> \- 参数
> 
> 1. 如果实参和形参数量相同，则对应的实参赋值给对应的形参
> 
> 2. 如果实参多于形参，则多余的实参不会使用
> 
> 3. 如果形参多于实参，则多余的形参为undefinded
> 
>  *   **参数类型**
> 
> \- JS中不会检查参数的类型，可以传递任何类型的值作为参数
> 
>   
>   
> 
> 
> **1.函数声明**
> 
> function 函数名(\[参数\])\{
> 
> 语句。。。
> 
> \}
> 
>  **2. 函数表达式**
> 
> const 变量 = function(\[参数\])\{
> 
> 语句。。。
> 
> \}
> 
> **3. 箭头函数**
> 
> (\[参数\]) => \{
> 
> 语句。。。
> 
> \}
> 
> \- **只有一个语句的时候，大括号可以省略不写**

![473df48e2c5a4c738faa0b189c57be0a.png][]

![5320992e52b1455a9511327e0a6ce38d.png][]

## 五十五、JavaScript——箭头函数的参数和默认参数 ##

#### 一、箭头函数的参数和默认参数 ####

>  *  当箭头函数中只有一个参数时，可以省略（）
>  *  定义参数参数时，可以为参数指定默认值，有实参传实参， 没实参传默认值

![ac8f701742e44d4d9dee7d5c78884158.png][]

## 五十六、JavaScript——使用对象作为参数 ##

#### 一、对象作为参数传递 ####

>  *  对象可以作为参数传递

![6f1b3087d7a94dfb9871556b0cfeae8b.png][]

>  *  修改对象时，如果有其他变量指向该对象，则所有指向该对象的而变量都会收到影响
>  *  **a.name = "李四“**

![d88c4ee22d5c4f54a2cb16b5442b2b93.png][]

>  *  修改变量时，只会影响当前变量，开辟了一个新的空间，
>  *  **a = \{ \}**

![9152340b7c8f426c919f88a187ab0779.png][]

>  *  **有默认值时先每次调用时会重新创建默认值，创建新的对象，**
>  *  **两次调用并不是同一个对象，第二次调用相当于又内存中又新开辟了一个空间来存储对象**
>  *  function fn(a = \{name:"张三"\}) 默认值 张三

![626d4f69fc074a6ba5f8fe8357a81cb4.png][]

>  *  **function fn(a = fun)** 
>  *  **a 和 fun 指向同一个 对象，如果对象的值被修改了，那么影响就会一直持续下去，导致后面指向该对象的变量的值全部被修改**

![7eda81c2c3c74f0c86932d7665e61f57.png][]

## 五十七、JavaScript——函数作为参数 ##

#### 一、函数作为参数 ####

>  *  **在JS中，函数也是一个对象（一等函数）**
>     
>      **- 别的对象能做的事，函数也可以**

![130badf4f646438380c267fe4ce50139.png][]

## 五十八、JavaScript——函数的返回值 ##

#### 一、函数的返回值 ####

>  *  在函数中，可以通过return关键字来指定函数的返回结果
>     
>     返回值就是函数的执行结果，函数调用完完毕返回值便会作为结果返回
>  *  任何值都可以作为返回值使用（包括对象和函数之类）
>  *  如果return后不跟任何值，则相当于返回undefined

![90e6d7dad4c54189b6a034a62e000850.png][]

## 五十九、JavaScript——箭头函数的返回值 ##

#### 一、箭头函数的返回值 ####

>  *  箭头函数的返回值可以直接写在箭头后
>     
>     如果直接在箭头后面设置返回值时，对象字面量必须使用()括起来
>     
>      **const fn = () => (\{"name":"张三"\})**
> 
>  *  在箭头后面设置返回值，如果是形参的形式，可以不带大括号
>  *   **const sum = (a, b) => a + b**

![4a2dab8fffcb4f919eb5d81d752f928d.png][]

## 六十、JavaScript——全局和局部作用域 ##

#### 一、作用域 ####

> 作用域(scope)
> 
> \- 作用域指的是一个变量的可见区域
> 
> \- 作用域有两种
> 
> 1. **全局作用域**
> 
> \- 全局作用域在网页运行时创建，在网页关闭时销毁
> 
> \- 所有直接编写script标签中的代码都位于全局作用域中
> 
> 2. **局部作用域**
> 
> \- 块作用域是一种局部作用域
> 
> \- 块作用域在代码块执行时创建，代码块执行完它就销毁
> 
> \- 在块作用域中声明的变量是局部变量，只有在块内部访问，外部无法访问

#### 二、全局作用域 ####

>  *  全局作用域在网页运行时创建，在网页关闭时销毁
>  *  所有直接编写script标签中的代码都位于全局作用域中

#### 二、局部作用域 ####

>  *  \- 块作用域是一种局部作用域
>  *  \- 块作用域在代码块执行时创建，代码块执行完它就销毁
>  *  \- 块作用域在代码块执行时创建，代码块执行完它就销毁

**完整代码：**

## 六十一、JavaScript——函数作用域 ##

#### 一、函数作用域 ####

## 六十二、JavaScript——作用域链 ##

#### 一、作用域链 ####

>  *  **作用域链**
>     
>     \- 找变量的一个流程
>     
>     \- 当我们使用一个变量时
>     
>     JS解释器会优先在当前作用域中寻找变量
>     
>     如果找到了则直接使用，
>     
>     如果没找到，则去上一层作用域中寻找，找到了则使用
>     
>     如果没找到，则继续去上一层中寻找，
>     
>     如果全局作用域都没找到，则报 xxx is not definded
>  *  **使用变量遵循就近原则，在访问变量是选择离它最近的同名变量**

## 六十三、JavaScript——方法 ##

#### 一、方法和函数的区别 ####

>  **方法（method）**
> 
> \- 当一个对象的属性指向一个函数
> 
> 那么我们就称这个函数是对象的方法
> 
> 调用函数就称为调用对象的方法
> 
> 例如下面的 **obj.sayHello(),称为调用obj的sayHello方法**
> 
> **调用方法**： **对象.方法（）**
> 
>  **调用函数**： **函数（）**
> 
> **没有本质区别，只是调用方法需要加上对象**

## 六十四、JavaScript——windows对象 ##

#### 一、windows对象 ####

>  **window对象**
> 
> \- 在浏览器中，浏览器为我们提供了一个window对象，可以直接访问
> 
> \- window对象代表的是浏览器窗口，通过该对象可以对浏览器窗口进行各种操作
> 
> 除此之外window对象还负责存储JS中的内置对象和浏览器的宿主对象
> 
> \- window对象的属性可以通过window对象访问，也可以直接访问
> 
> 即 window.alert() 和alert() 效果是一样的
> 
> \- 函数就可以认为是window对象的方法

> **var 用来声明变量，作用和let相同，但是var不具有块作用域**
> 
> \- 在全局中使用var声明的变量，都会作为window对象的属性保存
> 
> \- 使用function声明的函数，都会作为window的方法保存
> 
> \- 使用let声明的变量不会存储在window,而存在一个秘密的小地方
> 
> \- 作用域越大，优先级越低

## 六十七、JavaScript——debug ##

#### 一、debug ####

> **方式一**：在代码中直接添加“**debugger**”打断点

![30170b52250c42499100a520e6f2bd76.png][]

> **方式二**：在源代码处直接点击某处，完成打断点，再刷新页面

![817684c0c99148cb9a02c8d382614853.png][]

![9acccbe06dc249fdb5e2261d0d337d8d.png][]

## 六十八、JavaScript——立即执行函数 ##

#### 一、立即执行函数 ####

> **立即执行函数(IIFE)**
> 
> \- 立即执行函数是一个匿名函数，并且它只会调用一次
> 
> \- 可以利用IIFE来创建一个一次性的函数作用域，避免变量冲突的问题
> 
> \- **语法**：
> 
>  **(function()\{** 
> 
>  **console.log(111)**
> 
>  **\}())**

## 六十九、JavaScript——函数中的this ##

#### 一、函数中的this ####

> \- 函数在执行时，JS解析器每次都会传递一个隐含的参数
> 
> \- 这个参数叫做 this
> 
> \- this会指向一个对象
> 
> \- this所指向的对象会根据函数调用方式的不同而不同
> 
> 1. 以函数的形式调用时，this指向的是windows
> 
> 2. 以方法的形式调用时，this指向的是调用方法的对象

## 七十、JavaScript——箭头函数中的this ##

#### 一、箭头函数中的this ####

> **箭头函数：**
> 
>  **(\[参数\]) => 返回值**
> 
> 例子：
> 
> 无参箭头函数： () => 返回值
> 
> 一个参数的： a => 返回值
> 
> 多个参数的： (a, b) => 返回值
> 
> 只有一个语句的函数： () => 返回值
> 
> 只返回一个对象的函数：() => (\{...\})
> 
> 有多行语句的函数： () => \{
> 
> ...
> 
> return 返回值
> 
> \}
> 
>   
> 
> 
>  **箭头函数没有自己的this,它的this由外层作用域决定的**
> 
>  **箭头函数的this和他的调用方式无关**

//一般函数
            function fn(){
                console.log("fn -->" , this)
            }
    
            //箭头函数
            const fn2 = () => {
                console.log("fn2 -->", this)
            }
    
            //函数调用
            fn();  //打印结果为window
            fn2(); //打印结果为window

> 下面的例子中，以方法的形式调用：**对象.方法名（）**
> 
> **因为箭头函数的this由外层作用域决定，这里箭头函数fn2是全局区定义的，外层作用域为全局，所以this指向window**

//一般函数
            function fn(){
                console.log("fn -->" , this)
            }
    
            //箭头函数
            const fn2 = () => {
                console.log("fn2 -->", this)
            }
    
    //以方法的形式调用
            const obj = {
                name: "张三",
    
    
                //将函数设置为对象的方法
                fn: fn,  //属性名： 方法名，把fn设置为obj的属性
                fn2: fn2, //属性名： 方法名，把fn2设置为obj的属性
            }
    
            //以方法的形式调用：对象
            obj.fn()    //打印结果为window
            obj.fn2()   //打印结果为window

>  *  设置sayHello()函数中内置普通函数t和箭头函数t2
>  *  普通函数t以函数形式调用，控制台打印为window
>  *  **箭头函数t2以函数形式调用，但是箭头函数的this和他的调用方法无关，与他的外层作用域有关，她的外层是sayHello(),sayHello()的this是name:张三，因此此处打印的是name:张三**

//一般函数
            function fn(){
                console.log("fn -->" , this)
            }
    
            //箭头函数
            const fn2 = () => {
                console.log("fn2 -->", this)
            }
    
            //函数调用
            // fn();  //打印结果为window
            // fn2(); //打印结果为window
    
    
            //以方法的形式调用
            const obj = {
                name: "张三",
    
    
                //将函数设置为对象的方法
                fn: fn,  //属性名： 方法名，把fn设置为obj的属性
                fn2: fn2, //属性名： 方法名，把fn2设置为obj的属性
    
                sayHello(){
                    console.log(this.name)
    
                    function t(){
                        console.log("t-->",this)
                    }
    
                    t2 = () => {
                        console.log("t2-->",this)
                    }
    
                    //以函数形式调用
                    t()
                    //虽然是以函数的形式调用，但是箭头函数的this和他的调用方法无关，与他的外层作用域有关，她的外层是因此此处打印的是name:张三
                    t2()
                }
            }
    
    
            obj.sayHello()

## 七十一、JavaScript——严格模式 ##

#### 一、严格模式 ####

> JS运行代码的模式有两种
> 
> \- **正常模式**
> 
> \- 默认情况下代码都运行在正常模式下
> 
> 在正常模式下，语法检查并不严谨
> 
> 它的规则是：能不报错的地方尽量不报错
> 
> \- 这种处理方式导致代码的运行性能较差
> 
> \- **严格模式**
> 
> \- 在严格模式下，语法检查变得严谨
> 
> 1. 禁止一些语法
> 
> 2. 更容易报错
> 
> 3. 提升了性能
> 
> \- **在开发中尽量使用严格模式**
> 
> 这样可以将一些隐藏的问题消灭在萌芽阶段
> 
> 同时也可以提升代码的运行性能

[86e2a683c24f4bbd83cef3f33f4e674e.png]: https://img-blog.csdnimg.cn/86e2a683c24f4bbd83cef3f33f4e674e.png
[2b9e1e91f1ee4adab04a738080b84e25.png]: https://img-blog.csdnimg.cn/2b9e1e91f1ee4adab04a738080b84e25.png
[6ba7a459689b432fa10de8b1fd2c1533.png]: https://img-blog.csdnimg.cn/6ba7a459689b432fa10de8b1fd2c1533.png
[ebd026be5fac49c3a396c6e805f70f7b.png]: https://img-blog.csdnimg.cn/ebd026be5fac49c3a396c6e805f70f7b.png
[473df48e2c5a4c738faa0b189c57be0a.png]: https://img-blog.csdnimg.cn/473df48e2c5a4c738faa0b189c57be0a.png
[5320992e52b1455a9511327e0a6ce38d.png]: https://img-blog.csdnimg.cn/5320992e52b1455a9511327e0a6ce38d.png
[ac8f701742e44d4d9dee7d5c78884158.png]: https://img-blog.csdnimg.cn/ac8f701742e44d4d9dee7d5c78884158.png
[6f1b3087d7a94dfb9871556b0cfeae8b.png]: https://img-blog.csdnimg.cn/6f1b3087d7a94dfb9871556b0cfeae8b.png
[d88c4ee22d5c4f54a2cb16b5442b2b93.png]: https://img-blog.csdnimg.cn/d88c4ee22d5c4f54a2cb16b5442b2b93.png
[9152340b7c8f426c919f88a187ab0779.png]: https://img-blog.csdnimg.cn/9152340b7c8f426c919f88a187ab0779.png
[626d4f69fc074a6ba5f8fe8357a81cb4.png]: https://img-blog.csdnimg.cn/626d4f69fc074a6ba5f8fe8357a81cb4.png
[7eda81c2c3c74f0c86932d7665e61f57.png]: https://img-blog.csdnimg.cn/7eda81c2c3c74f0c86932d7665e61f57.png
[130badf4f646438380c267fe4ce50139.png]: https://img-blog.csdnimg.cn/130badf4f646438380c267fe4ce50139.png
[90e6d7dad4c54189b6a034a62e000850.png]: https://img-blog.csdnimg.cn/90e6d7dad4c54189b6a034a62e000850.png
[4a2dab8fffcb4f919eb5d81d752f928d.png]: https://img-blog.csdnimg.cn/4a2dab8fffcb4f919eb5d81d752f928d.png
[30170b52250c42499100a520e6f2bd76.png]: https://img-blog.csdnimg.cn/30170b52250c42499100a520e6f2bd76.png
[817684c0c99148cb9a02c8d382614853.png]: https://img-blog.csdnimg.cn/817684c0c99148cb9a02c8d382614853.png
[9acccbe06dc249fdb5e2261d0d337d8d.png]: https://img-blog.csdnimg.cn/9acccbe06dc249fdb5e2261d0d337d8d.png