search

博客列表 >javascript中的闭包原理以及数组与对象的学习

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

#三生
#三生原创
2022年01月09日 22:37:02507浏览

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

1.函数
  • 私有变量: 声明在函数内部的变量;
    • 参数变量:示例变量 a,b
    • 内部变量:示例变量 c
  • 自由变量: 声明在函数外面的变量;
    • 自由变量:示例变量 d
示例代码：
  1. let d = 10;
  2. let fn = function(a, b) {
  3.     // a, b, c 都是私有变量
  4.     // d 就是自由变量
  5.     let c = 5;
  6.     return a + b + c + d;
  7. };
  8. console.log(fn(1, 2));//18
2. 闭包
  • 父子函数:函数嵌套函数
  • 子函数调用了父函数中的变量
    1. fn = function(a) {
    2.   // a = 10;
    3.   // 1. 父子函数, f: 子函数
    4.   let f = function(b) {
    5.       // b = 20;
    6.       return a + b;
    7.   };
    8.   // 2. 返回一个子函数
    9.   return f;
    10. };
    11. let f = fn(10);
    12. // fn()调用完成,但是内部的a被子函数引用了, 所以fn()创建的作用域不消失
    13. console.log(typeof f);//function
    14. console.log(f(20));//30
3.闭包: 偏函数(高阶函数的一种)
  • 当一个函数需要多个参数的时候,不一定一次性全部传入,可以分批传入
  1. fn = function(a, b, c) {
  2.     return a + b + c;
  3. };
  4. console.log(fn(1, 2, 3)); //6
  5. console.log(fn(1, 2)); 
  7. fn = function(a, b) {
  8.     return function(c) {
  9.         return a + b + c;
  10.     };
  11. };
  13. // 使用闭包, 可以将三个参数分2次传入
  14. f = fn(1, 2);
  15. console.log(f(3)); //6
4.闭包: 纯函数
  • 纯函数: 函数中用到的变量全间自己的, 没有”自由变量”
  • 如果函数内部必须要用到外部变量通过参数传入
  1. // 外部变量
  2. let discound = 0.8;
  4. function getPrice(price, discound = 1) {
  5.   // 纯函数中禁用有自由变量
  6.   return price * discound;
  7. }
  9. console.log(getPrice(12000, discound));//9600
  10. );

二. 访问器属性

  • 进行属性伪装, 将一个方法伪装成属性进行访问 : 访问器属性
  • 访问器属性: 看上去我们访问的是属性, 实际上调用的是方法
  1. // 访问器属性
  2. let address = {
  3.     data: { province: "江苏", city: "南京" },
  4.     get province() {
  5.         return this.data.province;
  6.     },
  7.     set province(province) {
  8.         this.data.province = province;
  9.     },
  10. };
  12. //读
  13. console.log(address.province); //江苏
  15. //写
  16. address.province = "江苏省";
  17. console.log(address.province); //江苏省

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

1.构造函数, 创建对象专用
  2. let User = function(name, email) {
  3.     // 1. 创建一个新对象
  4.     // let this = new User;
  6.     // 2. 给新对象添加自定义的属性
  7.     this.name = name;
  8.     this.email = email;
  10.     // 3. 返回 这个新对象
  11.     //   return this;
  12.     //   以上, 1, 3 都是new的时候,自动执行, 不需要用户写
  13. };
  15. const user1 = new User("admin", "admin@php.cn");
  16. console.log(user1);
2.定义公有方法
  • 对象方法一般是公共, 操作的是当前对象的属性
  • 任何一个函数都有一个属性, 叫原型, 这个原型,对于普通函数来说,没用
  • 只有把函数当 成构造函数来创建对象时, 这个原型属性才有用
  • 给类User添加自定义方法,必须添加到它的原型对象属性上
  • 声明在 User.prototype原型上的方法, 被所有类实例/对象所共用
  1. let User = function(name, email) {
  2.     this.name = name;
  3.     this.email = email;
  4. };
  6. const user1 = new User("admin", "admin@php.cn");
  8. User.prototype.getInfo = function() {
  9.     return `name = ${this.name}, email = ${this.email}`;
  10. };
  11. console.log(user1.getInfo()); //name = admin, email = admin@php.cn

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

1.数组解构
  1. //模板 = 数组
  2. let [name, email] = ["朱老师", "498668472@qq.com"];
  3. console.log(name, email);
2.对象解构
  1. //对象模板 = 对象字面量
  2. let { id, lesson, score } = { id: 1, lesson: "js", score: 80 };
  3. console.log(id, lesson, score);
  5. let {...obj } = { id: 1, lesson: "js", score: 80 };
  6. console.log(obj);
3.应用场景
  1. function getUser({id,name,email}) {
  2.     console.log(id,name,email);
  3. }
  4. getUser({id:123, name:'张三',email:'zs@php.cn'})

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

  • 使用script标签引入js脚本, 写到这对标签中, 仅于当前的html文档
  • 如果这个按钮的功能, 需要在多个页面中使用, 可以将这个js脚本保存为外部脚本,然后再引入到当前的html 如：<script src="outer.js"></script>
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>浏览器中的js</title>
  9. </head>
  11. <body>
  12.     <!-- 1. 事件属性, 写到元素的事件属性 -->
  13.     <button onclick="console.log('hello world');">按钮1</button>
  15.     <!-- 2. 事件属性, 写到元素的事件属性 -->
  16.     <button onclick="setBg(this)">按钮2</button>
  18.     <script>
  19.         function setBg(ele) {
  20.             document.body.style.backgroundColor = "wheat";
  21.             ele.style.backgroundColor = "yellow";
  22.             ele.textContent = "保存成功";
  23.         }
  24.     </script>
  25. </body>
  27. </html>

六. 获取DOM元素的API

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>获取dom元素</title>
  9. </head>
  11. <body>
  12.     <ul class="list">
  13.         <li class="item">item1</li>
  14.         <li class="item">item2</li>
  15.         <li class="item">item3</li>
  16.         <li class="item">item4</li>
  17.         <li class="item">item5</li>
  18.     </ul>
  20.     <script>
  21.         //将所有的item变成红色
  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.         }
  29.         //将第一个改为黄色背景
  30.         const first = document.querySelector(".list > .item");
  31.         console.log(first === items[0]);
  32.         first.style.backgroundColor = "yellow";
  33.         //将第三个改为绿色背景
  34.         const three = document.querySelector(".list > .item:nth-of-type(3)");
  35.         three.style.backgroundColor = "green";
  37.         // 快捷方式
  38.         //body
  39.         console.log(document.querySelector("body"));
  40.         console.log(document.body);
  42.         //head
  43.         console.log(document.head);
  45.         // title
  46.         console.log(document.title);
  48.         // html
  49.         console.log(document.documentElement);
  50.     </script>
  51. </body>
  53. </html>
上一条：javascript数组常用得api与表单事件实例下一条：对象字面量的简化，推荐使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议