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

js闭包/类创建/解构赋值

程序员文章站 2022-05-21 23:29:42
...

闭包(1.父子函数 2.子函数调用了父函数中的变量)

  1. function f2(){
  2. let a = 1;
  3. return function (){
  4. retrun (a = a + 1);
  5. }
  6. }
  7. const f = f2();
  8. console.log(f());//1
  9. console.log(f());//2
  • 闭包:偏函数
  1. //分批传入参数
  2. fn = function(a){
  3. return function(b){
  4. return function(c){
  5. return a + b + c;
  6. }
  7. }
  8. }
  9. //箭头函数简写
  10. fn = a => b => c => a+b+c;
  11. console.log(fn(1)(2)(3));
  12. //或者
  13. f = fn(1);
  14. f2 = fn(2);
  15. console.log(f2(3));
  • 把闭包:纯函数
  1. let discound = 0.8;
  2. function getPrice(price, discound = 1) {
  3. // 纯函数中禁用有*变量
  4. return price * discound;
  5. }
  6. console.log(getPrice(12000, discound));

访问器属性

  1. let user = {
  2. data:{name:"nn",email:"email"},
  3. // 访问email [注意空格必须]
  4. get email(){
  5. return user.data.email;
  6. },
  7. // 设置email [注意空格必须]
  8. set email(email){
  9. this.data.email = email;
  10. }
  11. };
  12. user.email = "mm";
  13. console.log(user.email)

类与构造函数

  • js老方法实现
  1. //首字母必须大写
  2. let User = function(name,email,sex){
  3. //私有成员
  4. let gender = sex;
  5. this.name = name;
  6. this.email = email;
  7. }
  8. //调用
  9. const user1 = new User("admin","email","male");
  10. //给User添加方法
  11. User.prototype.getInfo = function(){
  12. retrun `name = ${this.name},email = ${this.email}`;
  13. }
  14. console.log(user1.getInfo);
  15. //静态成员直接挂载到对象上的属性
  16. User.status = "enabled";
  17. console.log(User.status);
  • ES6 class实现
  1. class User1{
  2. //公共字段(可选)
  3. name = 'username';
  4. email = 'email.com';
  5. //私有成员
  6. #gender = 'male';
  7. //构造方法
  8. constructor(name,enmail,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}`;
  16. }
  17. //静态成员
  18. static status = "enabled";
  19. }
  20. //调用
  21. const user4 = new User1("name","email","sex");
  22. //继承
  23. class Child extends User1{
  24. constructor(name,email,sex,salary){
  25. //调用父级构造函数
  26. super(name,email,sex);
  27. //子类新属性
  28. this.salary = salary;
  29. }
  30. //重写父类方法
  31. getInfo(){
  32. //调用父类方法
  33. return `${super.getInfo()},salary = ${this.salary}`;
  34. }
  35. }
  36. //调用
  37. const user5 = new User1("name2","email2","sex2","123456");
  38. //在类中使用访问器属性(访问与修改私有成员)
  39. class Stu{
  40. #age = 0;
  41. get age(){
  42. return this.#age;
  43. }
  44. set age(age){
  45. this.age = age;
  46. }
  47. }
  48. //调用
  49. let stu = new Stu();
  50. //设置
  51. stu.age = 100;
  52. //访问
  53. stu.age

解构赋值

  • 数组解构
  1. //age 默认值
  2. let [name,email,age = 10] = ["nn","ee"];
  3. console.log(name,email);
  • 对象解构
  1. //对象模板必须等于对象字面量
  2. let {id,lesson,score} = {id:1,lesson:'js',score:80}
  3. //再次赋值必须加括号包含
  4. ({id,lesson,score}) = {id:2,lesson:'js2',score:22}
  5. //别名(命名冲突时使用)
  6. let {id:userId,lesson:userLesson,score:userScore} = {id:2,lesson:'js2',score:22}
  7. console.log(userId);
  8. //克隆对象
  9. let {...obj} = {id:1,lesson:'js',score:80}
  10. //案例
  11. function getUser({id,name,email}){
  12. //解构传参
  13. console.log(id,name,email);
  14. }
  15. getUser({id:123,name:'name','email'})