PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > JavaScript:作用域和闭包,构造函数类与类的继承

JavaScript:作用域和闭包,构造函数类与类的继承

JiaJieChen
JiaJieChen 原创
2021年04月06日 13:28:16 949浏览

javascript:作用域和闭包,类与类的继承

1.作用域

ES6中三种作用域 含义
全局作用域 再全局也就是外部声明的变量或者常量
函数作用域 再函数内部声明的变量或者常量
块级作用域 再()/{}里面声明的变量或者常量

①全局作用域

全局作用域声明变量或者常量再函数内部可以直接引用

②函数作用域

大家可以看到,再函数里面声明的变量,在外部不能直接使用,浏览器会显示此数据未定义,这个就是函数作用域,如果我们想访问到里面的内容要创建一个高阶函数来获取它的值。

高阶函数可以访问函数作用域的值,这个功能可以设定一个不想被全局访问的变量。

③块级作用域

全局变量,可以直接访问,但是用()或{} 包起全局变量来就不能进行访问,下面我们来看看。

添加{}或()后

大家可以看到,用{}包起全局变量,我们是打印不出来的,因为再es6中{}或()有块级作用域。

2.闭包

闭包
“闭包就是函数”,通俗来说,函数访问了全局中的变量或常量就形成了闭包,闭包也就是函数,函数有资格去访问全局里面的属性。

函数访问外部的全局变量就是闭包

代码块

  1. <script>
  2. // 全局作用域,也就是再外部第一层声明的属性(变量或常量)
  3. let a = "邮箱:";
  4. const EMAIL = "admin@qq.com";
  5. function name1() {
  6. //函数访问全局变量或常量
  7. return a + EMAIL;
  8. }
  9. console.log(name1());
  10. //函数作用域,也就是再函数内部声明的属性(变量或者常量)
  11. function name2() {
  12. let age = "36岁";
  13. let gender = "男";
  14. return function name3() {
  15. return age + gender;
  16. };
  17. }
  18. console.log(name2()());
  19. //块级作用域
  20. let b = 10;
  21. let c = 10;
  22. console.log(b * c);
  23. // 闭包
  24. let hobby = "摄影";
  25. function name5(Hobby) {
  26. let money = 3688;
  27. return hobby + "学费" + money;
  28. }
  29. console.log(name5());
  30. </script>

3.类

在JavaScript中是没有类的,但是可以用语法塘创建一个构造函数模拟一个类
原始方法(show 共享方法,通过对象来调用)
静态方法(static 静态方法 不需要实例化(new class),可以直接调用)

①创建ES6构造函数类,show原始共享方法

这个是原始show共享方法,通过创建新变量来进行传参

②static 静态方法

大家可以到,static静态方法和创建staric静态变量,可以直接在外部调用。不需要 new class

4.继承

继承
继承,通常是给父类进行一些拓展增加新的属性否则毫无意义
继承一定要用到 extends 属性

①继承构造函数“Data”类

一定要用到 extends 属性,再来用constructor进行初始化,拓展一个新属性 gender,第一步 用 super 属性 给父类的构造方法执行。否则this执行不了,第二部导入父类的原型方法.

代码块

  1. <script>
  2. //创建构造函数模拟一个类,再js中是没有类的,但是可以用语法糖模拟类
  3. class Data {
  4. //constructor 构造方法初始化对象
  5. constructor(name, age) {
  6. this.name = name;
  7. this.age = age;
  8. }
  9. //show 共享方法,通过对象来调用
  10. show() {
  11. return { name: this.name, age: this.age };
  12. }
  13. //static 静态方法 不需要实例化(new class),可以直接调用
  14. static name1() {
  15. return this.useName;
  16. }
  17. //静态属性
  18. static useName = "吴邪";
  19. }
  20. // 创建一个变量来 new 构造函数 Data 进行传参
  21. // let data = new Data("张起灵", "26岁");
  22. // console.log(data.show());
  23. //调用静态方法,可以直接从构造函数里调用
  24. console.log(Data.name1());
  25. //继承,通常是给父类进行一些拓展增加新的属性否则毫无意义
  26. //继承一定要用到 extends 属性
  27. class Inherit extends Data {
  28. //再来进行初始化,拓展一个新属性 gender
  29. constructor(name, age, gender) {
  30. //第一步 用 super 属性 给父类的构造方法执行。否则this执行不了
  31. super(name, age);
  32. this.gender = gender;
  33. }
  34. //第二部导入父类的原型方法
  35. show() {
  36. return { name: this.name, age: this.age, gender: this.gender };
  37. }
  38. }
  39. //完成类的继承
  40. let inherit = new Inherit("吴邪", "26岁", "男");
  41. console.log(inherit.show());
  42. </script>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议