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

闭包、访问器属性、类与对象的创建与成员引用、数组与对象的解构

程序员文章站 2022-03-24 09:08:04
...

闭包

  1. // 闭包:
  2. // 1、父子函数
  3. // 2、子函数调用了父函数中的变量
  4. let fn = function (a) {
  5. let f = function (b) {
  6. return a + b;
  7. };
  8. // 返回子函数
  9. return f;
  10. };
  11. // fn()调用完成,但是内部的a被子函数引用了, 所以fn()创建的作用域不消失
  12. let aa = fn(1);
  13. console.log(aa(2));
  14. // 偏函数:
  15. // 当一个函数需要传入多个参数时,不一定要一次性都传入,可分批传入
  16. fn = function (a, b) {
  17. return function (c) {
  18. return a + b + c;
  19. };
  20. };
  21. let cc = fn(1, 2);
  22. console.log(cc(3));
  23. // 将参数逐个传入,叫“柯里化”函数
  24. fn = function (a) {
  25. return function (b) {
  26. return function (c) {
  27. return a + b + c;
  28. };
  29. };
  30. };
  31. console.log(fn(1)(2)(3));
  32. // 以上也可以用箭头函数简写
  33. fn = (a) => (b) => (c) => a + b + c;
  34. console.log(fn(1)(2)(3));

访问器属性

  1. // 访问器属性
  2. let score = {
  3. data: { math: 90, english: 80 },
  4. get math() {
  5. return this.data.math;
  6. },
  7. set math(math) {
  8. if (math <= 100 && math >= 0) {
  9. this.data.math = math;
  10. } else {
  11. console.log("成绩错误");
  12. }
  13. },
  14. get score() {
  15. return `math:${this.data.math} , english:${this.data.english}`;
  16. },
  17. };
  18. console.log(score.math);
  19. score.math = 100;
  20. console.log(score.score);
  21. score.math = 1000;

类与对象的创建与成员引用

  1. // 类的创建
  2. // 构造函数 旧的写法
  3. let Score = function (math, english) {
  4. this.math = math;
  5. this.english = english;
  6. };
  7. // 对象方法一般是公共, 操作的是当前对象的属性
  8. // 任何一个函数都有一个属性 prototype, 叫原型, 这个原型,对于普通函数来说,没用
  9. // 只有把函数当 成构造函数来创建对象时, 这个原型属性才有用
  10. // 给类 Score 添加自定义方法,必须添加到它的原型对象属性上
  11. // 声明在 Score.prototype 原型上的方法, 被所有类实例/对象所共用
  12. Score.prototype.score = function () {
  13. return `math:${this.math} english:${this.english}`;
  14. };
  15. s = new Score(80, 90);
  16. console.log(s.score());
  17. // 静态成员: 直接挂载到构造函数对象上的属性
  18. Score.num = 2;
  19. console.log(Score.num);
  20. Score = function (math, english, num) {
  21. this.math = math;
  22. this.english = english;
  23. // 私有成员,本构造函数外,无法访问
  24. let number = num;
  25. console.log(number);
  26. };
  27. Score.prototype.score = function () {
  28. // ${this.number} 无法访问
  29. return `math:${this.math} english:${this.english} num:${this.number}`;
  30. };
  31. s = new Score(90, 80, 2);
  32. console.log(s.score());
  33. // ES6 写法
  34. class S {
  35. // 公共字段(可选)
  36. math = 0;
  37. english = 0;
  38. //私有成员
  39. #number = 0;
  40. //构造函数
  41. constructor(math, english, num) {
  42. this.math = math;
  43. this.english = english;
  44. this.#number = num;
  45. }
  46. //公共方法
  47. getScore() {
  48. return `math:${this.math} english:${this.english} num:${this.#number}`;
  49. }
  50. //静态成员
  51. static flag = 1;
  52. }
  53. ss = new S(30, 20, 6);
  54. console.log(ss.getScore());
  55. class PS extends S {
  56. constructor(math, english, num, pe) {
  57. super(math, english, num);
  58. this.pe = pe;
  59. }
  60. getScore() {
  61. return `${super.getScore()} pe:${this.pe}`;
  62. }
  63. }
  64. p = new PS(20, 30, 4, 50);
  65. console.log(p.getScore());
  66. console.log(PS.flag);

数组与对象的解构

  1. // 解构赋值
  2. let [math, english] = [40, 50];
  3. console.log(math, english);
  4. // 参数不足 ,用默认值
  5. [math, english, pe = 30] = [40, 50];
  6. console.log(math, english, pe);
  7. // 参数过多
  8. [math, english, ...ex] = [23, 45, 75, 45, 23, 86];
  9. console.log(ex);
  10. // 解构对象
  11. // 对象模板 = 对象字面量
  12. let {m,e}= { m: 24, e: 40 };
  13. console.log(m);
  14. // 大括号 不能出现在等号左边, {}不能充当"左值", 使用括号包一下转为表达式就可以了
  15. ({ math, english }) = { math: 20, english: 40 };
  16. console.log(math);
  17. // 当左边模板中的变量出现命名冲突,使用别名解决
  18. let {math:ma,english:exx}= { math: 20, english: 40 };
  19. console.log(exx);
  20. // 实例
  21. // 用对象解构传参
  22. function getScore({math,english}){
  23. console.log(math,english);
  24. }
  25. getScore({math:30,english:40});