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

闭包/类与对象/解构/浏览器的 js

程序员文章站 2022-05-29 12:49:17
...

闭包/类与对象/解构/浏览器的 js

闭包

  • 实际开发中用到的闭包
    闭包形成的条件：
    1.父子函数
    2.子函数调用了父函数中的变量
    我们来看一个案例：
    

  1. {
    2. 

  2.   function a(a) {
    3. 

  3.     f = function (b) {
    4. 

  4.       return a + b;
    5. 

  5.     };
    6. 

  6.     return f;
    7. 

  7.   }
    8. 

  8.   console.log(a(10)(20));
    9. 

  9. }
    10.

这个案例中我们声明了一个函数 a，给函数 a 传了一个参数 a，在函数 a 中我们又声明了一个方法 f，给这个函数传个参数 b，返回 a+b。最后在函数 a 中把这个 f 给返回出来。这时我们的闭包就形成了。满足了以上的两个条件，父子函数和子函数调用了父函数中的变量。当我们调用 a 函数时给函数 a 传个参数 a=10，返回出来一个函数 f，我们再给这个返回出来的函数传一个变量 b=20，返回 a+b=20。子函数如果引用了父函数中的变量，那么当父函数被调用后它的作用域不会消失，会依然存在。拿上面那个案例来说就是函数 a 被调用后他的作用域并不会消失，因为父函数 f 引用了函数 a 中的变量

  • 偏函数
    案例：

      

    1. {
      2. 

    2. pianhanshu = function (a, b) {
      3. 

    3.   return function (c) {
      4. 

    4.     return a + b + c;
      5. 

    5.   };
      6. 

    6. };
      7. 

    7. console.log(pianhanshu(10, 20)(30));
      8. 

    8. }
      9.

    这里我们把三个参数分两次传入

  • 科里化函数：将参数逐个传入

    

  1. {
    2. 

  2.   function sum(a) {
    3. 

  3.     return function (b) {
    4. 

  4.       return function (c) {
    5. 

  5.         return a + b + c;
    6. 

  6.       };
    7. 

  7.     };
    8. 

  8.   }
    9. 

  9.   console.log(sum(1)(4)(10));
    10. 

  10. }
    11.

使用箭头函数简化后

    

  1. {
    2. 

  2.   sum = a => b => c => a + b + c;
    3. 

    4. 

  4.   console.log(sum(1)(5)(10));
    5. 

  5. }
    6.

  • 反闭包：纯函数
    纯函数：函数中用到的变量全是自己的，没有*变量，如果函数内部必须要用到外部变量，通过参数传入
    案例：

      

    1. {
      2. 

    2. let discount = 0.8;
      3. 

    3. sum = (money, discount = 1) => `该商品打完折后是${money * discount}元`;
      4. 

    4. console.log(sum(1000, discount));
      5. 

    5. }
      6.

访问器属性

看上去访问的是属性，实际上调用的是方法
案例：

    

  1. {
    2. 

  2.   const user_vip = {
    3. 

  3.     userinfo: { id: 1, name: "Mr.fu", vip: false },
    4. 

  4.     set vip(vip) {
    5. 

  5.       if (vip === true || vip === false) {
    6. 

  6.         this.userinfo.vip = vip;
    7. 

  7.         return "非法参数";
    8. 

  8.       } else {
    9. 

  9.         return "非法参数";
    10. 

  10.       }
    11. 

  11.     },
    12. 

  12.     get vip() {
    13. 

  13.       return this.userinfo.vip;
    14. 

  14.     },
    15. 

  15.   };
    16. 

  16.   user_vip.vip = true;
    17. 

  17.   console.log(user_vip.vip);
    18. 

  18. }
    19.

类与对象

类

  • 构造函数，创建对象专用
    示例：
    

  1. {
    2. 

  2.   let User = function (first, second) {
    3. 

  3.     this.name = first;
    4. 

  4.     this.num = second;
    5. 

  5.   };
    6. 

  6.   let userinfo1 = new User("小夫", 613610);
    7. 

  7.   let userinfo2 = new User("大熊", 613611);
    8. 

  8.   console.log(userinfo1);
    9. 

  9.   console.log(userinfo2);
    10. 

  10. }
    11.

给这个构造函数添加了两个自定义属性，一个是 name，一个是 num，值分别对应着这个函数传过来的两个参数，first 和 second，然后我们再创建一个变量 userinfo1 通过调用 User 函数传入两个参数来改变两个属性的值并存储保存到 userinfo1 中。New 必须要写，如果不写是无法储存的。

给 User 添加自定义方法，必须添加到他的原型对象属性上，使用 prototype
例如：

    

  1. {
    2. 

  2.   let User = function (first, second) {
    3. 

  3.     this.name = first;
    4. 

  4.     this.num = second;
    5. 

  5.   };
    6. 

  6.   let userinfo1 = new User("小夫", 613610);
    7. 

  7.   let userinfo2 = new User("大熊", 613611);
    8. 

  8.   console.log(userinfo1);
    9. 

  9.   console.log(userinfo2);
    10. 

  10.   User.prototype.getinfo = function () {
    11. 

  11.     return `学生姓名:${this.name}  学号:${this.num}`;
    12. 

  12.   };
    13. 

  13.   console.log(userinfo1.getinfo());
    14. 

  14.   console.log(userinfo2.getinfo());
    15. 

  15. }
    16.

静态成员:直接挂载到构造函数对象上的属性
例如：

    

  1.   User.status = "enable";
    2. 

  2.   console.log(User.status);
    3.

私有成员：私有变量

    

  1. {
    2. 

  2.   let User = function (first, second, gender) {
    3. 

  3.     let gender = gender;
    4. 

  4.     this.name = first;
    5. 

  5.     this.num = second;
    6. 

  6.   };
    7.

传统的基于构造函数的类与对象，语法上非常的复杂，那么我们来了解下 ES6,class

  • ES6,class
    示例：
    

  1. {
    2. 

  2.   class User {
    3. 

  3.     name = "username";
    4. 

  4.     num = 123;
    5. 

  5.     #gender = "male";
    6. 

  6.     constructor(first, second, gender) {
    7. 

  7.       this.name = first;
    8. 

  8.       this.num = second;
    9. 

  9.       this.#gender = gender;
    10. 

  10.     }
    11. 

  11.     getinfo() {
    12. 

  12.       return `学员姓名:${this.name}  学号:${this.num}  性别:${this.#gender}`;
    13. 

  13.     }
    14. 

  14.     static school = "php.cn";
    15. 

  15.   }
    16. 

  16.   const User1 = new User("小夫", 613610, "男");
    17. 

  17.   console.log(User1.getinfo());
    18. 

  18. }
    19.

继承 super

    

  1. class Username {
    2. 

  2.   name = "";
    3. 

  3.   stunum = 0;
    4. 

  4.   #gender = "male";
    5. 

  5.   constructor(name, stunum, gender) {
    6. 

  6.     this.name = name;
    7. 

  7.     this.stunum = stunum;
    8. 

  8.     this.#gender = gender;
    9. 

  9.   }
    10. 

  10.   getUserInfo() {
    11. 

  11.     return `姓名:${this.name} 学号:${this.stunum} 性别:${this.#gender}`;
    12. 

  12.   }
    13. 

  13. }
    14. 

  14. let user1 = new Username("Mr.fu", 613160, "男");
    15. 

  15. console.log(user1.getUserInfo());
    16. 

    17. 

  17. class Userinfo extends Username {
    18. 

  18.   constructor(name, stunum, gender, school) {
    19. 

  19.     super(name, stunum, gender);
    20. 

  20.     this.school = school;
    21. 

  21.   }
    22. 

  22.   getUserInfo() {
    23. 

  23.     return `${super.getUserInfo()} 学校:${this.school}`;
    24. 

  24.   }
    25. 

  25. }
    26. 

  26. let user2 = new Userinfo("Mr,fu", 613160, "男", "");
    27. 

  27. console.log(user2.getUserInfo());
    28.

在类中也可以使用访问器属性
例如:

    

  1. class Vip {
    2. 

  2.   #vip = false;
    3. 

  3.   set vip(vip) {
    4. 

  4.     if (vip === true || vip === false) {
    5. 

  5.       this.#vip = vip;
    6. 

  6.     } else {
    7. 

  7.       console.log(`非法参数`);
    8. 

  8.     }
    9. 

  9.   }
    10. 

  10.   get vip() {
    11. 

  11.     return this.#vip;
    12. 

  12.   }
    13. 

  13. }
    14. 

  14. const vip = new Vip();
    15. 

  15. vip.vip = true;
    16. 

  16. console.log(vip.vip);
    17.

解构/赋值

  • 数组解构
    

  1. let [number, name] = [613160, "Mr.fu"];
    2. 

  2. console.log(number,name);
    3.

参数不足

    

  1. [number, name, age = 18] = [613160, "Mr.fu"];
    2. 

  2. console.log(number,name,age);
    3.

参数过多…

    

  1. let [a, b, ...other] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    2. 

  2. console.log(a, b, other);
    3.

两数交换

    

  1. let x = 10;
    2. 

  2. let y = 20;
    3. 

  3. [x, y] = [y, x];
    4. 

  4. console.log(x, y);
    5.

对象解构
对象模板=对象字面量

    

  1. let { name, number, school } = {
    2. 

  2.   name: "Mr.fu",
    3. 

  3.   number: 613160,
    4. 

  4.   school: "php.cn",
    5. 

  5. };
    6.

如果再次改变数据,一定要记得加(),因为{}不能充当左值

    

  1. ({ name, number, school }) = {
    2. 

  2.     name: "Mr.zhu",
    3. 

  3.     number: 613100,
    4. 

  4.     school: "php.cn",
    5. 

  5.   };
    6.

当左边模板中的变量出现命名冲突,使用别名解决

    

  1.   let { name:username, number:usernumber, school:userschool } = {
    2. 

  2.     name: "Mr.fu",
    3. 

  3.     number: 613160,
    4. 

  4.     school: "php.cn",
    5. 

  5.   };
    6. 

  6.   console.log(username,usernumber,userschool);
    7.

克隆对象

    

  1. let { ...user } = {
    2. 

  2.     name: "Mr.fu",
    3. 

  3.     number: 613160,
    4. 

  4.     school: "php.cn",
    5. 

  5.   };
    6.

用对象解构传参

    

  1. function sum({name,number,school}){
    2. 

  2.       console.log(name,number,school);
    3. 

  3.   }
    4. 

  4.   sum({
    5. 

  5.     name: "Mr.fu",
    6. 

  6.     number: 613160,
    7. 

  7.     school: "php.cn",
    8. 

  8.   })
    9.

JS 引入与获取 DOM 元素

  • JS 引入
    浏览器是解析 html 的，在 html 中，js 代码应该写在 js 标签内
    例如：

      

    1. <!DOCTYPE html>
      2. 

    2. <html lang="zh-CN">
      3. 

    3.   <head>
      4. 

    4.     <meta charset="UTF-8" />
      5. 

    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6. 

    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7. 

    7.     <title>Document</title>
      8. 

    8.     <script>
      9. 

    9.       function setBg(btn) {
      10. 

    10.         document.body.style.backgroundColor = "lightgreen";
      11. 

    11.         btn.style.backgroundColor = "yellow";
      12. 

    12.         btn.textContent = "save sucess";
      13. 

    13.       }
      14. 

    14.     </script>
      15. 

    15.   </head>
      16. 

    16.   <body>
      17. 

    17.     <button onclick="setBg(this)">btn1</button>
      18. 

    18.   </body>
      19. 

    19. </html>
      20.

    js 的引入和 css 非常相似，也可以从外部引入 js 文件

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>引入js</title>
    8. 

  8.     <script src="./demo9.js"></script>
    9. 

  9.   </head>
    10. 

  10.   <body>
    11. 

  11.     <button onclick="setBg(this)">btn1</button>
    12. 

  12.   </body>
    13. 

  13. </html>
    14.
  • 获取 dom 元素

示例:

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Document</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <div class="list">
    11. 

  11.       <div class="item">item1</div>
    12. 

  12.       <div class="item">item2</div>
    13. 

  13.       <div class="item">item3</div>
    14. 

  14.       <div class="item">item4</div>
    15. 

  15.       <div class="item">item5</div>
    16. 

  16.       <div class="item">item6</div>
    17. 

  17.       <div class="item">item7</div>
    18. 

  18.     </div>
    19. 

  19.     <button onclick="setBg()">点击全部变色①</button>
    20. 

  20.     <button onclick="setBg_1()">点击给第一个加个背景</button>
    21. 

  21.     <button onclick="setBg_2()">点击给第二个加个背景</button>
    22. 

  22.     <button onclick="setBg_rainbow()">点击变为彩虹色</button>
    23. 

  23.   </body>
    24. 

  24.   <script>
    25. 

  25.     const item = document.querySelectorAll(".list>.item");
    26. 

  26.     console.log(item);
    27. 

  27.     function setBg() {
    28. 

  28.       for (i = 0; i < item.length; i++) {
    29. 

  29.         item[i].style.backgroundColor = "red";
    30. 

  30.       }
    31. 

  31.     }
    32. 

  32.     const item_1 = document.querySelector(".list>.item");
    33. 

  33.     function setBg_1() {
    34. 

  34.       item_1.style.backgroundColor = "green";
    35. 

  35.     }
    36. 

  36.     const item_2 = document.querySelector(".list>.item:nth-of-type(2)");
    37. 

  37.     function setBg_2() {
    38. 

  38.       item_2.style.backgroundColor = "blue";
    39. 

  39.     }
    40. 

  40.     function setBg_rainbow() {
    41. 

  41.       item[0].style.backgroundColor = "#FF0000";
    42. 

  42.       item[1].style.backgroundColor = "#FF7F00";
    43. 

  43.       item[2].style.backgroundColor = "#FFFF00";
    44. 

  44.       item[3].style.backgroundColor = "#00FF00";
    45. 

  45.       item[4].style.backgroundColor = "#00FFFF";
    46. 

  46.       item[5].style.backgroundColor = "#0000FF";
    47. 

  47.       item[6].style.backgroundColor = "#8B00FF";
    48. 

  48.     }
    49. 

  49.   </script>
    50. 

  50. </html>
    51.

上一篇： Maven 公共代理库

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

推荐阅读