Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 作用域与闭包;类与类的继承
Blogger Information
Blog 11
fans 0
comment 0
visits 6557
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
作用域与闭包;类与类的继承
Ghcᝰ
Original
509 people have browsed it

作用域闭包

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>作用域闭包</title>
  9. </head>
  11. <body>
  12.     <script>
  13.         // 全局作用域
  14.         let str = "111";
  15.         console.log(str);
  16.         // 函数作用域
  17.         function getname() {
  18.             let str1 = "222";
  19.             console.log(str1);
  20.         }
  21.         getname();
  22.         // 下面代码中str1无法输出报错,因为str1的作用域范围再getname函数中才起效果,此时str1为私有变量(私有成员)
  23.         // console.log(str1);
  25.         // 块作用域{}用大括号包裹起来,var不支持块作用,
  26.         {
  27.             let a = 1, b = 2;
  28.             console.log(a, b);
  29.         }
  31.         //闭包:能够访问自由变量的函数,理论上讲,所有函数都是闭包
  32.         let c = 300;
  33.         function sum(a, b) {
  34.             return a + b + c;
  35.         }
  37.         //通过闭包来访问函数的私有成员 /函数中嵌套函数的是高阶函数
  38.         function demo1() {
  39.             let name = "halo";
  40.             return function getname() {
  41.                 return name;
  42.             };
  43.         }
  44.         console.log(demo1()());
  48.     </script>
  50. </body>
  52. </html>

类与类的继承

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>类与类的继承</title>
  9. </head>
  11. <body>
  12.     <script>
  14.         class User {
  15.             // 构造方法:初始化对象,关键字constructor
  16.             constructor(name, email) {
  17.                 this.name = name;
  18.                 this.email = email;
  19.             }
  20.             // 原型方法(共享方法)
  21.             show() {
  22.                 return { name: this.name, email: this.email, age: this.#age };
  23.             }
  24.             // 静态方法:不需要实例化(new class ),直接用类来调用,关键字static
  25.             static fetch() {
  26.                 // 静态成员中的this表示的就是当前的类
  27.                 return this.userName;
  28.             }
  29.             // 静态属性--变量
  30.             static userName = "无间道";
  31.             // 私有成员,关键字#
  32.             #age = 30;
  34.             // 还可以声明访问器属性:伪装成属性的方法,有get,set
  35.             get age() {
  36.                 return this.#age;
  37.             }
  38.             set age(value) {
  39.                 if (value >= 18 && value <= 60) { this.#age = value; }
  41.                 else { console.log("年龄不符合"); }
  42.             }
  44.         }
  45.         // 公共方法放在构造函数的原型上:原型方法
  46.         const user = new User("老师", "111@qq.com");
  47.         console.log(user);
  48.         console.log(user.show());
  50.         // 静态方法直接用类调用,不需要去new了
  51.         console.log(User.fetch());
  52.         // 如果非静态方法要  console.log((new User).fetch());
  53.         console.log(user.age);
  54.         user.age = 90;
  55.         console.log(user.age);
  57.         //继承关键字extends
  58.         // 继承: 通常时对父类进行一些扩展(添加一些新的属性或方法)
  59.         class Child extends User {
  61.             constructor(name, email, gender) {
  62.                 // 第一步必须将父类的构造方法执行一下, 否则this用不了
  63.                 super(
  64.                     name, email
  65.                 );
  66.                 // 第二步,给子类的新成员初始化
  67.                 this.gender = gender;
  68.             }
  70.             // 给子类重写父类的原型方法(共享方法)
  71.             show() {
  72.                 return { name: this.name, email: this.email, gender: this.gender };
  73.             }
  75.         }
  77.         const child = new Child("新子类", "aa@qq.com", 42);
  78.         console.log(child);
  80.     </script>
  81. </body>
  83. </html>
Correcting teacher：天蓬老师天蓬老师

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