【第六部分 | JavaScript高级】2：函数高级

╰半橙微兮° 2023-09-23 16:18 146阅读 0赞

**目录**

【第二章】函数进阶

| （复习）函数声明

| 函数也是对象

| 函数的this指向

| 改变函数this的指向

| 函数的“严格模式”

| 闭包

| 浅拷贝和深拷贝

--------------------

## 【第二章】函数进阶 ##

### | （复习）函数声明 ###

![0f919aa6fcb543c4add7bceeaa639993.png][]

###    **| 函数也是对象** ###

**Java中的方法好像不是对象！只是对象的一个方法**

函数是对象，函数也有Function的原型对象。所有的函数的f对象实例也可以访问其prototype原型对象。

![ec021ddda4584e21b5747837151f5ef0.png][]

### | 函数的this指向 ###

![56a884bf08434cd79b9b5129e7d49e04.png][]

### | 改变函数this的指向 ###

方法1：call（）

![8b3d1bf148b44f0ba6707d9b4f182668.png][]

方法2：apply（）

![dd584244ad45491ba5070c6b5ae769bc.png][]

方法3：bind（）

![05746afeab304e5f89e0d084841352e9.png][]

三者总结

![e030e9ba365f4f3ba3986365c4488e5a.png][]

### | 函数的“严格模式” ###

更多严格模式要求参考：[严格模式 - JavaScript | MDN][- JavaScript _ MDN]

### | 闭包 ###

什么是闭包

*  闭包就是一个函数：变量所在的函数就是闭包（函数）
 *  也可以说：任何一个函数的作用域，如果可以访问其它函数内部的局部变量，则产生了闭包现象

![d05065fde620447585c69d8ba1fff678.png][]

闭包的作用：在f 作用域的外部，访问f作用域内的局部变量

在JS中，方法（函数）是一个对象，因此可以return

代码示例

<!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>
        <script>
            function fn(){
                var num = 10;
    
                function fun(){
                    console.log(num);
                }
    
    
                return fun;
            }
    
            var newf = fn();//获得返回的fun函数，相当于把fun拿出来了，这样就可以在 fn的作用域外，使用到了其作用域内的局部变量num啦
            newf(); //10  相当于把【 fn(); → fn调用了fun();】 直接整合为了  【newf();】
    
    
        </script>
    </head>
    <body>
        
    </body>
    </html>

--------------------

### **| 浅拷贝和深拷贝** ###

浅拷贝

*  浅拷贝指的是：不同对象之间赋值，若是**基本数据类型，则可以完整独立地赋值给新对象**，但是对于对象内的对象类型，则只能赋值地址给新对象
 *  浅拷贝示例

![d0ff870df949445bb94a28c3b02bced8.png][]

浅拷贝语法（语法糖，即上述for循环遍历赋值的JS的一个内置函数封装）

Object.assign(Ctrl+V的对象， Ctrl+C的对象);

![c2b3f471f02048548939496211882e6d.png][]

深拷贝

*  原理：利用递归函数，把对象中的对象也用for循环赋值给新的对象
 *  深拷贝没有语法糖，需要我们自己编写函数！

<!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>
        <script>
            //old obj
            var obj = {
                name: 'Klee',
                age: 10,
                features: {
                    color: 'red',
                    hobby: 'fishing'
                }
            }
    
            //new obj
            var newObj = {}
    
            //deepcopy
            function deepCopy(newObj , oldObj){
                for(var k in oldObj){
                    //获取属性值
                    var item = oldObj[k];
    
                    //判断是否是对象，若是，则递归调用deepcopy
                    if(item instanceof Array){
                        //新对象的第k个属性是数组  newObj[k]代表对象nowObj的第k个索引的对象（复习for（in）语法）
                        newObj[k] = []; 
                        deepCopy(newObj[k],item);//递归给数组赋值
                    }
    
                    //判断是否是数组，若是，则递归调用deepcopy
                    else if(item instanceof Object){
                        newObj[k] = {};
                        deepCopy(newObj[k],item);
                    }
    
                    //其他情况，则说明该属性是基本数据类型
                    else{
                        newObj[k] = item;
                    }
                }
            }
    
            //测试
            console.log('最开始的obj');
            console.log(obj.features.hobby);
    
            deepCopy(newObj , obj);
            
            console.log('调用了deepcopy后的obj、newObj');
            console.log(obj.features.hobby);
            console.log(newObj.features.hobby);
    
            newObj.features.hobby = 'eating';
            console.log('修改了newObj中对象的属性后的obj、newObj');
            console.log(obj.features.hobby);
            console.log(newObj.features.hobby);
            
    
    
        </script>
    </head>
    <body>
        
    </body>
    </html>

[0f919aa6fcb543c4add7bceeaa639993.png]: https://img-blog.csdnimg.cn/0f919aa6fcb543c4add7bceeaa639993.png
[ec021ddda4584e21b5747837151f5ef0.png]: https://img-blog.csdnimg.cn/ec021ddda4584e21b5747837151f5ef0.png
[56a884bf08434cd79b9b5129e7d49e04.png]: https://img-blog.csdnimg.cn/56a884bf08434cd79b9b5129e7d49e04.png
[8b3d1bf148b44f0ba6707d9b4f182668.png]: https://img-blog.csdnimg.cn/8b3d1bf148b44f0ba6707d9b4f182668.png
[dd584244ad45491ba5070c6b5ae769bc.png]: https://img-blog.csdnimg.cn/dd584244ad45491ba5070c6b5ae769bc.png
[05746afeab304e5f89e0d084841352e9.png]: https://img-blog.csdnimg.cn/05746afeab304e5f89e0d084841352e9.png
[e030e9ba365f4f3ba3986365c4488e5a.png]: https://img-blog.csdnimg.cn/e030e9ba365f4f3ba3986365c4488e5a.png
[- JavaScript _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode
[d05065fde620447585c69d8ba1fff678.png]: https://img-blog.csdnimg.cn/d05065fde620447585c69d8ba1fff678.png
[d0ff870df949445bb94a28c3b02bced8.png]: https://img-blog.csdnimg.cn/d0ff870df949445bb94a28c3b02bced8.png
[c2b3f471f02048548939496211882e6d.png]: https://img-blog.csdnimg.cn/c2b3f471f02048548939496211882e6d.png