ES6-9【对象密封4种方式、assign、无法拷贝getter/setter的问题】

已于 2022-10-17 17:35:23 修改
阅读量431 收藏 2
点赞数 1
分类专栏： # ES6 文章标签： es6
于 2022-04-11 16:56:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42647547/article/details/124100190
版权

一、对象密封4种方式

（1）查看getter和setter对应的函数名

可以通过getOwnPropertyDescriptor查看

const obj = {
    get foo(){}, 
    set foo(x){}
}
var descriptor = Object.getOwnPropertyDescriptor(obj,'foo');
console.log(descriptor.get.name);//打印get foo
console.log(descriptor.set.name);//打印set foo

getter和setter可以叫做取值函数和存值函数

（2）对象常量【密封方法一】

定义

对象常量即属性不可删除和修改

当一个对象的属性描述配置为configurable: false, writable: false的时候就把这个叫做对象常量

obj = { a:2 }
Object.defineProperty(obj,'a',{
	value: 6,
	configurable: false,
	writable: false,
	enumerable: true
});

缺点

可以添加属性

（3）preventExtensions/isExtensible【密封方法二】

禁止对象的拓展

var obj = {a: 2};
Object.preventExtensions(obj);
obj.b = 3;
console.log(obj);//{a:2}

查看是否可拓展

log(Object.isExtensible(obj)); //false 不可拓展

特性

  1. . 添加属性：会静默失败，严格模式下会报错，属性描述符默认是true
  2. defineProperty添加属性：不会静默失败，直接报错，属性描述符默认是false
'use strict'
obj.b = 6; // 报错

Object.defineProperty(obj,'b',{
	value: 6,
}); // 直接报错

缺点

可以删除属性

（4）seal/isSealed【密封方法三】

原理

底层调用了preventExtensions，且把所有的configurable改为false

密封对象

var obj = {a : 2};
Object.seal(obj);

查看是否密封

log(Object.isSealed(obj))//true

缺点

可以修改属性

（5）freeze/isFrozen【密封方法四】

冻结对象

此方法密封级别最高，属性不能增删改

var obj = {a : 2};
Object.freeze(obj);

查看是否冻结

log(Object.isFrozen(obj));//为true则代表已经冻结

深度冻结

对象里面是对象的情况就需要深度冻结了

function myFreeze(obj){
    Object.freeze(obj);
    for(var key in obj){
        if(typeof(obj[key]) === 'object' && obj[key] !== null){
            myFreeze(obj[key])
        }
    }
}

（6）is

除了下面两种情况，和===没什么区别

console.log(NaN == NaN);//false
console.log(+0 == -0);//true

console.log(Object.is(NaN,NaN))//true
console.log(Object.is(+0,-0))//false

二、assign

（1）作用

用于合并一个对象，返回对象是目标对象（同一个引用）

（2）基本使用

Object.assign(目标对象，…原对象);

let obj = {a: 1};
let tar = {};
let copy = Object.assign(tar,obj);
log(copy);//{a: 1}
log(copy === tar) //true 
log(copy === obj) //false
// 证明assign返回的对象就是原对象

（3）合并与覆盖

合并

const tar = {a: 1};
const tar2 = {b: 2};
const tar3 = {c: 3};
Object.assign(tar,tar2,tar3)
log(tar);//{a:1,b:2,c:3}

覆盖

const tar = {a:1,b:1};
const tar2 = {b:2,c:2};
const tar3 = {c:3} // 自下向上覆盖
Object.assign(tar, tar2, tar3);
console.log(tar);//{a:1,b:2,c:3}

（4）第一个参数为原始值

第一个参数只要求值是对象

undefined和null无法进行合并因为没有包装类

Object.assign(undefined,{a:1}); //报错
Object.assign(null,{a:1}); //报错

原始值有包装类的调用所以可以合并

var test = Object.assign(1,{a:1}); //Number{1,a:1}
var test = Object.assign(true,{a:1}); //Boolean{1,a:1}
var test = Object.assign("1",{a:1}); //String{1,a:1}

（5）第二个参数为原始值

第二个参数值是对象，且必须是可枚举的才可以合并

字符串经过隐式转化后就是一个可枚举的对象，所以可以合并

var test = Object.assign({a:1},"123"); //{0: '1', 1: '2', 2: '3', a: 1}

在这里插入图片描述

属性呈浅紫色说明enumerable为false，即不可枚举

以下经过隐式转化成对象后没有可遍历的属性，剩下的都是私有变量，所以相当于合并一个空对象，合并后就等于返回原对象

Object.assign({a:1}, undefined); //{a:1}
Object.assign({a:1}, null); //{a:1}
var test = Object.assign({a:1},1); //{a:1}
var test = Object.assign({a:1},true); //{a:1}

在这里插入图片描述

（6）拷贝Object.create()

原型属性和不可枚举属性都不能拷贝

var obj = Object.create({foo:1},{ // 参数：原型属性配置，对象属性配置（属性描述符）
    bar:{
        value:2
    },
    baz:{
        value:3,
        enumberable:true
    }
})
console.log(obj)
// {
//     baz:3
//     bar:2
//     __proto__:
//         foo:1
// }
var copy = Object.assign({},obj);
console.log(copy);//{baz:3}

（7）拷贝symbol()

可以生成一个永远都不会重复的字符串

var a = symbol();
var b = symbol();
console.log(a === b);//打印false
 
var a = symbol('a');
var b = symbol('a')
console.log(a == b)//打印false

拷贝

var test = Object.assign({a:'b'},{[Symbol('c')]:'d'}); //symbol返回的是symbol类型，包上[]里面就会有包装类，隐式转换toString
console.log(test);
//{a:"b",Symbol(c):"d"}

（8）浅拷贝

assign只能浅拷贝对象

const obj1 = {a:{b:1}};
const obj2 = Object.assign({},obj1);
obj1.a.b = 2;
log(obj2);//{a:{b:2}}

（9）同名属性替换

assign只能替换整个属性，无法替换单个深入替换

const target = {a:{b:'c',d:'e'}};
const sourse = {a:{b:'hello'}};
Object.assign(target, sourse);
log(target);//{a:{b:hello}}

（10）数组的替换

对象根据属性名替换，数组根据索引替换（隐式转换后索引就是属性名）

var a = Object.assign([1, 2, 3],[4,5]);
log(a);//输出[4,5,3]

（11）扩充属性和方法

往原型上扩充属性和方法

var age  = 1;
function Person(){}
Object.assign(Person.prototype,{
	eat(){},
	age,
})

console.log(Person.prototype); // {age: 1, eat: ƒ, constructor: ƒ}

（12）默认值

通过三个参数来实现

const DEFAULT = {
    url: {
        host: 'www.baidu.com',
        port: 7070
    }
}
function test(option){
    option = Object.assign({},DEFAULT,option); // 参数： 空对象，默认对象，配置对象
    console.log(option);
}
// 传参
test({url:{port:8080}}); //{url:{port:8080}}
// 不传参
test(); //{url:{host:'www.baidu.com',port:7070}}

三、无法拷贝getter/setter的问题

（1）问题描述

由于assign无法拷贝getter和setter（取值函数和赋值函数），于是defineProperties/getOwnPropertyDescriptors就诞生了，它们的存在就是为了解决这个问题 。

const sourse = {
    get foo(){
        return 1;  
    }
}
const target = {};
Object.assign(target,sourse);
console.log(target); //{foo:1}  
 
//这样就不行
const sourse = {
    set foo(value){
        console.log(value);
    }
}
const target = {};
Object.assign(target,sourse);
console.log(target); //{foo:undefined}

（2）defineProperties/getOwnPropertyDescriptors

defineProperties

定义多个属性

var obj = {}
Object.defineProperties(obj,{
    a:{
        value: true,
        writable: true
    },
    b:{
        value: 'hello',
        writable: false
    }
})

getOwnPropertyDescriptors

获取多个属性描述符

console.log(Object.getOwnPropertyDescriptors(obj));
// {
//     a:
//         configurable: false
//         enumerable: false
//         value: true
//         writable:true
// }
// {
//     b:
//         configurable: false
//         enumerable: false
//         value: 'hello'
//         writable:true
// }

（3）解决方案

使用defineProperties拷贝（定义）多个属性，再通过Object.getOwnPropertyDescriptors(sourse)配置多个属性描述配置对象，从而实现拷贝的效果（实则是重新定义了属性）

setter拷贝

const sourse = {
    set foo(value){
        console.log(value);
    }
}
const target = {};
Object.defineProperties(target, Object.getOwnPropertyDescriptors(sourse)); 
console.log(Object.getOwnPropertyDescriptors(sourse))
//输出：
// {
//   foo: {
//     get: undefined,
//     set: [Function: set foo],
//     enumerable: true,        
//     configurable: true       
//   },
// }
console.log(Object.getOwnPropertyDescriptor(target,'foo'));
// 输出：
// {
//	 configurable: true
//	 enumerable: true
//	 get: undefined
//	 set: ƒ foo(value)
// }
console.log(target);
//输出：
// {
//	 set foo: ƒ foo(value)   // 这里set foo是自定义属性，呈浅紫色
//	 [[Prototype]]: Object
//}

getter拷贝

const sourse = {
    get foo(){
        return 1;  
    }
}
const target = {};
Object.defineProperties(target, Object.getOwnPropertyDescriptors(sourse));
console.log(Object.getOwnPropertyDescriptors(sourse))
// 输出：
// {       
//     foo: {
//       get: [Function: get foo],
//       set: undefined,
//       enumerable: true,
//       configurable: true
//     },
// }
console.log(Object.getOwnPropertyDescriptor(target,'foo'));
// 输出：
// {
//	 configurable: true
//	 enumerable: true
//	 get: ƒ foo()
//	 set: undefined
//}
console.log(target);
//输出
// {
//	 foo: (...),     		// (...)说明描述符配置了get  
//   get foo: ƒ foo(),
//   [[Prototype]]: Object
// }

（4）浅拷贝新方法

传统的浅拷贝只能拷贝其属性，这种方法除了属性还能拷贝原型

var obj = {a:1, b:2, c:3}
							// 拷贝obj原型              拷贝obj属性
const clone = Object.create(Object.getPrototypeOf(obj),Object.getOwnPropertyDescriptors(obj))
console.log(clone) // {a:1,b:2,c:3}
 
//优化写法
const clone = (obj) => Object.create(Object.getPrototypeOf(obj),Object.getOwnPropertyDescriptors(obj))

（5）部署对象的方式：

  1. 对象字面量

    const obj = {foo:123}

  2. create方法

    const obj = Object.create({protoKey:'protoVal'});
obj.foo = 123;

  3. assign方法

    const obj = Object.assign(Object.create({protoKey:'protoVal'})，{
	foo: 123;
})

  4. create、getOwnPropertyDescriptors组合

    const obj = Object.create({protoKey:'protoVal'}，getOwnPropertyDescriptors({foo:123}))
小管打天下
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
ES6-9 对象密封4种方式、assign、取值函数的拷贝
Stephy_Yy
07-15 127
一 对象密封 1 Object.preventExtensions 禁止对象拓展，仍可删除 严格模式下报错 const origin = { a: 1 } const fixed = Object.preventExtensions(origin) console.log(origin === fixed) // true console.log(Object.isExtensible(origin)) // false 不可拓展 origin.b = 100 console.log(origi
js代码-ES6 对象
07-16
通过getter和setter可以控制对象属性的读取和设置： ```javascript const obj = { _age: 30, get age() { return this._age; }, set age(value) { if (value || value > 100) { throw new Error('Invalid ...
【JavaScript进阶之旅 ES6篇 第九章】对象密封的四种方式、is()、assign()、取值函数的拷贝
马云
06-28 295
const obj = { get foo() {},set foo(x) {} }console.log(obj.foo.name); // 会报错● 通过get|set来获取属性名const obj = { get foo() {},set foo(x) {} }var descriptor = Object.getOwnPropertyDescriptor(obj, ‘foo’);console.log(descriptor.get.name); // get foo console.log(desc
ES5 对象的扩展(Object.preventExtensions)、密封(Object.seal)和冻结(Object.freeze)
weixin_34159110的博客
03-16 235
前面提到 ES5 对象属性描述符，这篇看看对象的扩展、密封和冻结。 扩展对象 Object.preventExtensions Object.isExtensible 密封对象 Object.seal Object.isSealed 冻结对象 Object.freeze Object.isFrozen   1. Object.preventExtensio...
对象密封的四种方式 Object.is Object.assign
聪明勇敢有力气的博客
10-19 243
对象密封的四种方式 Object.is Object.assign
js高级技巧之密封对象
weixin_34037977的博客
03-11 241
2019独角兽企业重金招聘Python工程师标准>>> ...
ES6学习教程之对象的扩展详解
08-30
此外，这些特性还可以应用于多种场景，如对象属性的默认值设定、对象的克隆、合并多个对象，甚至在处理数组时也可以使用`Object.assign`，尽管在这种情况下可能不是最佳选择。 总之，ES6中的对象扩展提供了更强大的...
js代码-对象的扩展应用
07-16
- **getter/setter**：对象可以拥有getter和setter方法，用于获取和设置属性的值，例如`obj = { get name() { return this._name; }, set name(value) { this._name = value; } }`。 - **Symbol属性**：使用Symbol...
js代码-对象的扩展
07-16
ES5中的getter和setter在ES6中得到扩展，允许更复杂的逻辑处理，如`let obj = { get name() { return this._name; }, set name(value) { if (value.length > 3) this._name = value; } };` 7. **默认属性值** 在...
2021-prg-9a-0318-js-objects
03-25
- **访问器属性**：不直接存储值，而是包含获取（getter）和/或设置（setter）值的方法，如`getAge`和`setAge`。 6. **对象的方法**： 对象的方法是包含在对象中的函数，如`sayHello`。在JavaScript中，函数也是...
ES6 类(Class)的继承(extends)和自定义存(setter)取值(getter)详解
12-21
ES6 类(Class)的继承(extends)和自定义存(setter)取值(getter)详解，博客地址： http://blog.csdn.net/pcaxb/article/details/53784309
JavaScript 复制对象【Object.assign方法无法实现深复制】
闲听风月
08-03 554
在JavaScript这门语言中，数据类型分为两大类：基本数据类型和复杂数据类型。基本数据类型包括Number、Boolean、String、Null、String、Symbol（ES6 新增），而复杂数据类型包括Object，而所有其他引用类型（Array、Date、RegExp、Function、基本包装类型（Boolean、String、Number）、Math等）都是Object类型的实例对
Object.assign实现拷贝存在的问题
weixin_38138887的博客
11-19 608
利用Object.assign实现拷贝的示例代码： function clone(origin) { return Object.assign({}, origin); } var a={name:‘timor’,age:20,people:{name:‘tianmin’,age:23}}; var b=clone(a); a.people.name=‘tian’; a.age=40; conso...
阻止拷贝的三种方法--Cpp
我的心里只有代码
11-02 577
当一个对象是独一无二的时候，为这个对象做一个副本有点没道理，所以我们应阻止对它进行的拷贝，但是，阻止这一动作并不是很直观，通常来说，你不希望class的某一功能，只要不声明对应的函数就行了，但这个策略对拷贝构造函数和赋值操作符思是无效的，因为如果你不声明它们，编译器会替你声明一个默认的，那么该如何解决这个问题呢，通常来说，可以采取如下三种方法。 将拷贝构造函数和赋值操作符声明为私有成员函数，并且...
【ES6】Getter和Setter
qq_22744093的博客
08-28 550
在上面的示例中，我们使用对象字面量定义了一个名为obj的对象，该对象具有一个名为_value的私有属性。我们还定义了一个名为value的getter和setter方法，该方法允许我们获取和设置_value属性的值。在这个示例中，我们使用Object.defineProperty()方法定义了一个名为value的属性，并为其提供了getter和setter方法。除了使用对象字面量，我们还可以使用Object.defineProperty()方法来定义getter和setter方法。
【JavaScript进阶之旅 ES6篇 第八章】函数名/对象拓展、描述符、getter/setter
马云
06-27 523
2、Function构造函数 new Function().name; // ‘anonymous’ 匿名的 (new Function).name; // ‘anonymous’ 匿名的 3、bind|call|apply绑定的函数 ● bind 绑定的函数的name为 bound foo 二、对象的拓展 1、对象的简写 2、箭头函数返回对象的简写 3、对象中函数的写法 4、CommonJS规范：module.exports跟require导出导入文件 5、属性他都要经过包装，变成一个字符串
Object.assign无法实现浅拷贝
qq_41208036的博客
09-01 79
将objOld赋值给objNew后，更改objNew.list[0].child1为‘小红’，再打印objOld.list[0].child1，发现也变成了小红，至此可以推出，Object.assign只能对第一层对象进行浅拷贝，对于对象中属性是复杂类型的，如数组，新老对象在内存中指向的还是一个地方，因此对于这种情况，我们如果需要进行浅拷贝操作，可以使用。{child1:'小李'，child2:'小王'}，{child1:'小胡'，child2:'小白'}name:'小张',
ES6中class的getter和setter在继承中踩坑
开心大表哥
09-19 6510
在 Class 内部可以使用get和set关键字， 对某个属性设置存值函数和取值函数， 拦截该属性的存取行为。 在 Class 内部的get、set用法，看起来比较舒服，而且可以写同名函数了。 class MyClass { constructor() {} get prop() { return 'getter'; } set prop(value) { console.log(...
【ES6 教程】第四章 ES6类02—JavaScript Getter 和 Setter
油墨香^-^的博客
06-21 346
在今天的教程中，我们将了解 JavaScript getter 和 setter 以及如何有效地使用它们。 JavaScript getter 和 setter 简介 以下示例定义了一个名为 Person 的类： class Person { constructor(name) { this.name = name; }} let person = new Person("John");console.log(person.name);
es6-promise依赖下载
最新发布
06-09
下载ES6-Promise库通常有几种方式： 1. **通过npm（Node.js包管理器）**： 如果你在Node.js项目中，可以在命令行输入： ``` npm install es6-promise --save ``` 这将安装并添加到你的项目的依赖中。 2. **...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值