es5 新增对象介绍

  我们都知道在js里对象是很容易改变的

var obj1 ={
      a:‘111‘
}

obj1.a = ‘222‘;
console.log( obj.a ) //output 222 对象的属性发生了变化

现在我们来看看es5 给我提供一个对象的新方法冻结对象(浅冻结)。

Object.freeze(obj) obj是要冻结的对象,Object.freeze()可以防止对象新增属性或方法,防止删除和修改现有的属性和方法。他其实就是让对象变成不可变的数据;

 var obj = {
        a:‘111‘
    }
    Object.freeze( obj );

     obj.a = ‘222‘

    console.log( obj.a ); //output 依然是 111 严格模式下会报错  不可修改

   obj.b = ‘222‘;
    console.log( obj.b ) //output undefined 严格模式下会报错 不可新增

delete obj.a;

console.log( obj.a ) // output 依然是111 严格模式下会报错 不可删除

熟悉js对象(深浅)拷贝的朋友就知道想jQuery extend 的方法第一个参数如果出入的是布尔值true 代表深拷贝,如果忽略直接传入多个对象就代表浅拷贝。其实对象的冻结也是有深冻结和浅冻结之分的。

var obj = {
   a:{
     achild:‘deep‘
    }
}

Object.freeze(obj);

//我现在来改变obj对象a下的achild验证一下 Object.freeze()是否还灵验

obj.a.achild = ‘no effect‘;

console.log( obj.a.achild ) //output no effect; 果然是可以改变的。

obj.a.otherchild = ‘otherchild‘;

console.log(  obj.a.otherchild) //output otherchild 也可以新增 

delete obj.a.otherchild ;
console.log(  obj.a.otherchild) // output undefine obj.a.otherchild 不见了真名删除也是有效的

通过上面的例子我们可以发现Object.freeze(obj) 只可以浅冻结对象 obj.a(浅)  obj.a.achild(深) 

 那我们想深冻结一个对象怎么办?我也可以通过Object.freeze()的特性自己创建一个深冻结函数。

function deepFreeze(obj) {

  var propNames = Object.getOwnPropertyNames(obj);

  propNames.forEach(function(name) {
    var prop = obj[name];

    if (typeof prop == ‘object‘ && prop !== null)
      deepFreeze(prop);
  });

  return Object.freeze(obj);
}

//现在我们来试验一下我们的函数
var obj = {
    a:{}
}
deepFreeze(obj);

obj.a.achild = ‘achild‘ 

console.log( obj.a.achild ) //output undefine 现在实现了深冻结一个对象了

参考文章链接

 
时间: 2024-10-13 12:18:59

es5 新增对象介绍的相关文章

AppleWatch开发教程之Watch应用对象新增内容介绍以及编写运行代码

AppleWatch开发教程之Watch应用对象新增内容介绍以及编写运行代码 添加Watch应用对象时新增内容介绍 Watch应用对象添加到创建的项目中后,会包含两个部分:Watch App 和 WatchKit Extension,如图2.18所示.其中,Watch App部分位于用户的iWatch上,它目前为止只允许包含Storyboard文件和Resources文件.在我们的项目里,这一部分不包括任何代码.WatchKit Extension部分位于用户的iPhone安装的对应App上,这

ES5新增函数之一: Array, JSON, String, Date

ES5即ECMAScript 5.1,在JavaScript语言基础之上添加了很多新的特性,对现有的对象和语句进行相应的增强和规范,主要包括一些新增函数.对象类型增强,以及严格模式编程规范. 今天我们先来介绍以下几个新增的函数: Array.isArray(obj); Array.prototype.forEach(); Array.prototype.indexOf(); Array.prototype.lastIndexOf(); Array.prototype.filter(); Arra

字符串方法,js中的数组方法,ES5新增的数组方法,以及jQuery中的数组方法

说明:本片主要对比介绍与数组操作相关的方法 (一)字符串方法(String对象方法) indexOf() //检索字符串 lastIndexOf() //从后向前搜索字符串 match() //找到一个或多个正则表达式的匹配 replace() //替换与正则表达式匹配的子串 search() //检索与正则表达式相匹配的值 slice() //提取字符串的片断,并在新的字符串中返回被提取的部分 split() //把字符串分割为字符串数组 substr() //从起始索引号提取字符串中指定数目

ES5 新增方法概述

ES5 新增方法概述 ES5 中给我们创建了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括: 数组方法 字符串方法 对象方法 数组方法 迭代(遍历)方法:forEach().map().filter().some().every() array.forEach(function(currentValue,index,arr)) currentValue:数组当前项的值 index:数组当前项的索引 arr:数组对象本身 相似于 map() return 不会中止循环 rray.fil

JavaScript Date对象介绍

Date 日期和时间对象 1. 介绍 Date对象,是操作日期和时间的对象.Date对象对日期和时间的操作只能通过方法. 2. 构造函数 2.1 new Date() :返回当前的本地日期和时间 参数:无 返回值: {Date} 返回一个表示本地日期和时间的Date对象. 示例: var dt = new Date(); console.log(dt); // => 返回一个表示本地日期和时间的Date对象 2.2 new Date(milliseconds) :把毫秒数转换为Date对象 参数

JavaScript Array对象介绍

Array 数组 1. 介绍 数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引.JavaScript数组是无类型:数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型. --<JavaScript权威指南(第六版)> 2. 定义 var names = new Array("张三", "李四", "王五"); //或者 var names = ["张三",

ASP.NET Web API 路由对象介绍

ASP.NET Web API 路由对象介绍 前言 在ASP.NET.ASP.NET MVC和ASP.NET Web API这些框架中都会发现有路由的身影,它们的原理都差不多,只不过在不同的环境下作了一些微小的修改,这也是根据每个框架的特性来制定的,今天我们就来看一看路由的结构,虽然我在MVC系列里写过路由的篇幅不过在这里是Web API 路由对象介绍. ASP.NET Web API路由.管道 ASP.NET Web API 开篇介绍示例 ASP.NET Web API 路由对象介绍 ASP.

Envelope对象介绍

Envelope也称包络线,是一个矩形区域,是每个几何形体的最小外接矩形.每个Geometry都拥有一个Envelope,包括Envelope自身. 它定义了XMax,XMin,YMax,YMin,Height,Width等属性,用于获取或者设置一个存在包络线的对象空间坐标. IEnvelope接口提供的方法有:Expand(按比例缩放包络线的范围,产生一个新的包络对象),offset(通过给定的(X,Y)移动包络线),CenterAt(通过改变包络线中心点来移动包络线),PutCoords(通

Android Application 对象介绍

What is Application Application和Activity,Service一样是android框架的一个系统组件,当android程序启动时系统会创建一个 application对象,用来存储系统的一些信息.通常我们是不需要指定一个Application的,这时系统会自动帮我们创建,如果需要创建自己 的Application,也很简单创建一个类继承 Application并在manifest的application标签中进行注册(只需要给Application标签增加个na