JS-对象-2

对象的复制

浅拷贝的几种方式

我们知道当一个对象a赋值给另一个对象b的时候，是把a地址赋值，我们之后操作修改b的时候也会更改a中的内容。我们不希望这种情况发生，所以就想要给b新开辟一个内存，再把a中的内容复制。

1
2
3
4
5
6
7
8
9
10
/* 方式一：循环 */
let a = { name:'liqianru',lesson:'js'};
let b = {};
for( let key in a ){
    b[key] = a[key];
}
b.name = 'liqianru2';
/* a:{ name:'liqianru',lesson:'js'}
   b:{ name:'liqianru2',lesson:'js'} */

1
2
3
4
5
6
/* 方式二：Object.assign */
let a = { name:'liqianru',lesson:'js'};
let b = Object.assign({},a);
b.name = 'liqianru2';
/* a:{ name:'liqianru',lesson:'js'}
   b:{ name:'liqianru2',lesson:'js'} */
1
2
3
4
5
6
/* 方式三：展开语法 */
let a = { name:'liqianru',lesson:'js'};
let b = {...a};
b.name = 'liqianru2';
/* a:{ name:'liqianru',lesson:'js'}
   b:{ name:'liqianru2',lesson:'js'} */
  • 可以发现，这种复制，都是复制的单层的属性，没有出现要复制的属性仍是一个对象的这种嵌套的情况，我们称这种复制叫浅拷贝。
对象的深拷贝
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
let obj = {
    name:'liqianru',
    lessons:[
        { name:'js' },
        { name:'css' }
    ],
}

function deep(obj){
    let result = {};
    obj instanceof Array?result=[]:null;
    for( let key in obj ){
        result[key]= typeof obj[key]=='object'?deep(obj[key]):obj[key];
    }
    return result;
}

对象的封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* 封装：把数据和它相关的行为打包（封装）起来。 隐藏实现信息、细节，只暴露需要的 API */
封装模式：
工厂模式
function objectFactory(name,age){
    let obj = {
        name,
        age,
        show(){
            console.log(`我的名字：${this.name}`);
        }
    };
    return obj;
}
let user1 = objectFactory('liqianru',20);
let user2 = objectFactory('liqianru2',21);

构造函数模式
function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    }
}
var person1 = new Person("John", 18, "Teacher");
var person2 = new Person("Greg", 30, "Doctor");

对象的属性特征

能不能对对象的属性设置一些特征：例如不可枚举，只读等特征

  • 查看对象属性特征
1
2
3
4
5
6
7
let obj = { name:'liqianru',lesson:'js' };
console.log(JSON.stringify(Object.getOwnPropertyDescriptor(obj,'name')));
/* 输出：{"value":"liqianru","writable":true,"enumerable":true,"configurable":true} */

/* 获得对象的所有属性特征 */
console.log(JSON.stringify(Object.getOwnPropertyDescriptors(obj)));

  • 修改属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* defineProperty可以为对象新增属性并设置其特征（默认值为false），也可以对现有属性修改其特征 。还可以为属性设置访问器*/
Object.defineProperty(obj,'grade',{

});
/* 在严格模式下对不可修改的属性进行修改会报错 */

Object.defineProperty(obj,'name',{
    enumerable:false,//不可枚举
    configurable:false//不可配置：不可用defineProperty修改，也不可删除
});

/* 批量设置 */
Object.definePorperties(obj,{
    name:{
        enumerable:false,
    },
    grade:{
        writable:true
    }
})

  • 设置对象为不可添加属性的对象（扩展）
1
2
3
4
5
6
7
8
9
Object.preventExtensions(obj);
obj.id = 1;//属性添加失败，在严格模式下会报错

/* 判断一个对象是否可添加属性 */

if(Object.isExtensible(obj)){
    ...
}

封闭对象

封闭对象：使对象不可添加属性，不可删除，不可修改属性特征，当前属性的值只要原来是可写的就可以改变。当对象需要被保护的时候可用

1
2
3
4
5
6
7

Object.seal(obj);

/* 判断 */
if(!Object.isSealed(obj)){

}

冻结对象

封闭对象：冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。

1
Object.freeze(obj);

使用访问器(setter,getter)保护数据

使用场景：当我设置了对象user，里面的属性的值可以被随意更改，对数据的质量没有把关。访问器就起到了把关的作用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 初识 */
let user={
    data:{ name:'liqianru',age:20 },/*  */
    set age(value){
        if(typeof value != 'number' || value>100 || value <0){
            throw new Error("年龄格式错误");
        }
        else{
            this.data.age = value;
        }
    },
    get age(){ return  this.data.age; }
}
user.age = 20;/* Uncaught Error: 年龄格式错误 */
  • 访问器的优先级
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let user={
    name:'liqianru',
    age:10,/* 当对象中同时暴露属性age和伪属性age时，谁的优先级高？ */
    set age(value){
        /* if(typeof value != 'number' || value>100 || value <0){
            throw new Error("年龄格式错误");
        }
        else{
            this.age = value;
        } */
        console.log('setter');
    },
    get age(){ return  this.age; }
}
user.age = 22;//输出setter,说明访问器的优先级高，且输出user时{name: "liqianru"}，age没了，所以我们才要吧对象的属性放到data中，避免这种冲突

  • 使用访问器伪造属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let lesson = {
    list:[
        {name:'js',price:100},
        {name:'css',price:140},
        {name:'vue',price:40},
    ],
    get total(){
        return this.list.reduce((sum,cur)=>{  return sum+cur.price;  },0);
    }
}
/* 
lesson.total=>280
同时lesson.total不可修改
 */

  • 使用访问器批量设置属性
1
2
3
4
5
6
7
8
9
10
11
12
let user = {
    name:'',
    lesson:'',
    set data(v){
         [this.name,this.lesson]=v.split(",");
    },
    get data(){
        return `${this.name}-${this.lesson}`;
    }
}
user.data = "liqianru,js";
/* user:{name: "liqianru", lesson: "js"} */

TOKEN读写操作

  • 什么是TOKEN（令牌）？

Auth0中的解释：TOKEN分为两类： ID tokens and access tokens.
ID tokens：用于身份验证
access tokens：拥有这个令牌可以获取到API的使用权
所以就需要存储这些TOKEN，就可以使用访问器

1
2
3
4
5
6
7
8
9
10
 
let Request = {
    set token(content){
        localStorage.setItem("token",content);
    },
    get token(){
        return localStorage.getItem("token");
    }
}

构造函数&class中使用访问器

  • 构造函数
1
2
3
4
5
6
7
8
9
10
11
function User(name,age){
   let data = { name,age };//构造函数内的私有属性
   Object.defineProperties(this,{/* 通过闭包的特性， defineProperties函数内可以访问到父级变量*/
       name:{
           get(){ return data.name; },
           set(value){ data.name = value; }
       }
   });
}
let u = new User();//u:User:{} 看不见name和age，数据私有被保护
u.name = 'li';//u:User:{},但是u.name输出为：li
  • class
1
2
3
4
5
6
7
8
9
10
11
12
class User{
    constructor(name,age){
        this.data = { name,age }
    }
    get name(){
        return this.data.name;
    }
    set name(value){
        this.data.name = value;
    }
}
let u = new User("li",22);//User {data: {…}},想要data不被外界访问到，可以使用Symbol：将data = Symbol();
赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

不断学习的鸽子