Object.seal()与Object.freeze()区别

快乐打工仔 分类:实例代码

Object.seal()与Object.freeze()区别属于前端实例代码,有关更多实例代码大家可以查看

标题中的两个方法的功能非常的相似,所以很多朋友不知道如何区分。

下面将结合代码演示介绍一下它两者的区别。

关于两个方法的基本用法可以参阅如下两篇文章:

(1).Object.seal方法参阅JavaScript Object.seal()一章节。

(2).Object.freeze方法参阅JavaScript Object.freeze()一章节。

方法的相同点:

(1).ES5新增。

(2).对象不可能扩展,也就是不能再添加新的属性或者方法。

(3).对象已有属性不允许被删除。

(4).对象属性特性不可以重新配置。

方法不同点:

Object.seal方法生成的密封对象,如果属性是可写的,那么可以修改属性值。

Object.freeze方法生成的冻结对象,属性都是不可写的,也就是属性值无法更改。

关于属性特性可以参阅configurable、enumerable和writable介绍一章节。

代码实例如下:

"use strict"
let antzone = {
  webName:"犀牛前端部落",
  url: "http://www.pipipi.net",
  age:6
};
Object.seal(antzone);
antzone.age=5;

代码运行效果截图如下:

前端教程

添加新属性会报错,对于Object.freeze方法也是如此,不再演示。

let antzone = {
  webName:"犀牛前端部落",
  url: "http://www.pipipi.net",
  age:6
};
Object.seal(antzone);
console.log(Object.getOwnPropertyDescriptor(antzone,"webName"));

代码运行效果截图如下:

前端教程

可以看到webName属性的configurable特性值为false。

对于冻结对象也是如此,下面也不再演示。

"use strict"
let antzone = {
  webName:"犀牛前端部落",
  url: "http://www.pipipi.net",
  age:6
};
Object.freeze(antzone);
antzone.age=5;

代码运行效果截图如下:

前端教程

在严格模式下,修改冻结对象属性值,会报错。

非严格模式下,虽然不会报错,但修改属性值无效。

"use strict"
let antzone = {
  webName:"犀牛前端部落",
  url: "http://www.pipipi.net",
  age:6
};
Object.seal(antzone);
antzone.age=5;
console.log(antzone.age);

代码运行效果截图如下:

前端教程

密封对象的属性值是可以修改的,当然前提是,属性本来就是可写的。

Object.seal()与Object.freeze()区别,这样的场景在实际项目中还是用的比较多的,关于Object.seal()与Object.freeze()区别就介绍到这了。

回复

我来回复
  • 暂无回复内容