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 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 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
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
php自动载入类用法实例分析
2016/06/24 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
基于python的字节编译详解
2017/09/20 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
Python简单实现区域生长方式
2020/01/16 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
银行门卫岗位职责
2013/12/29 职场文书
日化店促销方案
2014/03/26 职场文书
整改报告格式
2014/11/06 职场文书
2014年公务员工作总结
2014/11/18 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
Django与数据库交互的实现
2021/06/03 Python
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
Redis基本数据类型String常用操作命令
2022/06/01 Redis
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL