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 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
js实现文字选中分享功能
Jan 25 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
ES6 Set结构的应用实例分析
Jun 26 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
Python的装饰器使用详解
2017/06/26 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
python global和nonlocal用法解析
2020/02/03 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
英语专业毕业生求职信
2014/05/24 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
搭建Yolov5服务器
2022/04/30 Servers
python三子棋游戏
2022/05/04 Python
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers