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 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
一个用php3编写的简单计数器
2006/10/09 PHP
php利用cookie实现访问次数统计代码
2011/05/19 PHP
php中curl使用指南
2015/02/05 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
php自定义时间转换函数示例
2016/12/07 PHP
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
javascript截取字符串小结
2015/04/28 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
Python 加密的实例详解
2017/10/09 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
python 制作本地应用搜索工具
2021/02/27 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
创建服务型党组织实施方案
2014/02/25 职场文书
教师学期末个人总结
2015/02/13 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
初中毕业生感言
2015/07/31 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书