Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 闭包、访问器属性、类与对象的创建和解析、JS浏览器应用
Blogger Information
Blog 11
fans 0
comment 0
visits 6950
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
闭包、访问器属性、类与对象的创建和解析、JS浏览器应用
**
Original
444 people have browsed it

一、闭包的概念与应用

1、闭包的概念

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

2、闭包的应用

  1. fn = function (a) {
  2.   let f = function (b) {
  3.     return a + b;
  4.   };
  5.   return f;
  6. };
  7. let f1 = fn(10);
  8. // fn()调用完成,但是内部的a被子函数引用了, 所以fn()创建的作用域不消失
  9. console.log(f1(20));

二、访问器属性

  1. let user = {
  2.   data: { name: "Harvey", height: 187 },
  3.   getHeight() {
  4.     return user.data.height;
  5.   },
  6.   setHeight(height) {
  7.     user.data.height = height;
  8.   },
  9. };
  10. console.log(user.getHeight());
  11. user.setHeight(167);
  12. console.log(user.getHeight());

三、类与对象

  1. class Parent {
  2.   // 公共字段
  3.   name = "username";
  4.   email = "userman@isidun.com";
  5.   //私有成员
  6.   #gender = "male";
  7.   //构造方法
  8.   constructor(name, email, sex) {
  9.     this.name = name;
  10.     this.email = email;
  11.     this.#gender = sex;
  12.   }
  13.   // 公共方法
  14.   getInfo() {
  15.     return `name = ${this.name} ,email = ${this.email}, sex = ${this.#gender}`;
  16.   }
  17.   //静态成员
  18.   static status = "enabled";
  19. }
  20. const user1 = new Parent("Aiden", "aiden@isidun.com", "male");
  21. console.log(user1.getInfo());
  23. //继承，为了扩张功能
  24. class Child extends Parent {
  25.   constructor(name, email, sex, salary) {
  26.     super(name, email, sex);
  27.     //子类中的新属性
  28.     this.salary = salary;
  29.   }
  30.   getInfo() {
  31.     return `${super.getInfo()}, salary = ${this.salary}`;
  32.   }
  33. }
  34. const user2 = new Child("Sunny", "sunny@isidun.com", "female", 25000);
  35. console.log(user2.getInfo());

三、数组与对象的解构

1、数组解构

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

参数不足，给定默认参数

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

参数过多…rest

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

2、对象解构

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

3、案例

  1. function getUser({id,name, email}){
  2.     console.log(id,name, email);
  3. }
  4. getUser({id:123,name:"Herman",email:'herman@samrtusedphones.com'});

四、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. <script>
  3.     function setBg(ele) {
  4.         document.body.style.backgroundColor = "wheat";
  5.         ele.style.backgroundColor = "yellow";
  6.         ele.textContent = "保存成功";
  7.     }
  8. </script>

3、引入外部JS

效果同上，HTML核心代码：

  1. <body>
  2.     <button onclick="setBg(this)">按钮2</button>
  3.     <script src="outer.js"></script>
  4. </body>

JS文档代码：

  1. function setBg(ele) {
  2.   document.body.style.backgroundColor = "wheat";
  3.   ele.style.backgroundColor = "yellow";
  4.   ele.textContent = "保存成功";
  5. }

五、DOM元素的二个API

1、querySelectorAll

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

  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>
  9.     <script>
  10.       const items = document.querySelectorAll(".list > .item");
  11.       console.log(items);
  12.       for (let i = 0, length = items.length; i < length; i++) {
  13.         items[i].style.color = "green";
  14.       }
  15.     </script>
  16.   </body>

2、querySelector

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

  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>
  9.     <script>
  10.       // 将第一个改为黄色背景
  11.       const first = document.querySelector(".list> .item");
  12.       console.log(first === items[0]);
  13.       first.style.backgroundColor = "yellow";
  14.       //将第4个改为wheat背景
  15.       const fourth = document.querySelector(".list> .item:nth-of-type(4)");
  16.       fourth.style.backgroundColor = "wheat";
  17.     </script>
  18.   </body>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post