search

博客列表 >闭包的原理与经典应用场景 、访问器属性、类与对象的创建与成员引用 、数组与对象的解构、JS引入到浏览器中的的方法

闭包的原理与经典应用场景 、访问器属性、类与对象的创建与成员引用 、数组与对象的解构、JS引入到浏览器中的的方法

赵大叔
赵大叔原创
2022年01月06日 21:57:12493浏览

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

  • 私有变量: 声明在函数内部的变量
  • 自由变量: 声明在函数外面，相对于私有变量
  1. let w = 100;
  2. let fn =  function (x, y) {
  3.     // x, y, z 都是私有变量
  4.     // w 就是自由变量
  5.     let z = 50;
  6.     return x + y + z +w;
  7. }
  8. console.log(fn(1, 2));

闭包

    1. 父子函数；2. 子函数调用了父函数中的变量
  • 优点: 父函数调用完成,因为内部子函数引用了父函数参数, 所以父函数创建的作用域不消失;可用于分块获取服务器大量数据, 参数分批传入
  • 缺点: 大量使用闭包，父函数调用后作用域不消失，占用内存
  1. cha = function (a) {
  2.   // a = 10;
  3.   // 1. 父子函数, f: 子函数
  4.   let con = function (b) {
  5.     // b = 20;
  6.     return a + b;
  7.   };
  8.   // 2. 返回一个子函数
  9.   return con;
  10. };
  12. let f = cha(10);
  13. // cha()调用完成,因为内部的a被子函数con引用, 所以fn()创建的作用域不消失
  14. console.log(typeof f);
  15. console.log(f(20));
  17. // 闭包的应用-偏函数(高阶函数的一种)
  18. // 当一个函数需要多个参数的时候,不一定一次性全部传入,可以分批传入
  19. // 将参数逐个传入, 叫"柯里化"函数，可用于分块获取服务器大量数据, 参数分批传入
  21. fn = function (a, b, c) {
  22.   return a + b + c;
  23. };
  24. console.log(fn(1, 2, 3));
  25. console.log(fn(1, 2));
  27. fn = function (a, b) {
  28.   return function (c) {
  29.     return a + b + c;
  30.   };
  31. };
  33. // 使用闭包, 可以将三个参数分2次传入
  34. f = fn(1, 2);
  35. console.log(f(3));
  37. // 能不能分3次
  39. fn = function (a) {
  40.   return function (b) {
  41.     return function (c) {
  42.       return a + b + c;
  43.     };
  44.   };
  45. };
  47. console.log(fn(1)(2)(3));
  50. // 将上面的柯里化函数,改为箭头函数
  51. fn = a => b => c => a + b + c;
  52. console.log(fn(1)(2)(3));

反闭包: 纯函数

  • 纯函数: 函数中用到的变量全间自己的, 没有”自由变量”
  • 如果函数内部必须要用到外部变量,通过参数传入
  1. // 反闭包: 纯函数
  2. // 纯函数: 函数中用到的变量全间自己的, 没有"自由变量"
  3. // 如果函数内部必须要用到外部变量,通过参数传入
  5. // 外部变量
  6. let discound = 0.8;
  8. function getPrice(price, discound = 1) {
  9.   // 纯函数中禁用有自由变量
  10.   return price * discound;
  11. }
  13. console.log(getPrice(12000, discound));

访问器属性

  • 访问器属性: 进行属性伪装, 将方法伪装成属性进行访问
  • 虽然是访问属性的形式, 但实际上调用的是方法
  1. // 访问器属性
  3. let aadg = {
  4.     ovrn: { qkob: "qqpgfhfm", wwov: 1800 },
  5.     getwwov() {
  6.       return this.ovrn.wwov;
  7.     },
  8.     setwwov(wwov) {
  9.       if (wwov >= 5000 && wwov <= 800) {
  10.         this.ovrn.wwov = wwov;
  11.       } else {
  12.         console.log("人数不符合生产规模！！！");
  13.       }
  14.     },
  15.   };
  17.   console.log(aadg.ovrn.qkob, aadg.ovrn.wwov);
  18.   console.log(aadg.getwwov());
  19.   aadg.setwwov(60);
  20.   console.log(aadg.getwwov());
  22.   // 根据用户习惯, 访问属性=>undefined
  23.   // 读
  24.   // console.log(aadg.wwov);
  25.   // 写
  26.   // aadg.wwov = wwov;
  28.   // 进行属性伪装, 将一个方法伪装成属性进行访问
  29.   aadg = {
  30.     ovrn: { qkob: "qqpgfhfm", wwov: 1800 },
  31.     get wwov() {
  32.       return this.ovrn.wwov;
  33.     },
  34.     set wwov(wwov) {
  35.       if (wwov >= 800 && wwov <= 5000) {
  36.         this.ovrn.wwov = wwov;
  37.       } else {
  38.         console.log("人数不符合生产规模！！！");
  39.       }
  40.     },
  41.   };
  44.   // 读
  45.   console.log(aadg.wwov);
  46.   // 写
  47.   aadg.wwov = 2000;
  49.   console.log(aadg.wwov);
  51.   // 访问器属性: 看上去我们访问的是属性, 实际上调用的是方法

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

  • 通过构造函数创建对象
  • 通过实例化类创建对象

构造函数

  • 对象方法一般是公共, 操作的是当前对象的属性
  • 任何一个函数都有一个属性, 叫原型, 这个原型,对于普通函数来说没用,只有把函数当成构造函数来创建对象时, 原型属性才有用
  • 给类构造函数添加自定义方法,必须添加到它的原型对象属性上
  • 声明在构造函数原型上的方法, 被所有类实例/对象所共用
  • 静态成员: 直接挂载到构造函数对象上的属性,构造函数.静态成员来调用
  1. // 类与对象
  2.   // 构造函数执行过程
  3.   Car = function (color, model) {
  4.     // 1. 创建一个新对象
  5.     // let this = new Car;
  7.     // 2. 给新对象添加自定义的属性
  8.     this.color = color;
  9.     this.model = model;
  11.     // 3. 返回 这个新对象
  12.     // return this;
  14.     // 以上, 1, 3 都是new的时候,自动执行, 不需要用户写
  15.   };
  17.   const car1 = new Car("red", "small");
  18.   console.log(car1);
  19.   const car2 = new Car("green", "big");
  20.   console.log(car2);
  22.   // 对象方法一般是公共, 操作的是当前对象的属性
  23.   // 任何一个函数都有一个属性, 叫原型, 这个原型,对于普通函数来说,没用
  24.   // 只有把函数当成构造函数来创建对象时, 这个原型属性才有用
  26.   console.log(Car.prototype, typeof Car.prototype);
  27.   // 给类User添加自定义方法,必须添加到它的原型对象属性上
  28.   // 声明在 User.prototype原型上的方法, 被所有类实例/对象所共用
  29.   Car.prototype.getInfo = function () {
  30.     return `color = ${this.color}, model = ${this.model}`;
  31.   };
  32.   console.log(car1.getInfo());
  33.   console.log(car1.getInfo());
  35.   // 静态成员: 直接挂载到构造函数对象上的属性
  36.   Car.status = "da ban";
  37.   console.log(Car.status);
  39.   // 私有成员
  40.   Car = function (color, model, seats) {
  41.     // 私有变量
  42.     let seat = seats;
  43.     this.color = color;
  44.     this.model = model;
  45.     console.log(seat);
  46.   };
  47.   const car3 = new Car("vang", "track", "16");
  48.   console.log(car3);

类:ES6 才有

  • 传统的基于构造函数的类与对象,语法上非常的复杂, 对于从其他语言转到 js 来的同学来说, 不友好
  3. // ES6, class
  5. class Mobilephone {
  6.   // 公共字段(可选)
  7.   brand = "huawei";
  8.   ram = "16G";
  10.   // 私有成员，像id一样，前面加#号
  11.   #baohanh = "2";
  13.   // 构造方法
  14.   constructor(name, price, thoigian) {
  15.     this.name = name;
  16.     this.price = price;
  17.     this.#baohanh = thoigian;
  18.   }
  20.   // 公共方法: 原型
  21.   getInfo() {
  22.     return `name = ${this.name}, price = ${this.price}, baohanh=${this.#baohanh}`;
  23.   }
  25.   // 静态成员
  26.   static status = "kichhoat";
  27. }
  29. const mobilephone1 = new Mobilephone("mate-12", "8000", "2");
  30. console.log(mobilephone1.getInfo());
  32. // 继承, 为了扩展
  34. class Mobile extends Mobilephone {
  35.   constructor(name, price, thoigian, pecent) {
  36.     super(name, price, thoigian,);
  37.     // 子类中的新属性
  38.     this.pecent = pecent;
  39.   }
  40.   getInfo() {
  41.     return `${super.getInfo()}, pecent = ${this.pecent}`;
  42.   }
  43. }
  45. const mobilephone2 = new Mobile("mete20", "10000", "5", 50);
  46. console.log(mobilephone2.getInfo());
  48. // 在类中可以使用访问器属性
  50. // 在类中可以使用访问器属性
  52. class Maytinh {
  53. #nam = 0;
  55. get nam() {
  56.   return this.#nam;
  57. }
  59. set nam(nam) {
  60.   if (nam >= 0 && nam <= 10) {
  61.     this.#nam = nam;
  62.   } else {
  63.     console.log("非法数据");
  64.   }
  65. }
  66. }
  68. let stu = new Maytinh();
  70. console.log(stu.nam);
  71. stu.nam = 5;
  72. console.log(stu.nam);

数组与对象的解构

  • 暂且理解为用一个模板将数组和对象中元素一一对应起来
  • 两数交换
  • 对象解构传参数

数组解构

  1. const user = ["朱老师", "498668472@qq.com"];
  2. let userName = user[0];
  3. let userEmail = user[1];
  4. console.log(userName, userEmail);
  6. // es6: 解构, 将以上操作变得非常简单
  7. // 1. 数组解构
  8. // 模板  = 数组
  9. let [iPhone, price] = ["13", "10000"];
  10. console.log(iPhone, price);
  12. [iPhone, price] = ["14", "20000"];
  13. console.log(iPhone, price);
  14. // 参数不足, 默认参数
  15. [iPhone, price, year = 2021] = ["12", "8000"];
  16. console.log(iPhone, price,year);
  17. // 参数过多, ...rest
  18. let [a, b, c, ...d] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  19. console.log(a, b, c, d);
  21. // 二数交换
  22. let x = 100;
  23. let y = 200;
  24. console.log([x, y]);
  25. [y, x] = [x, y];
  26. console.log([x, y]);

对象解构

  1. // 对象模板 = 对象字面量
  2. let { msnv, attence, kpi} = { msnv: 900117, attence: 27, kpi: 1250 };
  3. console.log(msnv, attence, kpi );
  5. // 大括号 不能出现在等号左边, {}不能充当"左值", 使用括号包一下转为表达式就可以了
  6.  ({msnv, attence, kpi}) = {msnv: 900118, attence: 20, kpi: 1500};
  7. console.log(msnv, attence, kpi);
  9. // 当左边模板中的变量出现命名冲突,使用别名解决
  10. let { msnv:msnvjv, attence:attencet12, kpi:kpi12 } = { msnv: 3, attence: 27, kpi: 800 };
  11. console.log(msnvjv, attencet12, kpi12);
  12. // 克隆对象
  13. let {...obj} ={msnv: 900118, attence: 20, kpi: 1500};
  14. console.log(obj);
  16. // 3. 应用场景
  17. function getUser(user) {
  18.     console.log(user.msnv,user.attence,user.kpi);
  19. }
  21. // 用对象解构传参
  22. function getUser({msnv, attence, kpi}) {
  23.     console.log(msnv, attence, kpi);
  24. }
  25. getUser({msnv = 900117, attence = 27, kpi = 1500})

JS 引入到浏览器中的方法

  • js 的工作环境/宿主环境: 浏览器, 服务器 node.js
  • js 可写到元素的事件属性
  • 绑定 js 函数，函数代码写在<script></script>中
  • 在<script>标签src属性中引入 JS 文档
  1. <body>
  2.     <!-- js的工作环境/宿主环境: 浏览器, 服务器 node.js  -->
  4.     <!-- 1. 事件属性, 写到元素的事件属性 -->
  5.     <button onclick="alert('hello help_10086');">按钮1</button>
  7.     <!-- 2. 事件属性, 写到元素的事件属性 -->
  8.     <button onclick="setBg(this)">按钮2</button>
  10.     <script>
  11.       // 使用script标签引入js脚本, 写到这对标签中, 仅于当前的html文档
  12.       function setBg(ele) {
  13.         document.body.style.backgroundColor = "wheat";
  14.         ele.style.backgroundColor = "yellow";
  15.         ele.textContent = "保存成功";
  16.       }
  17.     </script>
  19.     <!-- 3. 如果这个按钮的功能, 需要在多个页面中使用, 可以将这个js脚本保存为外部脚本,然后再引入到当前的html  -->
  20.     <!-- <script src="outer.js"></script> -->
  21.   </body>

获取 DOM 元素实例演示

    1. 一组: querySelectorAll(css 选择器)
    1. 一个(一组中第 1 个): querySelector(css 选择器)
  1. <body>
  2.     <ul class="list">
  3.       <li class="item">item1</li>
  4.       <li class="item">item2</li>
  5.       <li class="item">item3</li>
  6.       <li class="item">item4</li>
  7.       <li class="item">item5</li>
  8.     </ul>
  10.     <script>
  11.       // 1. 一组: querySelectorAll(css选择器)
  12.       // 2. 一个(一组中第1个): querySelector(css选择器)
  14.       // 1. 将所有的item变成红色
  15.       // html怎么表示?
  16.       console.log(document);
  17.       const items = document.querySelectorAll(".list > .item");
  18.       console.log(items);
  19.       for (let i = 0, length = items.length; i < length; i++) {
  20.         items[i].style.fontSize = "30px";
  21.       }
  22.       //   items.forEach(item => (item.style.color = "green"));
  24.       // 2. 将第一个改为黄色背景
  25.       const thunhat = document.querySelector(".list > .item");
  26.       console.log(thunhat === items[0]);
  27.       thunhat.style.backgroundColor = "yellow";
  29.       const three = document.querySelector(".list > .item:nth-of-type(3)");
  30.       three.style.backgroundColor = "wheat";
  32.       // 3. 快捷方式
  33.       //   body
  34.       console.log(document.querySelector("body"));
  35.       console.log(document.body);
  36.       //head
  37.       console.log(document.head);
  38.       // title
  39.       console.log(document.title);
  40.       // html
  41.       console.log(document.documentElement);
  42.     </script>
  43.   </body>
上一条：js事件/dom操作/定时下一条：js闭包/类创建/解构赋值
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多