JS基础对象

本是古典何须时尚 2023-10-06 21:40 17阅读 0赞

#### 阅读目录 ####

*  基础知识
 *   *  OOP
     *  基本声明
     *  操作属性 \*
     *  对象方法
     *  引用特性
     *  this
     *  展开语法
 *  对象转换
 *   *  基础知识
     *  内部自定义 Symbol.toPrimitive 方法用来处理所有的转换场景
     *  自定义valueOf 与 toString 方法用来转换，并不限制返回类型
 *  解构赋值
 *   *  基本使用 \*
     *  严格模式
     *  简洁定义
     *  嵌套解构 \*
     *  为变量设置默认值 \*
     *  函数参数
 *  属性管理
 *   *  添加属性
     *  删除属性
     *  检测属性
     *  获取属性名
     *  assign \*
     *  计算属性
     *  传值操作
 *  遍历对象
 *   *  获取内容
     *  使用 for/in 遍历对象属性
     *  for/of 遍历迭代对象
     *   *  获取所有对象键
         *  获取所有对象属性值
         *  同时获取属性名与值
         *  使用扩展语法同时获取属性名与值
         *  添加元素DOM练习
 *  对象拷贝
 *   *  浅拷贝
     *   *  使用 for/in 执行对象浅拷贝
         *  Object.assign 函数可简单的实现浅拷贝
         *  使用展示语法也可以实现浅拷贝
     *  深拷贝
 *  构建函数
 *   *  工厂函数
     *  构造函数 \*
     *  严格模式
     *  内置构造
     *   *  字面量创建的对象，内部也是调用了Object构造函数
     *  对象函数
     *   *  在JS中函数也是一个对象
         *  函数是由系统内置的 Function 构造函数创建的
         *  下面是使用内置构造函数创建的函数
 *  抽象特性
 *   *  问题分析 \*
     *  抽象封装
 *  属性特征
 *   *  查看特征
     *   *  属性包括以下四种特性
     *  设置特征
     *  禁止向对象添加属性
     *  封闭对象
     *  冻结对象
 *  属性访问器
 *   *  get 方法用于获得属性值，setter方法用于设置属性
     *   *  使用 get 设置只读的课程总价
         *  get/set 批量设置属性的使用
         *  token 储取的示例
         *  定义内部私有属性
     *  访问器描述符
     *  闭包访问器
 *  代理拦截
 *   *  使用方法
     *  代理函数
     *  截取字符
     *  双向绑定
     *  表单验证
 *  JSON
 *   *  声明定义
     *  序列化
     *  反序列化

## 基础知识 ##

对象是包括属性与方法的数据类型，  
JS中大部分类型都是对象如 `String/Number/Math/RegExp/Date` 等等。

传统的函数编程会有错中复杂的依赖很容易创造意大利式面条代码。

面向过程编程

面向对象编程

下面使用对象编程的代码结构清晰，也减少了函数的参数传递，也不用担心函数名的覆盖

### OOP ###

*  对象是属性和方法的集合即封装
 *  将复杂功能隐藏在内部，只开放给外部少量方法，更改对象内部的复杂逻辑不会对外部调用造成影响即抽象。
 *  继承是通过代码复用减少冗余代码
 *  根据不同形态的对象产生不同结果即多态

### 基本声明 ###

使用字面量形式声明对象是最简单的方式

let obj = {
        
      name: 'wgchen',
      get:function() {
        
      	return this.name;
      }
    }
    console.log(obj.get()); // wgchen

属性与方法简写

let name = "wgchen";
    let obj = {
        
      name,
      get() {
        
        return this.name;
      }
    };
    console.log(obj.get()); // wgchen

其实字面量形式在系统内部也是使用构造函数 `new Object` 创建的，后面会详细介绍构造函数。

let hd = {
        };
    let wgchen = new Object();
    
    console.log(hd, wgchen);
    console.log(hd.constructor);
    console.log(wgchen.constructor);

![在这里插入图片描述][46c9e21fba65460c87470c8dba52d005.png]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

### 操作属性 \* ###

使用点语法获取

let user = {
        
      name: "wgchen"
    };
    
    console.log(user.name); // wgchen

使用 `[]` 获取

console.log(user["name"]);

可以看出使用 `.` 操作属性更简洁，`[]` 主要用于通过变量定义属性的场景。

let user = {
        
      name: "wgchen"
    };
    let property = "name";
    console.log(user[property]); // wgchen

如果属性名不是合法变量名就必须使用扩号的形式了

let user = {
        };
    user["my-age"] = 28;
    console.log(user["my-age"]); // 28

对象和方法的属性可以动态的添加或删除。

![在这里插入图片描述][8710a2355cd54f6f87609cba962ffc18.png]

### 对象方法 ###

定义在对象中的函数我们称为方法，下面定义了学生对象，并提供了计算平均成绩的方法

> 一个学生需要手动创建一个对象，这显然不实际的，下面的构造函数就可以解决这个问题

### 引用特性 ###

对象和函数、数组一样是引用类型，即复制只会复制引用地址。

let hd = {
         name: "wgchen" };
    let cms = hd;
    cms.name = "blog";
    
    console.log(hd.name); //blog

对象做为函数参数使用时也不会产生完全赋值，内外共用一个对象

let user = {
         age: 22 };
    
    function hd(user) {
        
      user.age += 10;
    }
    
    hd(user);
    
    console.log(user.age); //32

对多的比较，是对内存地址的比较，所以使用 `== 或 ===` 一样。

let hd = {
        };
    let xj = hd;
    let cms = {
        };
    console.log(hd == xj); //true
    console.log(hd === xj); //true
    console.log(hd === cms); //false

### this ###

this 指当前对象的引用，始终建议在代码内部使用 this 而不要使用对象名，不同对象的 this只指向当前对象。

下例是不使用 this 时发生的错误场景

*  删除了xj 变量，但在函数体内还在使用 xj 变量造成错误
 *  使用 this 后始终指向到引用地址，就不会有这个问题

let xj = {
        
      name: "wgchen",
      show() {
        
        return xj.name;
      }
    };
    let hd = xj;
    xj = null;
    console.log(hd.show()); // Uncaught TypeError: Cannot read properties of null (reading 'name')

改用 this 后一切正常

let xj = {
        
      name: "wgchen",
      show() {
        
        return this.name;
      }
    };
    let hd = xj;
    xj = null;
    console.log(hd.show()); // wgchen

### 展开语法 ###

使用 `...` 可以展示对象的结构，下面是实现对象合并的示例

let hd = {
         name: "wgchen", web: "blog" };
    let info = {
         ...hd, site: "cms" };
    console.log(info); // {name: 'wgchen', web: 'blog', site: 'cms'}

下面是函数参数合并的示例

## 对象转换 ##

### 基础知识 ###

对象直接参与计算时，系统会根据计算的场景在 `string/number/default` 间转换。

*  如果声明需要字符串类型，调用顺序为 `toString > valueOf`
 *  如果场景需要数值类型，调用顺序为 `valueOf > toString`
 *  声明不确定时使用 `default` ，大部分对象的 `default` 会当数值使用

下面的数值对象会在数学运算时转换为 number

let wgchen = new Number(1);
    console.log(wgchen + 3); //4

如果参数是字符串时会转换为 string

let wgchen = new Number(1);
    console.log(wgchen + "3"); //13

下面当不确定转换声明时使用 default ，大部分 default 转换使用 number 转换。

let wgchen = new Number(1);
    console.log(wgchen == "1"); //true

### 内部自定义 Symbol.toPrimitive 方法用来处理所有的转换场景 ###

let hd = {
        
      num: 1,
      [Symbol.toPrimitive]: function() {
        
        return this.num;
      }
    };
    
    console.log(hd + 3); //4

Symbol.toPrimitive 是一个内置的 Symbol 值，它是作为对象的函数值属性存在的，当一个对象转换为对应的原始值时，会调用此函数。

### 自定义valueOf 与 toString 方法用来转换，并不限制返回类型 ###

![在这里插入图片描述][314a0a36e53f493d9b2381ae52fe30bd.png]

## 解构赋值 ##

解构是一种更简洁的赋值特性，可以理解为分解一个数据的结构，在数组章节已经介绍过。

建议使用 `var/let/const` 声明

### 基本使用 \* ###

下面是基本使用语法

//对象使用
    let info = {
        name:'wgchen',url:'https://wgchen.blog.csdn.net'};
    let {
        name:n,url:u} = info
    console.log(n); // wgchen
    
    //如果属性名与变量相同可以省略属性定义
    let {
        name,url} = {
        name:'wgchen',url:'https://wgchen.blog.csdn.net'};
    console.log(name); // wgchen

函数返回值直接解构到变量

function hd() {
        
      return {
        
        name: 'wgchen',
        url: 'blog'
      };
    }
    let {
        name: n,url: u} = hd();
    console.log(n); // wgchen

函数传参

"use strict";
    
    function hd({
          name, age }) {
        
      console.log(name, age); //wgchen 18
    }
    
    hd({
         name: "wgchen", age: 18 });

系统函数解构练习，这没有什么意义只是加深解构印象

const {
        random} =Math;
    console.log(random());

![在这里插入图片描述][5b35bc04bdb24afdbb6035687acd7c1c.png]

### 严格模式 ###

非严格模式可以不使用声明指令，严格模式下必须使用声明。  
所以建议使用 let 等声明。

// "use strict";
    ({
        name,url} = {
        name:'wgchen',url:'blog'});
    console.log(name, url); // wgchen blog

还是建议使用 let 等赋值声明

"use strict";
    let {
         name, url } = {
         name: "wgchen", url: "blog" };
    console.log(name, url); // wgchen blog

### 简洁定义 ###

如果属性名与赋值的变量名相同可以更简洁

let web = {
         name: "wgchen",url: "blog" };
    let {
         name, url } = web;
    console.log(name); // wgchen

只赋值部分变量

let [,url]=['wgchen','blog'];
    console.log(url); // blog
    
    let {
        name}= {
        name:'wgchen',url:'blog'};
    console.log(name); // wgchen

可以直接使用变量赋值对象属性

### 嵌套解构 \* ###

可以操作多层复杂数据结构

const hd = {
        
      name:'wgchen',
      lessons:{
        
        title:'JS'
      }
    }
    
    const {
        name,lessons:{
        title}}  = hd;
    console.log(name,title); //wgchen JS

### 为变量设置默认值 \* ###

let [name, site = 'blog'] = ['wgchen'];
    console.log(site); //blog

let {
        name,url,user='ycc'} = {
        name:'willem',url:'csdn'};
    console.log(name,user); // willem ycc

使用默认值特性可以方便的对参数预设

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

### 函数参数 ###

数组参数的使用

function hd([a, b]) {
        
    	console.log(a, b); // wgchen blog
    }
    
    hd(['wgchen', 'blog']);

对象参数使用方法

function hd({
        name,url,user='wgchen'}) {
        
    	console.log(name,url,user);
    }
    hd({
        name:'willem','url':'https://wgchen.blog.csdn.net'});
    // willem https://wgchen.blog.csdn.net wgchen

对象解构传参

function user(name, {
          sex, age } = {
         }) {
        
      console.log(name, sex, age); //wgchen 男 18
    }
    user("wgchen", {
         sex: "男", age: 18 });

## 属性管理 ##

### 添加属性 ###

可以为对象添加属性

let obj = {
        name: "wgchen"};
    obj.site = "blog";
    console.log(obj); // {name: 'wgchen', site: 'blog'}

### 删除属性 ###

使用delete 可以删除属性（后面介绍的属性特性章节可以保护属性不被删除）

let obj = {
         name: "wgchen" };
    delete obj.name;
    console.log(obj.name); //undefined

### 检测属性 ###

`hasOwnProperty` 检测对象自身是否包含指定的属性，不检测原型链上继承的属性。

let obj = {
         name: 'wgchen'};
    console.log(obj.hasOwnProperty('name')); //true

下面通过数组查看

let arr = ["wgchen"];
    console.log(arr);
    console.log(arr.hasOwnProperty("length")); //true
    console.log(arr.hasOwnProperty("concat")); //false
    console.log("concat" in arr); //true

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_11_color_FFFFFF_t_70_g_se_x_16]  
使用 in 可以在原型对象上检测

let obj = {
        name: "wgchen"};
    let hd = {
        
      web: "blog"
    };
    
    //设置hd为obj的新原型
    Object.setPrototypeOf(obj, hd);
    console.log(obj);
    
    console.log("web" in obj); //true
    console.log(obj.hasOwnProperty("web")); //false

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_11_color_FFFFFF_t_70_g_se_x_16 1]

### 获取属性名 ###

使用 `Object.getOwnPropertyNames` 可以获取对象的属性名集合

let hd = {
         name: 'wgchen', year: 2010 }
    const names = Object.getOwnPropertyNames(hd)
    console.log(names) // ["name", "year"]

### assign \* ###

以往我们使用类似jQuery.extend 等方法设置属性，现在可以使用 Object.assign 静态方法。

从一个或多个对象复制属性

"use strict";
    let hd = {
         a: 1, b: 2 };
    hd = Object.assign(hd, {
         f: 1 }, {
         m: 9 });
    
    console.log(hd); //{a: 1, b: 2, f: 1, m: 9}

### 计算属性 ###

对象属性可以通过表达式计算定义，这在动态设置属性或执行属性方法时很好用。

let id = 0;
    const user = {
        
      [`id-${
          id++}`]: id,
      [`id-${
          id++}`]: id,
      [`id-${
          id++}`]: id
    };
    console.log(user);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16]  
使用计算属性为文章定义键名

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]

### 传值操作 ###

对象是引用类型赋值是传址操作，后面会介绍对象的深、浅拷贝操作

let user = {
        
    	name: 'wgchen'
    };
    let hd = {
        
    	stu: user
    };
    hd.stu.name = 'blog';
    console.log(user.name);//blog

## 遍历对象 ##

### 获取内容 ###

使用系统提供的API可以方便获取对象属性与值

const hd = {
        
      name: "wgchen",
      age: 10
    };
    
    console.log(Object.keys(hd)); // ["name", "age"]
    console.log(Object.values(hd)); // ["wgchen", 10]
    console.table(Object.entries(hd)); // [["name","wgchen"],["age",10]]

### 使用 for/in 遍历对象属性 ###

const hd = {
        
      name: "wgchen",
      age: 10
    };
    
    for (let key in hd) {
        
      console.log(key, hd[key]);
    }

![在这里插入图片描述][0e7ca60a28354fe086591d8fcf2fed41.png]

### for/of 遍历迭代对象 ###

不能直接操作对象。  
但Object对象的keys/方法返回的是迭代对象。

#### 获取所有对象键 ####

const hd = {
        
      name: "wgchen",
      age: 10
    };
    
    for (const key of Object.keys(hd)) {
        
      console.log(key);
    }

![在这里插入图片描述][bacd56ff34cf48ec977b51fb239a6ad0.png]

#### 获取所有对象属性值 ####

const hd = {
        
      name: "wgchen",
      age: 10
    };
    
    for (const key of Object.values(hd)) {
        
      console.log(key);
    }

![在这里插入图片描述][c1d2dfc4efc740d7b5960740ecc6b963.png]

#### 同时获取属性名与值 ####

const hd = {
        
      name: "wgchen",
      age: 10
    };
    
    for (const array of Object.entries(hd)) {
        
      console.log(array);
    }

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16]

#### 使用扩展语法同时获取属性名与值 ####

const hd = {
        
      name: "wgchen",
      age: 10
    };
    
    for (const [key, value] of Object.entries(hd)) {
        
      console.log(key, value);
    }

![在这里插入图片描述][7523fe8805b4431fb91248706bc9be3b.png]

#### 添加元素DOM练习 ####

![在这里插入图片描述][ca60ea2efd29416e861461ff16f3b7da.png]

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>wgchen</title>
    </head>
    
    <body>
     
    
    
    </body>
    
    <script>
    
    // let web = { name: "wgchen",url: "blog" };
    
    let lessons = [
      {
         name: "js", click: 23 },
      {
         name: "node", click: 192 }
    ];
    
    let ul = document.createElement("ul");
    
    for (const val of lessons) {
        
      let li = document.createElement("li");
      li.innerHTML = `课程:${
          val.name},点击数:${
          val.click}`;
      ul.appendChild(li);
    }
    
    document.body.appendChild(ul);
    
    </script>
    
    </html>

## 对象拷贝 ##

对象赋值时复制的内存地址，所以一个对象的改变直接影响另一个。

let obj = {
        
      name: 'wgchen',
      user: {
        
      	name: 'blog'
      }
    }
    
    let a = obj;
    let b = obj;
    
    a.name = 'lisi';
    
    console.log(b.name); //lisi

### 浅拷贝 ###

#### 使用 for/in 执行对象浅拷贝 ####

![在这里插入图片描述][6c480522a8a04f73a828b5c1145f686a.png]

#### Object.assign 函数可简单的实现浅拷贝 ####

Object.assign 函数可简单的实现浅拷贝，它是将两个对象的属性叠加后面对象属性会覆盖前面对象同名属性。

#### 使用展示语法也可以实现浅拷贝 ####

let obj = {
        
      name: "wgchen"
    };
    
    let hd = {
         ...obj };
    
    hd.name = "blog";
    
    console.log(hd);
    console.log(obj);

![在这里插入图片描述][51ff23efca644cb29f83f50d70f98d5e.png]

### 深拷贝 ###

浅拷贝不会将深层的数据复制

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16 1]  
是完全的复制一个对象，两个对象是完全独立的对象

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_11_color_FFFFFF_t_70_g_se_x_16 2]

## 构建函数 ##

对象可以通过内置或自定义的构造函数创建。

### 工厂函数 ###

在函数中返回对象的函数称为工厂函数，工厂函数有以下优点

*  减少重复创建相同类型对象的代码
 *  修改工厂函数的方法影响所有同类对象

使用字面量创建对象需要复制属性与方法结构

使用工厂函数可以简化这个过程

### 构造函数 \* ###

和工厂函数相似构造函数也用于创建对象，它的上下文为新的对象实例。

*  构造函数名每个单词首字母大写即 Pascal 命名规范
 *  this 指当前创建的对象
 *  不需要返回 this系统会自动完成
 *  需要使用 new 关键词生成对象

function Student(name) {
        
      this.name = name;
      this.show = function() {
        
        console.log(this.name);
      };
      //不需要返回，系统会自动返回
      // return this;
    }
    
    const lisi = new Student("李四");
    lisi.show(); // 李四
    
    const xj = new Student("wgchen");
    xj.show(); // wgchen

如果构造函数返回对象，实例化后的对象将是此对象

function ArrayObject(...values) {
        
      const arr = new Array();
      arr.push.apply(arr, values);
    
      arr.string = function(sym = "|") {
        
        return this.join(sym);
      };
      
      return arr;
    }
    
    const array = new ArrayObject(1, 2, 3); 
    
    console.log(array); //  [1, 2, 3, string: ƒ]
    console.log(array.string("-")); // 1-2-3

### 严格模式 ###

在严格模式下方法中的 this 值为 undefined，这是为了防止无意的修改window对象。

"use strict";
    
    function User() {
        
      this.show = function() {
        
        console.log(this);
      };
    }
    
    let hd = new User();
    hd.show(); //User
    
    let xj = hd.show;
    xj(); //undefined

### 内置构造 ###

JS中大部分数据类型都是通过构造函数创建的。

const num = new Number(99);
    console.log(num.valueOf()); // 99
    
    const string = new String("wgchen");
    console.log(string.valueOf()); // wgchen
    
    const boolean = new Boolean(true);
    console.log(boolean.valueOf()); // true
    
    const date = new Date(); // 生成的是毫秒时间戳
    // console.log(date); Fri Jan 28 2022 18:57:45 GMT+0800 (中国标准时间)
    console.log(date.valueOf() * 1); // 1643362659790 转换毫秒 2022-01-28 17:37:39
    
    const regexp = new RegExp("\\d+");
    console.log(regexp.test(99));
    
    let hd = new Object();
    hd.name = "wgchen";
    console.log(hd);

![在这里插入图片描述][02639559e7a649ac918e23a997a97360.png]

#### 字面量创建的对象，内部也是调用了Object构造函数 ####

const hd = {
        
      name: "wgchen"
    };
    console.log(hd.constructor); //ƒ Object() { [native code] }
    
    //下面是使用构造函数创建对象
    const blog = new Object();
    blog.title = "blog";
    
    console.log(blog);

![在这里插入图片描述][1552ee7e2add404dbb693fdcf98df1a1.png]

### 对象函数 ###

#### 在JS中函数也是一个对象 ####

function hd(name) {
        }
    
    console.log(hd.toString());
    console.log(hd.length);

![在这里插入图片描述][7a790a45b36b42ccb5fdf34df83c1367.png]

#### 函数是由系统内置的 Function 构造函数创建的 ####

function hd(name) {
        }
    
    console.log(hd.constructor);

![在这里插入图片描述][2792d3a306c640b2ac518ea9ef656749.png]

#### 下面是使用内置构造函数创建的函数 ####

const User = new Function(`name`,`
      this.name = name;
      this.show = function() {
        return this.name;
      };
    `
    );
    
    const lisi = new User("李四");
    console.log(lisi.show()); // 李四

## 抽象特性 ##

将复杂功能隐藏在内部，只开放给外部少量方法，更改对象内部的复杂逻辑不会对外部调用造成影响即抽象。

下面的手机就是抽象的好例子，只开放几个按钮给用户，复杂的工作封装在手机内部，程序也应该如此。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]

### 问题分析 \* ###

下例将对象属性封装到构造函数内部

### 抽象封装 ###

上例中的方法和属性仍然可以在外部访问到，比如 info方法只是在内部使用，不需要被外部访问到这会破坏程序的内部逻辑。

下面使用闭包特性将对象进行抽象处理

## 属性特征 ##

JS中可以对属性的访问特性进行控制。

### 查看特征 ###

使用 `Object.getOwnPropertyDescriptor` 查看对象属性的描述。

"use strict";
    
    const user = {
        
      name: "wgchen",
      age: 18
    };
    
    let desc = Object.getOwnPropertyDescriptor(user, "name");
    console.log(JSON.stringify(desc, null, 2));
    
    /*
    JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
    JSON.stringify(str, null, 4) //使用四个空格缩进
    */

![在这里插入图片描述][3c6d88f182a04df5b3928ba6718089ac.png]  
使用 `Object.getOwnPropertyDescriptors` 查看对象所有属性的描述

"use strict";
    const user = {
        
      name: "wgchen",
      age: 18
    };
    let desc = Object.getOwnPropertyDescriptors(user);
    console.log(JSON.stringify(desc, null, 2));

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_14_color_FFFFFF_t_70_g_se_x_16]

#### 属性包括以下四种特性 ####

<table> 
 <thead> 
  <tr> 
   <th>特性</th> 
   <th>说明</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>configurable</td> 
   <td>能否使用delete、能否需改属性特性、或能否修改访问器属性</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>enumerable</td> 
   <td>对象属性是否可通过for-in循环，或Object.keys() 读取</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>writable</td> 
   <td>对象属性是否可修改</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>对象属性的默认值</td> 
   <td>undefined</td> 
  </tr> 
 </tbody> 
</table>

### 设置特征 ###

使用 `Object.defineProperty` 方法修改属性特性，通过下面的设置属性 name 将不能被遍历、删除、修改。

"use strict";
    
    const user = {
        
      name: "wgchen",
       age: 28
    };
    
    Object.defineProperty(user, "name", {
        
      value: "willem",
      writable: false,
      enumerable: false,
      configurable: false
    });
    
    let desc = Object.getOwnPropertyDescriptors(user);
    console.log(JSON.stringify(desc, null, 2));

![在这里插入图片描述][efcc565b6c8b44a6a75709f0bad58648.png]  
通过执行以下代码对上面配置进行测试，请分别打开注释进行测试

"use strict";
    
    const user = {
        
      name: "wgchen",
       age: 28
    };
    
    Object.defineProperty(user, "name", {
        
      value: "willem",
      writable: false,
      enumerable: false,
      configurable: false
    });
    
    // let desc = Object.getOwnPropertyDescriptors(user);
    // console.log(JSON.stringify(desc, null, 2));
    
    // 不允许修改
    // user.name = "八戒"; // Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'
    
    // 不能遍历
    // console.log(Object.keys(user)); // ['age']
    
    //不允许删除
    // delete user.name;
    // console.log(user); // Uncaught TypeError: Cannot delete property 'name' of #<Object>
    
    //不允许配置
    Object.defineProperty(user, "name", {
        
      value: "无敌",
      writable: true,
      enumerable: false,
      configurable: false
    });
    
    // Uncaught TypeError: Cannot redefine property: name

使用 `Object.defineProperties` 可以一次设置多个属性，具体参数和上面介绍的一样。

"use strict";
    
    let user = {
        };
    Object.defineProperties(user, {
        
      name: {
         value: "wgchen", writable: false },
      age: {
         value: 18 }
    });
    
    console.log(user);
    user.name = "willem"; //TypeError

### 禁止向对象添加属性 ###

`Object.preventExtensions` 禁止向对象添加属性

"use strict";
    
    const user = {
        
      name: "wgchen"
    };
    
    Object.preventExtensions(user);
    user.age = 18; //Error

`Object.isExtensible` 判断是否能向对象中添加属性

"use strict";
    
    const user = {
        
      name: "wgchen"
    };
    
    Object.preventExtensions(user);
    console.log(Object.isExtensible(user)); //false

### 封闭对象 ###

`Object.seal()` 方法封闭一个对象，阻止添加新属性并将所有现有属性标记为 `configurable: false`

"use strict";
    
    const user = {
        
      name: "wgchen",
      age: 18
    };
    
    Object.seal(user);
    
    console.log(
      JSON.stringify(Object.getOwnPropertyDescriptors(user), null, 2)
    );
    
    Object.seal(user);
    console.log(Object.isSealed(user));
    delete user.name; //Error

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
`Object.isSealed` 如果对象是密封的则返回 true，属性都具有 `configurable: false`。

"use strict";
    const user = {
        
      name: "wgchen"
    };
    Object.seal(user);
    console.log(Object.isSealed(user)); //true

### 冻结对象 ###

`Object.freeze` 冻结对象后不允许添加、删除、修改属性，`writable、configurable`都标记 为 false。

"use strict";
    const user = {
        
      name: "wgchen"
    };
    Object.freeze(user);
    user.name = "willem"; //Error

`Object.isFrozen()` 方法判断一个对象是否被冻结

"use strict";
    const user = {
        
      name: "wgchen"
    };
    Object.freeze(user);
    console.log(Object.isFrozen(user)); // true

## 属性访问器 ##

`get` 方法用于获得属性值，`set` 方法用于设置属性，这是JS提供的存取器特性即使用函数来管理属性。

*  用于避免错误的赋值
 *  需要动态监测值的改变
 *  属性只能在访问器和普通属性任选其一，不能共同存在

### get 方法用于获得属性值，setter方法用于设置属性 ###

用户的年龄数据使用访问器监控控制

"use strict";
    
    const user = {
        
      data: {
         name: 'wgchen', age: null },
      set age(value) {
        
        if (typeof value != "number" || value > 100 || value < 10) {
        
          throw new Error("年龄格式错误");
        }
        this.data.age = value;
      },
      get age() {
        
        return `年龄是: ${
          this.data.age}`;
      }
    };
    
    user.age = 99;
    // user.age = 'ss'; Uncaught Error: 年龄格式错误
    console.log(user.age); // 年龄是: 99

#### 使用 get 设置只读的课程总价 ####

#### get/set 批量设置属性的使用 ####

下面通过设置站网站名称与网址体验 get/set 批量设置属性的使用

#### token 储取的示例 ####

下面是设置 token 储取的示例，将业务逻辑使用 get/set 处理更方便，也方便其他业务的复用。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]

#### 定义内部私有属性 ####

"use strict";
    
    const user = {
        
      get name() {
        
        return this._name;
      },
      set name(value) {
        
        if (value.length <= 3) {
        
          throw new Error("用户名不能小于三位");
        }
        this._name = value;
      }
    };
    user.name = "wgchen";
    console.log(user.name); // wgchen

### 访问器描述符 ###

使用 `defineProperty` 可以模拟定义私有属性，从而使用面向对象的抽象特性。

上面的代码也可以使用语法糖 class定义

"use strict";
    
    const DATA = Symbol();
    
    class User {
        
      constructor(name, age) {
        
        this[DATA] = {
         name, age };
      }
      get name() {
        
        return this[DATA].name;
      }
      set name(value) {
        
        if (value.trim() == "") throw new Error("无效的用户名");
        this[DATA].name = value;
      }
      get age() {
        
        return this[DATA].name;
      }
      set age(value) {
        
        if (value.trim() == "") throw new Error("无效的年龄");
        this[DATA].name = value;
      }
    }
    
    let hd = new User("wgchen", 33);
    console.log(hd.name);
    
    hd.name = "willem";
    console.log(hd.name);
    console.log(hd);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16 2]

### 闭包访问器 ###

下面结合闭包特性对属性进行访问控制

*  下例中访问器定义在函数中，并接收参数 v
 *  在 get() 中通过闭包返回 v
 *  在 set() 中修改了v，这会影响 get() 访问的闭包数据 v

let data = {
        
      name: 'wgchen',
    }
    for (const [key, value] of Object.entries(data)) {
        
      observer(data, key, value)
    }
    
    function observer(data, key, v) {
        
      Object.defineProperty(data, key, {
        
        get() {
        
          return v
        },
        set(newValue) {
        
          v = newValue
        },
      })
    }
    data.name = 'blog'
    console.dir(data.name) // blog

## 代理拦截 ##

代理（拦截器）是对象的访问控制，set / get 是对单个对象属性的控制，而代理是对整个对象的控制。

*  读写属性时代码更简洁
 *  对象的多个属性控制统一交给代理完成
 *  严格模式下 set 必须返回布尔值

### 使用方法 ###

"use strict";
    
    const hd = {
         name: "wgchen" };
    
    const proxy = new Proxy(hd, {
        
      get(obj, property) {
        
        return obj[property];
      },
      set(obj, property, value) {
        
        obj[property] = value;
        return true;
      }
    });
    
    proxy.age = 10;
    
    console.log(hd); // {name: 'wgchen', age: 10}

### 代理函数 ###

如果代理以函数方式执行时，会执行代理中定义 apply 方法。

参数说明：函数，上下文对象，参数

下面使用 apply 计算函数执行时间

### 截取字符 ###

下例中对数组进行代理，用于截取标题操作

### 双向绑定 ###

下面通过代理实现 vue 等前端框架的数据绑定特性特性。

![在这里插入图片描述][49f9aad9978c4192900063f559a3e847.gif_pic_center]

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>wgchen</title>
    </head>
    
    <body>
      <input type="text" v-model="title" />
      <input type="text" v-model="title" />
      <div v-bind="title"></div>
    </body>
    <script>
      function View() {
        
        //设置代理拦截
        let proxy = new Proxy(
          {
        },
          {
        
            get(obj, property) {
         },
            set(obj, property, value) {
        
              obj[property] = value;
              document
                .querySelectorAll(
                  `[v-model="${
          property}"],[v-bind="${
          property}"]`
                )
                .forEach(el => {
        
                  el.innerHTML = value;
                  el.value = value;
                });
            }
          }
        );
    
        //初始化绑定元素事件
        this.run = function () {
        
          const els = document.querySelectorAll("[v-model]");
          els.forEach(item => {
        
            item.addEventListener("keyup", function () {
        
              proxy[this.getAttribute("v-model")] = this.value;
            });
          });
        };
        
      }
    
      let view = new View().run();
    </script>
    
    </html>

### 表单验证 ###

![在这里插入图片描述][870291e4b7c343f79bcc1bf1af3f07bb.gif_pic_center]

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>wgchen</title>
    </head>
    
    <style>
      body {
        
        padding: 50px;
        background: #34495e;
      }
    
      input {
        
        border: solid 10px #ddd;
        height: 30px;
      }
    
      .error {
        
        border: solid 10px red;
      }
    </style>
    
    <body>
      <input type="text" validate rule="max:12,min:3" />
      <input type="text" validate rule="max:3,isNumber" />
    </body>
    
    <script>
    
      "use strict";
      //验证处理类
      class Validate {
        
        max(value, len) {
        
          return value.length <= len;
        }
        min(value, len) {
        
          return value.length >= len;
        }
        isNumber(value) {
        
          return /^\d+$/.test(value);
        }
      }
    
      //代理工厂
      function makeProxy(target) {
        
        return new Proxy(target, {
        
          get(target, key) {
        
            return target[key];
          },
          set(target, key, el) {
        
            const rule = el.getAttribute("rule");
            const validate = new Validate();
    
            let state = rule.split(",").every(rule => {
        
              const info = rule.split(":");
              return validate[info[0]](el.value, info[1]);
            });
            
            el.classList[state ? "remove" : "add"]("error");
            return true;
          }
        });
      }
    
      const nodes = makeProxy(document.querySelectorAll("[validate]"));
    
      nodes.forEach((item, i) => {
        
        item.addEventListener("keyup", function () {
        
          nodes[i] = this;
        });
      });
    
    </script>
    
    </html>

## JSON ##

json 是一种轻量级的数据交换格式，易于人阅读和编写。

使用 json 数据格式是替换 xml 的最佳方式，主流语言都很好的支持 json 格式。  
所以 json 也是前后台传输数据的主要格式。

json 标准中要求使用双引号包裹属性，虽然有些语言不强制，但使用双引号可避免多程序间传输发生错误语言错误的发生。

### 声明定义 ###

基本结构

let hd = {
        
      "title": "wgchen",
      "url": "blog",
      "teacher": {
        
      	"name": "willem",
      }
    }
    console.log(hd.teacher.name); // willem

数组结构

let lessons = [
      {
        
        "title": '媒体查询响应式布局',
        "category": 'css',
        "click": 199
      },
      {
        
        "title": 'FLEX 弹性盒模型',
        "category": 'css',
        "click": 12
      },
      {
        
        "title": 'MYSQL多表查询随意操作',
        "category": 'mysql',
        "click": 89
      }
    ];
    
    console.log(lessons[0].title); // 媒体查询响应式布局

### 序列化 ###

序列化是将 json 转换为字符串，一般用来向其他语言传输使用。

let hd = {
        
      "title": "wgchen",
      "url": "blog",
      "teacher": {
        
      	"name": "willem",
      }
    }
    
    console.log(JSON.stringify(hd)); 
    // {"title":"wgchen","url":"blog","teacher":{"name":"willem"}}

根据第二个参数指定保存的属性

let hd = {
        
      "title": "wgchen",
      "url": "blog",
      "teacher": {
        
      	"name": "willem",
      }
    }
    
    console.log(JSON.stringify(hd, ['title', 'url'])); 
    // {"title":"wgchen","url":"blog"}

第三个是参数用来控制 TAB 数量，如果字符串则为前导字符。

let hd = {
        
      "title": "wgchen",
      "url": "blog",
      "teacher": {
        
      	"name": "willem",
      }
    }
    
    console.log(JSON.stringify(hd, null, 4));

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 1]  
为数据添加 toJSON 方法来自定义返回格式

let hd = {
        
        "title": "wgchen",
        "url": "blog",
        "teacher": {
        
            "name": "willem",
        },
        "toJSON": function () {
        
            return {
        
                "title": this.url,
                "name": this.teacher.name
            };
        }
    }
    console.log(JSON.stringify(hd));
    // {"title":"blog","name":"willem"}

### 反序列化 ###

使用 JSON.parse 将字符串 json 解析成对象

let hd = {
        
      "title": "wgchen",
      "url": "blog",
      "teacher": {
        
      	"name": "willem",
      }
    }
    let jsonStr = JSON.stringify(hd);
    console.log(JSON.parse(jsonStr));

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 2]  
使用第二个参数函数来对返回的数据二次处理

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16 3]

[46c9e21fba65460c87470c8dba52d005.png]: https://img-blog.csdnimg.cn/46c9e21fba65460c87470c8dba52d005.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/aef80ca0812f4b609de864fed117a26e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[8710a2355cd54f6f87609cba962ffc18.png]: https://img-blog.csdnimg.cn/8710a2355cd54f6f87609cba962ffc18.png
[314a0a36e53f493d9b2381ae52fe30bd.png]: https://img-blog.csdnimg.cn/314a0a36e53f493d9b2381ae52fe30bd.png
[5b35bc04bdb24afdbb6035687acd7c1c.png]: https://img-blog.csdnimg.cn/5b35bc04bdb24afdbb6035687acd7c1c.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/1c5e5475f3f3450e8a455bb916b0f13f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/00ec8b1ef9e74b899774fcd9e8c39a53.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_11,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_11_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/f7716bcd8851499a82d1d5c0f862c41c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_11,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5552e615734144e78ddbee4df252535a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/8f77f8e63efb4d19b5e126c54902e78d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_19,color_FFFFFF,t_70,g_se,x_16
[0e7ca60a28354fe086591d8fcf2fed41.png]: https://img-blog.csdnimg.cn/0e7ca60a28354fe086591d8fcf2fed41.png
[bacd56ff34cf48ec977b51fb239a6ad0.png]: https://img-blog.csdnimg.cn/bacd56ff34cf48ec977b51fb239a6ad0.png
[c1d2dfc4efc740d7b5960740ecc6b963.png]: https://img-blog.csdnimg.cn/c1d2dfc4efc740d7b5960740ecc6b963.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e3a7bbcf0d114b74b2cd00cb1883cf43.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_17,color_FFFFFF,t_70,g_se,x_16
[7523fe8805b4431fb91248706bc9be3b.png]: https://img-blog.csdnimg.cn/7523fe8805b4431fb91248706bc9be3b.png
[ca60ea2efd29416e861461ff16f3b7da.png]: https://img-blog.csdnimg.cn/ca60ea2efd29416e861461ff16f3b7da.png
[6c480522a8a04f73a828b5c1145f686a.png]: https://img-blog.csdnimg.cn/6c480522a8a04f73a828b5c1145f686a.png
[51ff23efca644cb29f83f50d70f98d5e.png]: https://img-blog.csdnimg.cn/51ff23efca644cb29f83f50d70f98d5e.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/26a658cd07184419ad30e1c0745f7067.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_11_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/ba6293c4a3414125b1c435d8501e0caf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_11,color_FFFFFF,t_70,g_se,x_16
[02639559e7a649ac918e23a997a97360.png]: https://img-blog.csdnimg.cn/02639559e7a649ac918e23a997a97360.png
[1552ee7e2add404dbb693fdcf98df1a1.png]: https://img-blog.csdnimg.cn/1552ee7e2add404dbb693fdcf98df1a1.png
[7a790a45b36b42ccb5fdf34df83c1367.png]: https://img-blog.csdnimg.cn/7a790a45b36b42ccb5fdf34df83c1367.png
[2792d3a306c640b2ac518ea9ef656749.png]: https://img-blog.csdnimg.cn/2792d3a306c640b2ac518ea9ef656749.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/2f8c246526a2491bb9297b66d55e1b0f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[3c6d88f182a04df5b3928ba6718089ac.png]: https://img-blog.csdnimg.cn/3c6d88f182a04df5b3928ba6718089ac.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/05c26cd2d7b649a6bb6864465591437d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_14,color_FFFFFF,t_70,g_se,x_16
[efcc565b6c8b44a6a75709f0bad58648.png]: https://img-blog.csdnimg.cn/efcc565b6c8b44a6a75709f0bad58648.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/45bb3a69a2264cc2bab00e7a365758fd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/3a9aefd0ec4d4a78ad501a104fab681a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/84052436caa84340bccc8518f8db3cae.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_17,color_FFFFFF,t_70,g_se,x_16
[49f9aad9978c4192900063f559a3e847.gif_pic_center]: https://img-blog.csdnimg.cn/49f9aad9978c4192900063f559a3e847.gif#pic_center
[870291e4b7c343f79bcc1bf1af3f07bb.gif_pic_center]: https://img-blog.csdnimg.cn/870291e4b7c343f79bcc1bf1af3f07bb.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/7801b1456c7e4543a6bfd04e40e5207d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/d6d2c8cc0df6465eaa96c3e1071e2cd9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/0d0f4d9f8d014c99b1ef855d6458a67a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_17,color_FFFFFF,t_70,g_se,x_16