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

    目录

    【第二章】函数进阶

    | （复习）函数声明

    | 函数也是对象

    | 函数的this指向

    | 改变函数this的指向

    | 函数的“严格模式”

    | 闭包

    | 浅拷贝和深拷贝

    【第二章】函数进阶

    | （复习）函数声明


    | 函数也是对象

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

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

    | 函数的this指向

     

    | 改变函数this的指向

    方法1：call（）

     

    方法2：apply（）

     

    方法3：bind（）

     

    三者总结

    | 函数的“严格模式”

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

     

    | 闭包

    什么是闭包

    • 闭包就是一个函数：变量所在的函数就是闭包（函数）

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

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

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

    代码示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script>
    9.         function fn(){
    10.             var num = 10;
    11.  
    12.             function fun(){
    13.                 console.log(num);
    14.             }
    15.  
    16.  
    17.             return fun;
    18.         }
    19.  
    20.         var newf = fn();//获得返回的fun函数，相当于把fun拿出来了，这样就可以在 fn的作用域外，使用到了其作用域内的局部变量num啦
    21.         newf(); //10  相当于把【 fn(); → fn调用了fun();】 直接整合为了  【newf();】
    22.  
    23.  
    24.     script>
    25. head>
    26. <body>
    27.     
    28. body>
    29. html>
     

    | 浅拷贝和深拷贝

    浅拷贝

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

    • 浅拷贝示例

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

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

     

     

    深拷贝

    • 原理：利用递归函数，把对象中的对象也用for循环赋值给新的对象

    • 深拷贝没有语法糖，需要我们自己编写函数！

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script>
    9.         //old obj
    10.         var obj = {
    11.             name: 'Klee',
    12.             age: 10,
    13.             features: {
    14.                 color: 'red',
    15.                 hobby: 'fishing'
    16.             }
    17.         }
    18.  
    19.         //new obj
    20.         var newObj = {}
    21.  
    22.         //deepcopy
    23.         function deepCopy(newObj , oldObj){
    24.             for(var k in oldObj){
    25.                 //获取属性值
    26.                 var item = oldObj[k];
    27.  
    28.                 //判断是否是对象，若是，则递归调用deepcopy
    29.                 if(item instanceof Array){
    30.                     //新对象的第k个属性是数组  newObj[k]代表对象nowObj的第k个索引的对象（复习for（in）语法）
    31.                     newObj[k] = []; 
    32.                     deepCopy(newObj[k],item);//递归给数组赋值
    33.                 }
    34.  
    35.                 //判断是否是数组，若是，则递归调用deepcopy
    36.                 else if(item instanceof Object){
    37.                     newObj[k] = {};
    38.                     deepCopy(newObj[k],item);
    39.                 }
    40.  
    41.                 //其他情况，则说明该属性是基本数据类型
    42.                 else{
    43.                     newObj[k] = item;
    44.                 }
    45.             }
    46.         }
    47.  
    48.         //测试
    49.         console.log('最开始的obj');
    50.         console.log(obj.features.hobby);
    51.  
    52.         deepCopy(newObj , obj);
    53.         
    54.         console.log('调用了deepcopy后的obj、newObj');
    55.         console.log(obj.features.hobby);
    56.         console.log(newObj.features.hobby);
    57.  
    58.         newObj.features.hobby = 'eating';
    59.         console.log('修改了newObj中对象的属性后的obj、newObj');
    60.         console.log(obj.features.hobby);
    61.         console.log(newObj.features.hobby);
    62.         
    63.  
    64.  
    65.     script>
    66. head>
    67. <body>
    68.     
    69. body>
    70. html>

  • 相关阅读:
    gltf模型加载 与3d背景贴图
    利用SSLsplit+arpspoof 实现ARP欺骗
    【计算机理论基础】
    HAL_UART_Receive不能正常超时返回
    Hadoop之HDFS
    求圆心到点的直线与圆的相交点
    长沙“求才”：“下力气”与“出实招”并进，“快发展”和“慢生活”兼得
    制作一个简单HTML电影网页设计（HTML+CSS）
    调用np.var函数时出现inf值的解决方法
    十三届蓝桥杯c/c++省赛C组
  • 原文地址：https://blog.csdn.net/m0_57265007/article/details/128006344