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 相关文章推荐
jquery 延迟执行实例介绍
Aug 20 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
两个数组去重的JS代码
Dec 04 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
AJAX检测用户名是否存在的方法
Mar 24 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
超级退弹代码
2008/07/07 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
python中while循环语句用法简单实例
2015/05/07 Python
python中几种自动微分库解析
2019/08/29 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
python 实现让字典的value 成为列表
2019/12/16 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
聘用意向书范本
2014/04/01 职场文书
区级文明单位申报材料
2014/05/15 职场文书
运动会班级前导词
2015/07/20 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
python3操作redis实现List列表实例
2021/08/04 Python