博客列表 >js闭包/类创建/解构赋值

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

becauses
becauses原创
2022年01月06日 19:59:46423浏览

闭包(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'})
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议