资讯专栏INFORMATION COLUMN

javaScript中的Object类型

hyuan / 2857人阅读

摘要:默认为当该属性的为时,才能被赋值运算符改变。可以是任何有效的值数值,对象,函数等。而这些篡改可能会影响对象的内置属性或方法,从而导致对象的正常功能可能无法使用。

属性描述符

JavaScript提供了一个内部数据结构,用于描述对象的值,控制其行为,例如该属性是否可写、是否可配置、是否可修改以及是否可枚举等。这个内部数据结构被称为‘属性描述符’。
每个属性都有自己对应的属性描述符,保存该属性的元信息。

{
    value:"前端",
    writable:false,
    enumerable:true,
    configurable:false,
    get:undefined,
    set:undefined
}

对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符

数据描述符

数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的。数据描述符具有以下可选键值:

value:该属性对应的值,可以是任何有效的JavaScript值(数值,对象,函数等)。默认为undefined

writable:当该属性的writable为true时,value才能被赋值运算符改变。默认为false

configurable:当该属性的configurable为true时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除,默认为false

enumerable:当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中,默认为false

存取描述符

存取描述符是由getter-setter函数对描述的属性。存取描述符具有以下可选键值:

get:给属性提供getter的方法,如果没有getter则为undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象

set:给属性提供setter的方法,如果没有setter则为undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。

configurable:当该属性的configurable为true时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除,默认为false

enumerable:当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中,默认为false。

获取属性描述符

Object.getOwnPropertyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符。

Object.getOwnPropertyDescriptor(obj,prop)

obj:需要查找的目标对象

prop:目标对象内属性名称(String类型)

返回值:如果指定的属性存在于对象上,则返回其属性描述符对象,否则返回undefined

var obj={}
obj.attr="前端";

console.log(Object.getOwnPropertyDescriptor(obj,"attr"));
设置属性描述符

1.Object.defineProperty()方法为对象定义新属性或修改现有属性,并返回该对象

Object.defineProperty(obj,prop,descriptor);

obj:要在其上定义属性的对象

prop:要定义或修改的属性的名称

descriptor:将传递给函数的对象

返回值:被传递给函数的对象

2.Object.defineProperties()方法为对象定义一个或多个新属性或修改现有属性,并返回该对象

Object.defineProperties(obj,props)

obj:要在其上定义属性的对象

props:要定义其可枚举属性或修改的属性描述符的对象

返回值:被传递给函数的对象

属性描述符的可选键值

1.value:表示目标属性对应的值。可以是任何有效的JavaScript值(数值,对象,函数等)。默认为undefined

var obj={};
obj.name="张三";

var attr=Object.getOwnPropertyDescriptor(obj,"name");
console.log(attr.value);

Object.defineProperty(obj,"name",{value:"李四"});
console.log(obj.name);

2.writable:Boolean值,表示目标属性的值是否可以被修改。当该属性的writable为true时,value才能被赋值运算符改变。默认为false

var obj={};
Object.defineProperty(obj,"attr",{
       value:"前端",
       writable:false
});
console.log(obj.attr);
obj.attr=100;
console.log(obj.attr);

3.configurable:Boolean值,表示目标属性的描述符是否可以修改。当该属性的configurable为true时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为false

var obj=Object.definePropety({},"attr",{
    value:"大前端",
    configurable:false
});

Object.definePropety(obj,"attr",{value:100});
Object.definePropety(obj,"attr",{writable:true});
Object.definePropety(obj,"attr",{enumerable:true});
Object.definePropety(obj,"attr",{configurable:true});

4.enumerable:Boolean值,表示目标属性是否可遍历。当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中。默认为false
如果对象的属性的enumerable的值为false,以下三种操作取不到该属性:

for...in语句

Object.keys()方法

JSON.stringify()方法

var obj={};
Object.defineProperty(obj,"attr",{value:"前端",enumerable:false});
for(var key in obj){console.log(key);}
console.log(Object.keys(obj));
console.log(JSON.stringify(obj));
属性描述符的存取器

对象的属性除了可以直接定义以外,还可以使用存取器进行定义。其中setter为存值函数,使用属性描述符中的set;getter为取值函数,使用属性描述符中的get

var obj=Object.defineProperty({},"attr",{
    get:function(){
        return "前端";
    },
    set:function(){
        console.log("setter:"+value);
    }
});

console.log(obj.attr);
obj.attr=100;

JavaScript中除了上述存取器的写法之外,还提供了以下写法:

var obj={
    get attr(){
        return "前端";
    },
    set attr(value){
        console.log("setter:"+value);
    }
}

console.log(obj.attr);
obj.attr=100;
防篡改

定义的对象默认在任何时候、任何位置,无论有意义的还是无意义的都可以修改对象的属性或方法。
而这些篡改可能会影响对象的内置属性或方法,从而导致对象的正常功能可能无法使用。
1.禁止扩展:禁止为对象扩展新的属性或方法

var obj={};
Object.preventExtensions(obj);
obj.attr="前端";
console.log(Object.isExtensible(obj));
console.log(obj.attr);

2.密封对象:禁止扩展新的属性或方法,禁止配置现有的属性或方法的描述符,仅允许读写属性的值

var sealed={};
Object.seal(sealed);
Object.isSealed(sealed);

Object.isExtensible(sealed);

3.冻结对象:禁止对对象执行任何修改操作

var frozen={1:81};
Object.isFrozen(frozen);
Object.freeze(frozen);
Object.isFrozen(frozen);

Object.isSealed(frozen);
Object.isExtensible(frozen);

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108184.html

相关文章

  • JavaScript 中的强制类型转换

    摘要:完整清单是中添加,此处不予介绍布尔值用来表示可能是真或假的值。结果抽象比较运算符在比较它们之前在类型之间进行自动转换。中的隐式转换称为强制类型转换,并在规范中定义。这些内置类型可用于在不同类型之间进行显式转换。 翻译:疯狂的技术宅原文:https://www.valentinog.com/bl... 本文首发微信公众号:前端先锋欢迎关注,每天都给你推送新鲜的前端技术文章 show...

    endiat 评论0 收藏0
  • JavaScript中的数据类型及其检测

    摘要:中的数据类型及其检测数据类型基本类型引用类型类型检测只能检测基本数据类型,对于还有一个用于检测某个对象的原型链是否包含某个构造函数的属性适用于检测对象,它是基于原型链运作的属性返回一个指向创建了该对象原型的函数引用,该属性的值是哪个函数本身 JavaScript中的数据类型及其检测 1. 数据类型 1.1 基本类型 Number String Boolean Null Undefin...

    Bryan 评论0 收藏0
  • 前端面试题 -- JavaScript (一)

    摘要:前言前两天总结了一下方面的面试题传送门,今天翻看了一些面试中常见的几个问题只是一部分,会持续更新,分享给有需要的小伙伴,欢迎关注如果文章中有出现纰漏错误之处,还请看到的小伙伴留言指正,先行谢过以下有哪些数据类型种原始数据类型布尔表示一个逻辑 前言 前两天总结了一下HTML+CSS方面的面试题 (传送门),今天翻看了一些 JavaScript 面试中常见的几个问题(只是一部分,会持续更新...

    junnplus 评论0 收藏0
  • JavaScript的数据类型及其检测

    摘要:值的比较只进行值的比较会进行数据类型的转换。只要在当前实例的原型链上,我们用其检测出来的结果都是。但检测与不一样,还可以处理基本数据类型的检测。 showImg(https://segmentfault.com/img/remote/1460000016733921); 一、JavaScript有几种类型的值? Javascript有两种数据类型,分别是基本数据类型和引用数据类型。其中...

    starsfun 评论0 收藏0
  • JavaScript的数据类型及其检测

    摘要:值的比较只进行值的比较会进行数据类型的转换。只要在当前实例的原型链上,我们用其检测出来的结果都是。但检测与不一样,还可以处理基本数据类型的检测。 showImg(https://segmentfault.com/img/remote/1460000016733921); 一、JavaScript有几种类型的值? Javascript有两种数据类型,分别是基本数据类型和引用数据类型。其中...

    dingding199389 评论0 收藏0
  • JavaScript的数据类型及其检测

    摘要:值的比较只进行值的比较会进行数据类型的转换。只要在当前实例的原型链上,我们用其检测出来的结果都是。但检测与不一样,还可以处理基本数据类型的检测。 showImg(https://segmentfault.com/img/remote/1460000016733921); 一、JavaScript有几种类型的值? Javascript有两种数据类型,分别是基本数据类型和引用数据类型。其中...

    Moxmi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<