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

闭包、访问器属性、类与对象的创建和解析、JS浏览器应用

程序员文章站 2022-05-20 16:01:02
...

一、闭包的概念与应用

1、闭包的概念

闭包:有权访问另一个函数作用域中的变量的函数;一般情况就是在一个函数中包含另一个函数，也即是一个父子函数，且子函数调用了父函数中的变量。

2、闭包的应用

    

  1. fn = function (a) {
    2. 

  2.   let f = function (b) {
    3. 

  3.     return a + b;
    4. 

  4.   };
    5. 

  5.   return f;
    6. 

  6. };
    7. 

  7. let f1 = fn(10);
    8. 

  8. // fn()调用完成,但是内部的a被子函数引用了, 所以fn()创建的作用域不消失
    9. 

  9. console.log(f1(20));
    10.

二、访问器属性

    

  1. let user = {
    2. 

  2.   data: { name: "Harvey", height: 187 },
    3. 

  3.   getHeight() {
    4. 

  4.     return user.data.height;
    5. 

  5.   },
    6. 

  6.   setHeight(height) {
    7. 

  7.     user.data.height = height;
    8. 

  8.   },
    9. 

  9. };
    10. 

  10. console.log(user.getHeight());
    11. 

  11. user.setHeight(167);
    12. 

  12. console.log(user.getHeight());
    13.

三、类与对象

    

  1. class Parent {
    2. 

  2.   // 公共字段
    3. 

  3.   name = "username";
    4. 

  4.   email = "userman@isidun.com";
    5. 

  5.   //私有成员
    6. 

  6.   #gender = "male";
    7. 

  7.   //构造方法
    8. 

  8.   constructor(name, email, sex) {
    9. 

  9.     this.name = name;
    10. 

  10.     this.email = email;
    11. 

  11.     this.#gender = sex;
    12. 

  12.   }
    13. 

  13.   // 公共方法
    14. 

  14.   getInfo() {
    15. 

  15.     return `name = ${this.name} ,email = ${this.email}, sex = ${this.#gender}`;
    16. 

  16.   }
    17. 

  17.   //静态成员
    18. 

  18.   static status = "enabled";
    19. 

  19. }
    20. 

  20. const user1 = new Parent("Aiden", "aiden@isidun.com", "male");
    21. 

  21. console.log(user1.getInfo());
    22. 

    23. 

  23. //继承，为了扩张功能
    24. 

  24. class Child extends Parent {
    25. 

  25.   constructor(name, email, sex, salary) {
    26. 

  26.     super(name, email, sex);
    27. 

  27.     //子类中的新属性
    28. 

  28.     this.salary = salary;
    29. 

  29.   }
    30. 

  30.   getInfo() {
    31. 

  31.     return `${super.getInfo()}, salary = ${this.salary}`;
    32. 

  32.   }
    33. 

  33. }
    34. 

  34. const user2 = new Child("Sunny", "sunny@isidun.com", "female", 25000);
    35. 

  35. console.log(user2.getInfo());
    36.

三、数组与对象的解构

1、数组解构

    

  1. let [name, email] = ["Harvey", "harvey@isidun.com"];
    2. 

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

参数不足，给定默认参数

    

  1. [name, email, age = 18] = ["Herman", "heaman@isidun.com"];
    2. 

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

参数过多…rest

    

  1. let [a, b, c, ...d] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
    2. 

  2. console.log(a, b, c, d);
    3.

2、对象解构

    

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

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

3、案例

    

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

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

  3. }
    4. 

  4. getUser({id:123,name:"Herman",email:'herman@samrtusedphones.com'});
    5.

四、JS引入应用

1、元素中的事件属性

点击按钮改变body背景色、按钮背景色及按钮文字。

  1. <button onclick="document.body.style.backgroundColor='wheat';this.style.backgroundColor='yellow';this.textContent='保存成功'">按钮2</button>

2、引入本文档中JS

效果同上

    

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

  2. <script>
    3. 

  3.     function setBg(ele) {
    4. 

  4.         document.body.style.backgroundColor = "wheat";
    5. 

  5.         ele.style.backgroundColor = "yellow";
    6. 

  6.         ele.textContent = "保存成功";
    7. 

  7.     }
    8. 

  8. </script>
    9.

3、引入外部JS

效果同上，HTML核心代码：

    

  1. <body>
    2. 

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

  3.     <script src="outer.js"></script>
    4. 

  4. </body>
    5.

JS文档代码：

    

  1. function setBg(ele) {
    2. 

  2.   document.body.style.backgroundColor = "wheat";
    3. 

  3.   ele.style.backgroundColor = "yellow";
    4. 

  4.   ele.textContent = "保存成功";
    5. 

  5. }
    6.

五、DOM元素的二个API

1、querySelectorAll

选择一组css标签/class，演示：

    

  1.  <body>
    2. 

  2.     <ul class="list">
    3. 

  3.       <li class="item">item1</li>
    4. 

  4.       <li class="item">item2</li>
    5. 

  5.       <li class="item">item3</li>
    6. 

  6.       <li class="item">item4</li>
    7. 

  7.       <li class="item">item5</li>
    8. 

  8.     </ul>
    9. 

  9.     <script>
    10. 

  10.       const items = document.querySelectorAll(".list > .item");
    11. 

  11.       console.log(items);
    12. 

  12.       for (let i = 0, length = items.length; i < length; i++) {
    13. 

  13.         items[i].style.color = "green";
    14. 

  14.       }
    15. 

  15.     </script>
    16. 

  16.   </body>
    17.

2、querySelector

选择一组中的一个，演示：

    

  1.  <body>
    2. 

  2.     <ul class="list">
    3. 

  3.       <li class="item">item1</li>
    4. 

  4.       <li class="item">item2</li>
    5. 

  5.       <li class="item">item3</li>
    6. 

  6.       <li class="item">item4</li>
    7. 

  7.       <li class="item">item5</li>
    8. 

  8.     </ul>
    9. 

  9.     <script>
    10. 

  10.       // 将第一个改为黄色背景
    11. 

  11.       const first = document.querySelector(".list> .item");
    12. 

  12.       console.log(first === items[0]);
    13. 

  13.       first.style.backgroundColor = "yellow";
    14. 

  14.       //将第4个改为wheat背景
    15. 

  15.       const fourth = document.querySelector(".list> .item:nth-of-type(4)");
    16. 

  16.       fourth.style.backgroundColor = "wheat";
    17. 

  17.     </script>
    18. 

  18.   </body>
    19.

上一篇： select标记美化--JS式插件、后期加载_表单特效

下一篇： React环境如何搭建？react环境搭建详情介绍（附实例）

推荐阅读