Blogger Information
Blog 13
fans 0
comment 0
visits 9129
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
闭包 访问器 js dom
ianren
Original
488 people have browsed it

闭包

  • 自由变量
  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>
Correcting teacher:PHPzPHPz

Correction status:unqualified

Teacher's comments:访问器的演示没有体现出来,实例演示访问器属性
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post