Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 访问器属性,(class简化)构造函数以及解构赋值详解
Blogger Information
Blog 25
fans 1
comment 0
visits 12984
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
访问器属性,(class简化)构造函数以及解构赋值详解
xueblog9的进阶之旅
Original
391 people have browsed it

  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>

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post