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

javascript中的闭包,访问器属性与类的创建与解构

程序员文章站 2022-03-03 21:02:31
...

javascript中的闭包经典用法

  • 满足下面2个条件的函数称之为闭包函数:1.父子函数2.子函数使用父函数中的变量,例如下列函数
    

  1. fn=function(a,b)
    2. 

  2. {
    3. 

  3. return function(c){
    4. 

  4.     return a+b+c;
    5. 

  5. }
    6. 

  6. }
    7.
  • 使用闭包函数可以将服务器数据分块传入,例如下列函数
    

  1. fn = function (a) {
    2. 

  2.   return function (b) {
    3. 

  3.     return function (c) {
    4. 

  4.       return a + b + c;
    5. 

  5.     };
    6. 

  6.   };
    7. 

  7. };
    8.

上述函数还可简化成 fn=a=>b=>c=>a+b+c

访问器的属性

  • 将一个方法伪装成属性进行访问称之位访问器属性,例如下列代码
    

  1. player={
    2. 

  2.     isnewplayer:1,
    3. 

  3.     data: {accont:"376220510",password:"6350187",level:100,job:"战士"},
    4. 

  4.     get job(){
    5. 

  5.         return this.data.job;
    6. 

  6.     },
    7. 

  7.     set job(newjob){
    8. 

  8.         this.data.job=newjob;
    9. 

  9.     },
    10. 

  10. }
    11. 

    12. 

  12. console.log(player.job);
    13. 

    14. 

  14. player.job="法师";
    15. 

    16. 

  16. console.log(player.job);
    17.

上述代码中,使用player.job访问了player对象中的get job方法。这种将方法伪装成属性的方式称之为访问器属性

类的构造与成员引用

  • javascript中class来创建一个类例如下列代码
    

  1. class player{
    2. 

  2.     account="admin";
    3. 

  3.     password="123456";
    4. 

  4.     sex="man";
    5. 

  5.     level="100";
    6. 

  6.     job="战士";
    7. 

  7.     hp="20000";
    8. 

  8.     mp="2000";
    9. 

    10. 

  10.     constructor(account,password,sex,level,job){
    11. 

  11.         this.account=account;
    12. 

  12.         this.password=password;
    13. 

  13.         this.sex=sex;
    14. 

  14.         this.level=level;
    15. 

  15.         this.job=job;
    16. 

  16.     }
    17. 

    18. 

  18.     setinfo(level){
    19. 

  19.         this.level=level;
    20. 

  20.         this.hp=level*200;
    21. 

  21.         this.mp=level*20;
    22. 

  22.     }
    23. 

  23. }
    24. 

    25. 

  25. let player1=new player("376220510","123456","女",1,"战士");
    26. 

  26. console.log(player1.hp);
    27. 

  27. player1.setinfo(1);
    28. 

  28. console.log(player1.hp);
    29.

上述代码,创建了一个player类,并且使用new创建了player1这个实例

数组与类的解构

  • 1.数组解构:模板 = 数组 例如下列代码
      

    1. let [name, email] = ["朱老师", "498668472@qq.com"];
      2. 

    2. console.log(name, email);
      3.
  • 2.对象解构:对象模板 = 对象字面量，例如下列代码
    

  1. let { id, lesson, score } = { id: 1, lesson: "js", score: 80 };
    2. 

  2. console.log(id, lesson, score);
    3. 

  3. let {...obj} ={ id: 1, lesson: "js", score: 80 };
    4. 

  4. console.log(obj);
    5.
  • 3.应用场景：使用对象解构传参,例如下列代码
    

  1. function getUser({id,name,email}) {
    2. 

  2.     console.log(id,name,email);
    3. 

  3. }
    4. 

  4. getUser({id:123, name:'张三',email:'zs@php.cn'})
    5.

将js引入到浏览器的方法

  • 1.使用script标签引入js脚本, 写到这对标签中, 仅于当前的html文档生效例如下列代码
    

  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.   </head>
    9. 

  9.   <body>
    10. 

  10.     <button onclick="console.log('hello world');">按钮1</button>
    11. 

  11.     <button onclick="setBg(this)">按钮2</button>
    12. 

  12.     <script>
    13. 

  13.        function setBg(ele) {
    14. 

  14.           document.body.style.backgroundColor = "wheat";
    15. 

  15.            ele.style.backgroundColor = "yellow";
    16. 

  16.            ele.textContent = "保存成功";
    17. 

  17.         }
    18. 

  18.     </script>
    19. 

  19.   </body>
    20. 

  20. </html>
    21.
  • 2.如果这个按钮的功能, 需要在多个页面中使用, 可以将这个js脚本保存为外部脚本,然后再引入到当前的html,例如<script src="outer.js"></script>这样即可

取DOM元素的二个API接口

  • 1.获得一组: querySelectorAll(css选择器),例如下列代码
    

  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>获取dom元素</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

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

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

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

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

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

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

  16.     </ul>
    17. 

    18. 

  18.     <script>
    19. 

  19.       console.log(document);
    20. 

  20.       const items = document.querySelectorAll(".list > .item");
    21. 

  21.       console.log(items);
    22. 

  22.       for (let i = 0, length = items.length; i < length; i++) {
    23. 

  23.         items[i].style.color = "red";
    24. 

  24.       }
    25. 

  25.     </script>
    26. 

  26.   </body>
    27. 

  27. </html>
    28.

上述代码中使用document.querySelectorAll(".list > .item");获得了所有li元素

  • 2.一个(一组中第1个): querySelector(css选择器),例如下列代码
    

  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>获取dom元素</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

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

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

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

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

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

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

  16.     </ul>
    17. 

    18. 

  18.     <script>
    19. 

  19.       const first = document.querySelector(".list > .item");
    20. 

  20.       console.log(first === items[0]);
    21. 

  21.       first.style.backgroundColor = "yellow";
    22. 

    23. 

  23.       const three = document.querySelector(".list > .item:nth-of-type(3)");
    24. 

  24.       three.style.backgroundColor = "wheat";
    25. 

  25.     </script>
    26. 

  26.   </body>
    27. 

  27. </html>
    28.

上述代码中使用document.querySelector(".list > .item");获得了第一个li元素
使用document.querySelector(".list > .item:nth-of-type(3)");获得了第三个li元素

上一篇： Anaconda 的安装教程

下一篇： javascript得dom编程初体验

推荐阅读