Blogger Information
Blog 36
fans 1
comment 0
visits 26437
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
class创建一个类并实现自有,共享,静态成员的声明 实例演示数组与对象解构方法
早晨
Original
531 people have browsed it

class类的声明有以下成员:

**公共成员**:在类里面直接声明即可。
**自有成员**:构造方法,实例初始化,在类里面的构造函数 constructor中以参数的形式传参,也就是当前构造函数内声明,通过关键字this赋值。
**共享成员:**也叫原型成员,把构造函数中的方法挂载在类上,可以直接通过类的实例化时传参,在new的新对象上以属性方式直接使用。
**静态成员:**使用关键字static,可以不用new一个新对象使用,是通过类名来直接使用。
**继承:**是对子类中对父类的方法进行扩展,继承关键字extends,调用父类初始化属性和方法时使用关键字super()

  1. <script>
  2. class Demo {
  3. // 公共成员
  4. username = '大家好';
  5. constructor(name, email) {
  6. // 自有成员
  7. this.name = name;
  8. this.email = email;
  9. }
  10. // const objClass =new demo("2022年7月24日","阳光明媚");
  11. // console.log(objClass);
  12. // 共享成员
  13. getInfo() {
  14. return `${this.name} : ( ${this.email} )`;
  15. }
  16. // 静态成员
  17. static status = 'enabled';
  18. }
  19. const obj1 = new Demo('早上好', 'xxxxx@xxx.cn');
  20. // 继承:
  21. class Demo2 extends Demo {
  22. constructor(name, email, sex) {
  23. // 自有属性
  24. super(name, email);
  25. this.sex = sex;
  26. }
  27. getInfo() {
  28. return `${super.getInfo()} , ${this.sex}`;
  29. }
  30. }
  31. const obj2 = new Demo2('姓名', 'xxx@xx.cn', '男');
  32. console.log(obj2.getInfo());
  33. </script>

实例演示数组与对象解构方法

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>数组与对象解构</title>
  8. </head>
  9. <body>
  10. <script>
  11. console.log("==================数组解构=====================");
  12. let [text, tel] = ['手机', '130000000000'];
  13. console.log(text, tel);
  14. // 更新
  15. [text, tel] = ['电话', '010-0000000'];
  16. console.log(text, tel);
  17. // 参数不足: 默认值
  18. // 模板中有3个变量, 值只有2个
  19. [text, tel, add = "北京"] = ['名称', '13000000001'];
  20. console.log(text, tel, add);
  21. // 参数过多: ...rest
  22. [a, b, c, ...arr] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  23. console.log("ABC参数:"+a, b, c);
  24. console.log("过多的参数:"+arr);
  25. console.log("==================两数交换==========================");
  26. let x = 50;
  27. let y = 100;
  28. console.log([x, y]);
  29. [y, x] = [x, y];
  30. console.log([x, y]);
  31. console.log("==================对象解构==========================");
  32. let { id, lesson, score } = { id: 2, lesson: 'AB', score: 20 };
  33. console.log(id, lesson, score);
  34. // 更新
  35. ({ id, lesson, score } = { id: 5, lesson: 'CD', score: 23 });
  36. console.log(id, lesson, score);
  37. // 别名
  38. let { id: itemId, num, price } = { id: 10, num: 8, price: 5000 };
  39. console.log(itemId, num, price);
  40. // 应用场景
  41. let user = { id: 12, name: '早晨', tel: '13000000000' };
  42. function getUser({ id, name, tel }) {
  43. console.log(id, name, tel);
  44. }
  45. getUser(user);
  46. </script>
  47. </body>
  48. </html>

运行效果

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