原生JavaScript创建不可变对象的方法简单示例

本文实例讲述了原生JavaScript创建不可变对象的方法。分享给大家供大家参考，具体如下：

Javascript是一种灵活的语言，你可以重新定义任何东西，但是当项目变得复杂时，我们会发现可变数据结构的问题。随着JavaScript的最新版本的发布这种情况发生了改变。现在可以创建不可变的对象了。本文介绍如何用三种不同的方法来做。

对象的不变性意味着我们不希望对象在创建后即以任何方式更改（将它们设置为只读类型）。

假设我们需要定义一个 car 对象，并在整个项目中使用它的属性来执行操作。我们不能允许错误地修改任何数据。

const myTesla = {
 maxSpeed: 155,
 batteryLife: 300,
 weight: 2300
};

Object.preventExtensions() 防止扩展

此方法可防止向现有对象添加新属性，preventExtensions() 是不可逆的操作，我们永远不能再向对象添加额外的属性。

Object.isExtensible(myTesla); // true
Object.preventExtensions(myTesla);
Object.isExtensible(myTesla); // false
myTesla.color = 'blue';
console.log(myTesla.color) // undefined

Object.seal() 密封

它可以防止添加或删除属性，seal() 还可以防止修改属性描述符。

Object.isSealed(myTesla); // false
Object.seal(myTesla);
Object.isSealed(myTesla); // true

myTesla.color = 'blue';
console.log(myTesla.color); // undefined

delete myTesla.batteryLife; // false
console.log(myTesla.batteryLife); // 300

Object.defineProperty(myTesla, 'batteryLife'); // TypeError: Cannot redefine property: batteryLife

Object.freeze() 冻结

它的作用与 Object.seal() 相同，而且它使属性不可写。

Object.isFrozen(myTesla); // false
Object.freeze(myTesla);
Object.isFrozen(myTesla); // true

myTesla.color = 'blue';
console.log(myTesla.color); // undefined

delete myTesla.batteryLife;
console.log(myTesla.batteryLife); // 300

Object.defineProperty(myTesla, 'batteryLife'); // TypeError: Cannot redefine property: batteryLife

myTesla.batteryLife = 400;
console.log(myTesla.batteryLife); // 300

提示

如果希望在尝试修改不可变对象时抛出错误，请使用严格模式。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

赞 (0)

相关推荐

  • JS对象属性的检测与获取操作实例分析

    本文实例讲述了JS对象属性的检测与获取操作.分享给大家供大家参考,具体如下: 1.1 in运算符 in运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值), 如果包含就返回true,否则返回false var obj = { p: 1 } 'p' in obj // true 'toString' in obj // true 上面代码中,obj对象上有一个p属性,所以使用in运算符时,得到true,但toString并没有在obj对象上,为什么也返回true呢,这是因为in运算符

  • Javascript面象对象成员、共享成员变量实验

    Javascript面象对象成员、共享成员变量实验

    1)Javascript对象成员实验: 复制代码 代码如下: var f = function d() { this.a = "a";/*这句运行后不存在f.a也不存在d.a存在一个window.a*/ var b = "b";/*局部变量*/ }; var o = { ff: function () { var a = "a"; /*局部变量*/ this.b = "b"; /*这句运行后存在o.b*/ } }; funct

  • 用原生JS获取CLASS对象(很简单实用)

    听说是最常用....我是看了dom编程艺术想到的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

  • JavaScript判断变量是对象还是数组的方法

    typeof都返回object 在JavaScript中所有数据类型严格意义上都是对象,但实际使用中我们还是有类型之分,如果要判断一个变量是数组还是对象使用typeof搞不定,因为它全都返回object 复制代码 代码如下: var o = { 'name':'lee' }; var a = ['reg','blue'];   document.write( ' o typeof is ' + typeof o); document.write( ' <br />'); document.wr

  • JavaScript面向对象之私有静态变量实例分析

    本文实例分析了JavaScript面向对象之私有静态变量.分享给大家供大家参考,具体如下: 大家知道,私有实例变量的原理是根据作用域. 私有实例变量是在Javascript的function内部用var关键字实现,只在function内部有效. 仿照这个,提出私有静态变量的解决方案: <script language="javascript" type="text/javascript"> var JSClass = (function() { var

  • js 多种变量定义(对象直接量，数组直接量和函数直接量)

    对象直接量创建一个对象: 复制代码 代码如下: var obj = {x:[1,2],y:23}; 代码跟下面是一样的. 复制代码 代码如下: var obj=new Object(); obj.x=new Array(1,2); obj.y=23; 测试: 复制代码 代码如下: for(var i in obj) alert(obj[i]); 函数直接量:它是一个表达式而不是语句. 复制代码 代码如下: (function(){})() 如下例: 复制代码 代码如下: (function(){

  • JavaScript面向对象之七大基本原则实例详解

    本文实例讲述了JavaScript面向对象之七大基本原则.分享给大家供大家参考,具体如下: 面向对象编程有自己的特性与原则,如果对于面向对象有一些了解的话,面向对象三大特征,封装.继承.多态,如果对面向对这三个概念不太了解,请参考面向对象之三个基本特征(javaScript) 单一职责 如果我们在编写程序的时候,一类或者一个方法里面包含了太多方法,对于代码的可读性来说,无非是一场灾难,对于我们来说.所以为了解决这个问题,出现了单一职责. 什么是单一职责 单一职责:又称单一功能原则,面向对象五个基

  • JS 创建对象的模式实例小结

    本文实例总结了JS 创建对象的模式.分享给大家供大家参考,具体如下: 1.工厂模式 抽象了创建具体对象的过程,创建了一种函数,封装特定的接口创建对象的细节. 新建一个对象 定义属性和方法 return刚新建的对象 function createPerson(name, age, job) { var obj = new Object(); obj.name = name; obj.age = age; obj.job = job; obj.sayHi = function() { congsol

  • 浅谈js函数中的实例对象、类对象、局部变量(局部函数)

    定义 function Person(national,age) { this.age = age; //实例对象,每个示例不同 Person.national = national; //类对象,所用实例公用 var bb = 0; //局部变量,外面不能访问(类似局部函数) } 调用 var p = new Person("中国", 29); document.writeln("age:" + p.age); document.writeln("obj

  • JavaScript中判断变量是数组、函数或是对象类型的方法

    数组 ECMAScript5中Array.isArray是原生的判断数组的方法,IE9及以上支持.考虑到兼容性,在没有此方法的浏览器中,可以使用 Object.prototype.toString.call(obj) === '[object Array]'替代. 复制代码 代码如下: var isArray = Array.isArray || function(obj) {     return Object.prototype.toString.call(obj) === '[object

  • JavaScript 三种创建对象的方法

    JavaScript中对象的创建有以下几种方式: (1)使用内置对象 (2)使用JSON符号 (3)自定义对象构造 一.使用内置对象 JavaScript可用的内置对象可分为两种: 1,JavaScript语言原生对象(语言级对象),如String.Object.Function等: 2,JavaScript运行期的宿主对象(环境宿主级对象),如window.document.body等. 我们所说的使用内置对象,是指通过JavaScript语言原生对象的构造方法,实例化出一个新的对象.如: 复

  • JS 创建对象(常见的几种方法)

    贴个代码先: function O(user,pwd){ //use constructor this.user=user; this.pwd=pwd; this.get=get; return this; } function O2(user,pwd){ //use factory var obj=new Object(); obj.user=user; obj.pwd=pwd; obj.get=get; return obj; } function O3(){ //use prototype

随机推荐