search

博客列表 >访问器属性,(class简化)构造函数以及解构赋值详解

访问器属性,(class简化)构造函数以及解构赋值详解

xueblog9的进阶之旅
xueblog9的进阶之旅原创
2022年07月24日 22:58:25392浏览

  1. 访问器属性

    1.1 对象字面量
    1.1.1 一次性添加:一次性添加全部成员:属性和方法.对象内部添加
    1.1.2 逐个追加:逐个添加成员,属性和方法,设置空对象,通过变量属性名逐一设置
    1.2 访问接口:通过set,get定义读写的接口,否则只能通过变量属性名逐一选择才可修改
    1.3 接口属性化
    1.3.1 用属性访问接口,分为读,设置了访问接口之后,直接通过变量名.参数属性名即可读写参数;

  2. 构造函数和面向对象的特征
    2.1 专用于创建对象的函数叫构造函数,用let定义一个对象,并且属性按照构造函数的方法进行操作,构造函数就相当于对象的模板一样,不同的对象重复相同的操作;
    2.2 对象成员-私有成员:只有构造函数内的方法可用,let定义;
    2.3 对象成员-自有成员:this.参数名=参数名,表示为自有成员;
    2.4 对象成员-共享成员:通过原型方法定义之后,自由成员变成共享成员,格式:对象变量名.prototype.函数名=function(参数名….){};
    2.5 对象成员-静态成员,变量名.属性名,该成员只可以函数自生来访问,不可实例访问
    2.6 子类构造器的前提需要继承父类构造器的原型,子类函数名.prototype=父类函数名.prototype(没有该行代码,子类构造器就没有意义);
    2.7 子类构造器继承了父类的方法,子类构造器的对象重复着父类构造函数的方法操作,另:子类可另外对父类的方法进行扩展,就是额外对父类的结果进行处理

  3. 用类来简化构造函数
    3.1 class直接声明
    3.2 私有成员-直接声明
    3.3 自有成员-constructor(){}构造方法,实例初始化,子类构造器内,可是初始化父类之外的属性,
    3.4 共享成员-函数声明,this指定当前的自有成员变为共享成员
    3.5 静态成员-static声明变量名
    3.6 子类继承-格式:class 子类构造器2 extends 父类构造器,super()会自动调用父类的构造器来初始化实例
    3.7 构造函数的实例化总结:让对象按照构造函数的方法进行操作,调用对象的格式:对象名.构造函数的方法函数

  4. 解构赋值

  5. 数组解构格式:[参数模板]=[值(更新值)],过少需要配置默认值,过多需要压缩成数组,统一对变量赋值,修改,也可单独更新赋值;
  6. 参数交换,参数模板中的参数位置调整即可;
  7. 对象解构格式:{属性名}={属性名:值},数值更新格式({属性名:别名}={属性名:值(更新)})
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         console.log('-------------访问器属性---------------------------');
  12.         // 声明对象字面量
  13.         // 个人认为是在创建表格
  14.         // 可以一次性添加属性,也可以创建空对象,逐个添加
  15.         let tab = {};   // 类似表格名称
  16.         tab.tab1 = {};  // 类型表格的sheet名
  17.         tab.tab2 = {}; 
  18.         tab.tab1.xuhao = null;
  19.         tab.tab1.number = 1 ;
  20.         tab.tab1.name = '王二麻子';
  21.         tab.tab1.score = 140;
  22.         tab.tab2.xuhao2 = '属性';
  23.         tab.tab2.number2 = 2 ;
  24.         tab.tab2.name2 = '李四';
  25.         tab.tab2.score2 = 88939302;
  26.         console.log(tab)
  27.         // 访问器属性
  28.          tab.abc = function(value) { // 可以直接访问,也可以用函数的参数定义,外部传参使用
  29.             this.tab1.xuhao = value  
  30.             return this.tab1.xuhao
  31.          }
  32.          console.log(tab.abc('序号'))
  34.          // 一次性添加
  35.          let tab3 = {
  36.             tab4: {
  37.                 xuhao3: null,
  38.                 number3: 999,
  39.                 name3: '武大郎',
  40.             },
  41.             tab5: {
  42.                 xuhao4: null,
  43.                 number4: 888,
  44.                 name4: '西门庆',
  45.             },
  46.             get num() {
  47.                 return this.tab4.number3;  // 设置tab3.num可读
  48.             },
  50.             set num(value) {
  51.                 this.tab4.number3 = value; // 设置tab3.num可写,没有这一条,
  52.             },                             // 必须写tab3.tab4.numer3才可重新弄赋值
  53.             set nam(value) {
  54.                 this.tab5.name4 = value;
  55.             },
  56.             get nam() {
  57.                 return this.tab5.name4;
  58.             },
  60.          };
  61.          console.log(tab3.num);
  62.          console.log(`${tab3.num} : ${tab3.nam}`)
  64.         console.log('--------------------构造函数--------------------');
  65.          // 构造函数:专门用于创造对象的函数,创建对象(实例),通常,对象和实例时同义;
  66.          let list = function (a, b) { // 创建一个函数用于储存对象
  67.             let c = '我是私有成员';     // 私有成员,只有构造函数内自身的方法可以使用
  68.             this.a = a;               // 声明自有成员,
  69.             this.b = b;
  70.          }
  71.          let listson = function(a, b){ //我是子类构造器
  72.             this.a = a;
  73.             this.b = b;
  74.          }
  76.          list.d = '  我是静态成员';    // 只能构造函数自身访问,不可实现实例访问
  77.          listson.prototype = list.prototype; // 子类构造器继承了父类的公共方法,有了这个子类构造器才有意义
  78.          list.prototype.getinfo = function (){ // 声明list函数中的自有成员共有,'prototype'
  79.             return `${this.a}  ${this.b}` +   list.d;
  80.          }
  81.          let list1 = new list('专门构造对象的','函数'); // 构造list1的对象
  82.          let list2 = new list('随便瞎写','没有意义');  // 构造list2的对象
  83.          let list3 = new listson('我是子类构造函数','继承了父类的共享方法');
  84.          console.log(list1, list2, list3);
  85.          console.log(list1.getinfo());
  86.          console.log(list2.getinfo());
  87.          console.log(list3.getinfo());
  90.         console.log('--------------------类简化构造函数--------------------');
  91.          // 用类来简化构造函数,用class构造函数,{}后面不需要加上','
  92.          class listjh {
  93.             cjh = '我是私有成员';  // 私有成员
  94.             constructor(ajh, bjh){   // 构造方法,实现初始化
  95.                 this.ajh = ajh;     // 自有成员
  96.                 this.bjh = bjh;     // 自有成员
  97.             }
  98.             static djh = '   我是静态成员简化'  // 静态成员,用static 定义变量名
  99.             getinfojh() {                    // 公共方法,自有成员变成共享成员,
  100.                 return `${this.ajh}  ${this.bjh}` +   listjh.djh;
  101.             }
  102.          }
  104.          class listjhson extends listjh {  //子类构造器继承父类,
  105.             constructor(ajh, bjh, xjh) {   // 子类的扩展自行定义属性,
  106.                 super(ajh, bjh)         // super()会自动调用父类的构造器来初始化该实例
  107.                 this.xjh =xjh;          // 扩展的自定义属性-自有成员
  108.             }
  109.             getinfojh(){          // 子类对父类的方法进行扩展
  110.                 return `${this.ajh}  ${this.bjh} ${this.xjh}` +   listjh.djh;
  111.             }
  112.          }
  114.          const listjh1 = new listjhson('专门构造对象的','函数简化','这个是子类扩展的');
  115.          // const 声明对象属性
  116.          console.log(listjh1.getinfojh()); // 实例化调用函数;
  118.          // class的访问器属性
  119.          class clste {
  120.             username = '王二麻子'
  121.             get username() {
  122.                 return this.username;
  123.             }
  124.             set username(value) {
  125.                 this.username = value;
  126.             }
  127.          };
  128.          const clste1 = new clste();
  129.         console.log(clste1.username);  // 对象属性实例化
  130.          clste1.username = '李四';   
  131.          console.log(clste1.username)
  132.          console.log('--------------------数组解构--------------------');
  133.          // 解构
  134.          // 数组解构
  135.          let [a, b, ...c] = ['1','2','3','4']; //同时赋值,定义变量,参数过多则压缩成数组,过少,需要定义默认值;
  136.          console.log(a,b,c);
  137.          [a, b, ...c] = ['5','6','7','8'];  //可同时更新变量内容
  138.          console.log(a,b,c);
  139.          b = 10;                            // 也可单独更新变量内容
  140.          console.log(a,b,c);
  141.         [a, b] = [b, a];                    // 两者更换变量内容
  142.         console.log(a,b,c); 
  144.         console.log('--------------------对象解构--------------------');
  145.         // 对象解构
  146.         let numb = {x, y, z } = {x: 1, y: 2 , z: 3};  // let 命名对象名,一一对应结构
  147.         console.log(x,y,z);                     
  148.         console.log(numb);
  149.         ({x,y,z} = {x: 4, y: 5 , z: 6});        // 值更新
  150.         console.log(x,y,z);
  151.         let {x:x1,y:y1,z:z1} = {x: 7, y: 8 , z: 9};  // 更换别名,注意原名称还等于原来的值
  152.         console.log(x,y,z);
  153.         console.log(x1,y1,z1);
  154.     </script>
  155. </body>
  156. </html>

上一条：个人主体小程序和企业主体小程序区别下一条：操作classList和使用blur事件进行表单非空验证
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多