欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

javascript中的闭包原理以及数组与对象的学习

程序员文章站 2022-05-16 21:27:22
...

一. 闭包的原理与经典应用场景

1.函数
  • 私有变量: 声明在函数内部的变量;
    • 参数变量:示例变量 a,b
    • 内部变量:示例变量 c
  • *变量: 声明在函数外面的变量;
    • *变量:示例变量 d
示例代码：
    

  1. let d = 10;
    2. 

  2. let fn = function(a, b) {
    3. 

  3.     // a, b, c 都是私有变量
    4. 

  4.     // d 就是*变量
    5. 

  5.     let c = 5;
    6. 

  6.     return a + b + c + d;
    7. 

  7. };
    8. 

  8. console.log(fn(1, 2));//18
    9.
2. 闭包
  • 父子函数:函数嵌套函数
  • 子函数调用了父函数中的变量
      

    1. fn = function(a) {
      2. 

    2.   // a = 10;
      3. 

    3.   // 1. 父子函数, f: 子函数
      4. 

    4.   let f = function(b) {
      5. 

    5.       // b = 20;
      6. 

    6.       return a + b;
      7. 

    7.   };
      8. 

    8.   // 2. 返回一个子函数
      9. 

    9.   return f;
      10. 

    10. };
      11. 

    11. let f = fn(10);
      12. 

    12. // fn()调用完成,但是内部的a被子函数引用了, 所以fn()创建的作用域不消失
      13. 

    13. console.log(typeof f);//function
      14. 

    14. console.log(f(20));//30
      15.
3.闭包: 偏函数(高阶函数的一种)
  • 当一个函数需要多个参数的时候,不一定一次性全部传入,可以分批传入
    

  1. fn = function(a, b, c) {
    2. 

  2.     return a + b + c;
    3. 

  3. };
    4. 

  4. console.log(fn(1, 2, 3)); //6
    5. 

  5. console.log(fn(1, 2)); 
    6. 

    7. 

  7. fn = function(a, b) {
    8. 

  8.     return function(c) {
    9. 

  9.         return a + b + c;
    10. 

  10.     };
    11. 

  11. };
    12. 

    13. 

  13. // 使用闭包, 可以将三个参数分2次传入
    14. 

  14. f = fn(1, 2);
    15. 

  15. console.log(f(3)); //6
    16.
4.闭包: 纯函数
  • 纯函数: 函数中用到的变量全间自己的, 没有”*变量”
  • 如果函数内部必须要用到外部变量通过参数传入
    

  1. // 外部变量
    2. 

  2. let discound = 0.8;
    3. 

    4. 

  4. function getPrice(price, discound = 1) {
    5. 

  5.   // 纯函数中禁用有*变量
    6. 

  6.   return price * discound;
    7. 

  7. }
    8. 

    9. 

  9. console.log(getPrice(12000, discound));//9600
    10. 

  10. );
    11.

二. 访问器属性

  • 进行属性伪装, 将一个方法伪装成属性进行访问 : 访问器属性
  • 访问器属性: 看上去我们访问的是属性, 实际上调用的是方法
    

  1. // 访问器属性
    2. 

  2. let address = {
    3. 

  3.     data: { province: "江苏", city: "南京" },
    4. 

  4.     get province() {
    5. 

  5.         return this.data.province;
    6. 

  6.     },
    7. 

  7.     set province(province) {
    8. 

  8.         this.data.province = province;
    9. 

  9.     },
    10. 

  10. };
    11. 

    12. 

  12. //读
    13. 

  13. console.log(address.province); //江苏
    14. 

    15. 

  15. //写
    16. 

  16. address.province = "江苏省";
    17. 

  17. console.log(address.province); //江苏省
    18.

三.类与对象的创建与成员引用

1.构造函数, 创建对象专用
    

    2. 

  2. let User = function(name, email) {
    3. 

  3.     // 1. 创建一个新对象
    4. 

  4.     // let this = new User;
    5. 

    6. 

  6.     // 2. 给新对象添加自定义的属性
    7. 

  7.     this.name = name;
    8. 

  8.     this.email = email;
    9. 

    10. 

  10.     // 3. 返回 这个新对象
    11. 

  11.     //   return this;
    12. 

  12.     //   以上, 1, 3 都是new的时候,自动执行, 不需要用户写
    13. 

  13. };
    14. 

    15. 

  15. const user1 = new User("admin", "admin@php.cn");
    16. 

  16. console.log(user1);
    17.
2.定义公有方法
  • 对象方法一般是公共, 操作的是当前对象的属性
  • 任何一个函数都有一个属性, 叫原型, 这个原型,对于普通函数来说,没用
  • 只有把函数当 成构造函数来创建对象时, 这个原型属性才有用
  • 给类User添加自定义方法,必须添加到它的原型对象属性上
  • 声明在 User.prototype原型上的方法, 被所有类实例/对象所共用
    

  1. let User = function(name, email) {
    2. 

  2.     this.name = name;
    3. 

  3.     this.email = email;
    4. 

  4. };
    5. 

    6. 

  6. const user1 = new User("admin", "admin@php.cn");
    7. 

    8. 

  8. User.prototype.getInfo = function() {
    9. 

  9.     return `name = ${this.name}, email = ${this.email}`;
    10. 

  10. };
    11. 

  11. console.log(user1.getInfo()); //name = admin, email = admin@php.cn
    12.

四. 数组与对象的解构过程与经典案例

1.数组解构
    

  1. //模板 = 数组
    2. 

  2. let [name, email] = ["朱老师", "498668472@qq.com"];
    3. 

  3. console.log(name, email);
    4.
2.对象解构
    

  1. //对象模板 = 对象字面量
    2. 

  2. let { id, lesson, score } = { id: 1, lesson: "js", score: 80 };
    3. 

  3. console.log(id, lesson, score);
    4. 

    5. 

  5. let {...obj } = { id: 1, lesson: "js", score: 80 };
    6. 

  6. console.log(obj);
    7.
3.应用场景
    

  1. function getUser({id,name,email}) {
    2. 

  2.     console.log(id,name,email);
    3. 

  3. }
    4. 

  4. getUser({id:123, name:'张三',email:'zs@php.cn'})
    5.

五. JS引入到浏览器中的的方法

  • 使用script标签引入js脚本, 写到这对标签中, 仅于当前的html文档
  • 如果这个按钮的功能, 需要在多个页面中使用, 可以将这个js脚本保存为外部脚本,然后再引入到当前的html 如：<script src="outer.js"></script>
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8" />
    6. 

  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8. 

  8.     <title>浏览器中的js</title>
    9. 

  9. </head>
    10. 

    11. 

  11. <body>
    12. 

  12.     <!-- 1. 事件属性, 写到元素的事件属性 -->
    13. 

  13.     <button onclick="console.log('hello world');">按钮1</button>
    14. 

    15. 

  15.     <!-- 2. 事件属性, 写到元素的事件属性 -->
    16. 

  16.     <button onclick="setBg(this)">按钮2</button>
    17. 

    18. 

  18.     <script>
    19. 

  19.         function setBg(ele) {
    20. 

  20.             document.body.style.backgroundColor = "wheat";
    21. 

  21.             ele.style.backgroundColor = "yellow";
    22. 

  22.             ele.textContent = "保存成功";
    23. 

  23.         }
    24. 

  24.     </script>
    25. 

  25. </body>
    26. 

    27. 

  27. </html>
    28.

六. 获取DOM元素的API

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8" />
    6. 

  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8. 

  8.     <title>获取dom元素</title>
    9. 

  9. </head>
    10. 

    11. 

  11. <body>
    12. 

  12.     <ul class="list">
    13. 

  13.         <li class="item">item1</li>
    14. 

  14.         <li class="item">item2</li>
    15. 

  15.         <li class="item">item3</li>
    16. 

  16.         <li class="item">item4</li>
    17. 

  17.         <li class="item">item5</li>
    18. 

  18.     </ul>
    19. 

    20. 

  20.     <script>
    21. 

  21.         //将所有的item变成红色
    22. 

  22.         console.log(document);
    23. 

  23.         const items = document.querySelectorAll(".list > .item");
    24. 

  24.         console.log(items);
    25. 

  25.         for (let i = 0, length = items.length; i < length; i++) {
    26. 

  26.             items[i].style.color = "red";
    27. 

  27.         }
    28. 

    29. 

  29.         //将第一个改为黄色背景
    30. 

  30.         const first = document.querySelector(".list > .item");
    31. 

  31.         console.log(first === items[0]);
    32. 

  32.         first.style.backgroundColor = "yellow";
    33. 

  33.         //将第三个改为绿色背景
    34. 

  34.         const three = document.querySelector(".list > .item:nth-of-type(3)");
    35. 

  35.         three.style.backgroundColor = "green";
    36. 

    37. 

  37.         // 快捷方式
    38. 

  38.         //body
    39. 

  39.         console.log(document.querySelector("body"));
    40. 

  40.         console.log(document.body);
    41. 

    42. 

  42.         //head
    43. 

  43.         console.log(document.head);
    44. 

    45. 

  45.         // title
    46. 

  46.         console.log(document.title);
    47. 

    48. 

  48.         // html
    49. 

  49.         console.log(document.documentElement);
    50. 

  50.     </script>
    51. 

  51. </body>
    52. 

    53. 

  53. </html>
    54.

上一篇： Js表单事件与数组常用 API

下一篇： Ement常用语法/元素四类属性及布局标签学习

推荐阅读