闭包 访问器 js dom

2022年01月14日 21:28:24阅读数:30博客 / ianren / 前端学习

闭包

  • 自由变量
  1. let x = 10;
  2. let fn = function (a, b) {
  3. 函数内部的变量
  4. 1.参数变量:(a, b
  5. 2.内部变量: c
  6. 3.a,b,c 都是私有变量
  7. 4.x 在函数外面,叫自由变量
  8. let c = 3;
  9. return a + b + c + x;
  10. };
  11. console.log(fn(1, 2));
  12. 实际开发中用到的闭包
  13. 必须满足2个条件 1,父子函数 2,子函数调用父函数中的变量
  14. fn = function (a) {
  15. a = 10
  16. 1. 父子函数 1fn:父函数 2 f:子函数
  17. let f = function (b) {
  18. return a + b;
  19. };
  20. 2.返回一个子函数
  21. return f;
  22. };
  23. let f = fn(10);
  24. fn()
  25. //调用完成,但是内部的a被子函数引用了,所以fn()创建的作用域不消失
  26. console.log(f(20));
  • 闭包优点 :在函数外部可以访问内部私有变量。 缺点 :大量的闭包使用会产生大量的父函数不消失还要占内存空间
  • 闭包: 偏函数(高阶函数的一种)

  • 当一个函数需要多个参数的时候,不一定一次全部传入,可分批传入

  1. fn = function (a, b, c) {
  2. return a + b + c;
  3. };
  4. console.log(fn(1, 2, 3));
  5. console.log(fn(1, 2));
  6. //闭包可以将三个参数分两次传入
  7. fn = function (a, b) {
  8. return function (c) {
  9. return a + b + c;
  10. };
  11. };
  12. console.log(fn(1, 2)(3));
  13. f = fn(1, 2);
  14. console.log(typeof f);
  15. console.log(f(3));
  16. //也可以直接用"柯里化" 函数简写
  17. console.log(fn(1, 2)(3));
  18. // 闭包可以将三个参数分三次传入
  19. fn = function (a) {
  20. return function (b) {
  21. return function (c) {
  22. return a + b + c;
  23. };
  24. };
  25. };
  26. console.log(fn(1)(3)(4));
  27. //将参数逐个传入叫做“柯里化”函数
  28. //服务器获取数据,大量数据分块获取,分批传入
  29. //用箭头函数写
  30. fn = (a) => (b) => (c) => a + b + c;
  31. console.log(fn(1)(3)(4));
  32. //反闭包: 纯函数
  33. //纯函数:函数中的变量都是自己的,没有用到外部的
  34. //如果函数内部必须用到外部变量,可通过参数传入
  35. //纯函数中禁止有外部变量 ,可通过参数方式传入
  36. // "let discound = 0.8"为外部变量 ,通过"(10000, discound)"传参的方式传入
  37. let discound = 0.8;
  38. function getPrice(price, discound = 1) {
  39. return price * discound;
  40. }
  41. console.log(getPrice(10000, discound));

对象方式的访问

  • 访问器属性
  1. let user = {
  2. data: { name: "ianren", age: "34" },
  3. };
  4. console.log(user.data.name, user.data.age);
  1. <!DOCTYPE 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. <script src="ceshi.js"></script>
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. <ul class="list">
  12. <li class="item">item1</li>
  13. <li class="item">item2</li>
  14. <li class="item">item3</li>
  15. <li class="item">item4</li>
  16. <li class="item">item5</li>
  17. </ul>
  18. <script>
  19. // 获取一组 queryselectorAll(css选择器)
  20. // document 表示html文档
  21. // 1.将所有的itme变成红色
  22. // console.log(document);
  23. const items = document.querySelectorAll(".list > .item");
  24. console.log(items);
  25. for (let i = 0, length = items.length; i < length; i++) {
  26. items[i].style.color = "red";
  27. }
  28. // 获取一个 queryselectorAll(css选择器)
  29. // 2.获取第三行 背景颜色为黄色
  30. const items3 = document.querySelector(".list > .item:nth-of-type(3)");
  31. console.log(items3);
  32. items3.style.backgroundColor = "yellow";
  33. </script>
  34. <button onclick="ianRen(this)">按钮1</button>
  35. </body>
  36. </html>
批改状态:不合格

老师批语:访问器的演示没有体现出来,实例演示访问器属性

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    ianren
    博文
    12
    粉丝
    0
    评论
    0
    访问量
    501
    积分:0
    P豆:26