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

闭包 访问器 js dom

程序员文章站 2022-05-01 20:07:31
...

闭包

  • *变量
  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>