JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析


Posted in Javascript onAugust 25, 2018

本文实例讲述了JS Object.preventExtensions(),Object.seal()与Object.freeze()用法。分享给大家供大家参考,具体如下:

一、基本介绍

Method Description Param Detail
Object.preventExtensions() 让一个对象变的不可扩展,也就是永远不能再添加新的属性 Object 详细
Object.isExtensible() 判断一个对象是否是可扩展 Object 详细
Object.seal() 让一个对象密封,并返回被密封后的对象。密封对象是指那些不能添加新的属性,不能删除已有属性,以及不能修改已有属性的可枚举性、可配置性、可写性,但可能可以修改已有属性的值的对象。 Object 详细
Object.isSealed() 判断一个对象是否是密封的 Object 详细
Object.freeze() 冻结一个对象并返回被冻结的对象。冻结对象是指那些不能添加新的属性,不能修改已有属性的值,不能删除已有属性,以及不能修改已有属性的可枚举性、可配置性、可写性的对象。也就是说,这个对象永远是不可变的。 Object 详细
Object.isFrozen() 判断一个对象是否被冻结 Object 详细

二、Object.preventExtensions()

Object.preventExtensions 只能阻止一个对象不能再添加新的自身属性,仍然可以为该对象的原型添加属性。

2.1 设置preventExtensions()

var 3water = {
    name: "zuojj"
};
Object.preventExtensions(3water);
3water.url = "https://3water.com";
//Outputs: undefined
console.log(3water.url);

2.2 严格模式下使用会报错

但是在严格模式下会报错:

"use strict";
var 3water = {
    name: "zuojj"
};
Object.preventExtensions(3water);
3water.url = "https://3water.com";
//Outputs: Uncaught TypeError: Can't add property url, object is not extensible
console.log(3water.url);

2.3 不可以扩展属性,但可以更改已存在属性值

var 3water = {
    name: "zuojj"
};
Object.preventExtensions(3water);
3water.url = "https://3water.com";
//Outputs: Uncaught TypeError: Can't add property url, object is not extensible
console.log(3water.url);

2.4 不能阻止删除(delete)现有属性

var 3water = {
    name: "3water",
    url : "https://3water.com"
};
Object.preventExtensions(3water);
delete 3water.url;
//Outputs: {name: "3water"}
console.log(3water);

2.5 使用Object.defineProperty方法为一个不可扩展的对象添加新属性会抛出异常

var 3water = {
    name: "3water"
};
Object.preventExtensions(3water);
3water = Object.defineProperty(3water, "url", {value: "https://3water.com" });
//Outputs: Uncaught TypeError: Cannot define property:url, object is not extensible.
console.log(3water);

2.6 判断一个对象是否可扩展

var 3water = {
    name: "3water",
    url : "https://3water.com"
};
Object.preventExtensions(3water);
//Outputs: false
console.log(Object.isExtensible(3water));

2.7 冻结对象和密封的对象都是不可扩展对象

var 3water = {
    name: "3water"
},
sealed = Object.seal(3water),
frozen = Object.freeze(3water);
//Outputs: false false
console.log(Object.isExtensible(sealed), Object.isExtensible(frozen));

三、Object.seal()

3.1 不可以添加属性,但可以修改属性值

var 3water = {
    name: "zuojj",
    url: "https://3water.com"
};
Object.seal(3water),
3water.sex = "male";
3water.name = "3water";
//Outputs: {name: "3water", url: "https://3water.com"}
console.log(3water);

3.2 严格模式下使用会报错

3.3 delete不能删除现有属性

var 3water = {
    name: "3water",
    url: "https://3water.com"
};
Object.seal(3water),
delete 3water.name;
//Outputs: {name: "3water", url: "https://3water.com"}
console.log(3water);

3.4 Object.defineProperty不能扩展对象属性

var 3water = {
    name: "3water",
    url: "https://3water.com"
};
Object.seal(3water);
Object.defineProperty(3water, "sex", {value: "male"})
//Outputs: Uncaught TypeError: Cannot define property:sex, object is not extensible.
console.log(3water);

上面说到密封对象不可扩展,所以会报错

3.5 判断对象是否为密封对象

// 新建的对象默认不是密封的.
var empty = {};
//Outputs: false
console.log(Object.isSealed(empty));
// 空对象 && 不可扩展 === 密封对象.
Object.preventExtensions(empty);
//Outputs: true
console.log(Object.isSealed(empty));
// 非空对象 && 不可扩展对象不会变成密封对象,因为密封对象的所有自身属性必须是不可配置的.
var hasProp = { fee: "fie foe fum" };
Object.preventExtensions(hasProp);
//Outputs: false
console.log(Object.isSealed(hasProp));
// 如果把这个属性变的不可配置,则这个对象也就成了密封对象.
Object.defineProperty(hasProp, "fee", { configurable: false });
//Outputs: true
console.log(Object.isSealed(hasProp));
console.log("-------------");
// 一个密封对象也可以是一个冻结对象,但不是绝对的.
var s1 = {};
Object.seal(s1);
//Outputs: true
console.log(Object.isFrozen(s1));
var s2 = Object.seal({ p: 3 });
//Outputs: false
console.log(Object.isFrozen(s2)); // 属性"p"可写

四、Object.freeze()

4.1 不能添加属性,且不能修改属性值

var obj = {
    name: "3water",
    url: "https://3water.com"
};
Object.freeze(obj);
obj.sex = "male";
obj.name = "zuojj";
//Outputs: {name: "3water", url: "https://3water.com"}
console.log(obj);

4.2 严格模式下使用会报错

4.3 delete不能删除现有属性

var obj = {
    name: "3water",
    url: "https://3water.com"
};
Object.freeze(obj);
delete obj.name;
//Outputs: {name: "3water", url: "https://3water.com"}
console.log(obj);

4.4 判断对象是否被冻结

var obj = {
    name: "3water",
    url: "https://3water.com"
};
Object.freeze(obj);
//Outputs: true
console.log(Object.isFrozen(obj));

五、兼容性

Object.preventExtensions(),Object.isExtensible(),
Object.seal(),Object.isSealed(),
Object.freeze(),Object.isFrozen()方法是ES5规范的一部分,IE8及以下低版本浏览器不支持。Oprea不支持。

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试运行上述js代码。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
一段效率很高的for循环语句使用方法
Aug 13 Javascript
JavaScript中的类继承
Nov 25 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 #Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 #Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 #Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 #Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 #Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 #Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 #Javascript
You might like
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
php中namespace use用法实例分析
2016/01/22 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
jquery 学习之一 对象访问
2010/11/23 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
使用pdb模块调试Python程序实例
2015/06/02 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
python with (as)语句实例详解
2020/02/04 Python
python数字类型math库原理解析
2020/03/02 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
装潢设计专业推荐信模板
2013/11/26 职场文书
爱护公共设施的标语
2014/06/24 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫