javaScript中的Object类型

本文深入探讨了JavaScript中的属性描述符概念,包括数据描述符和存取描述符的区别及用法,介绍了如何通过Object.getOwnPropertyDescriptor()和Object.defineProperty()方法来获取和设置属性描述符。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

属性描述符

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);
### JavaScriptObject 类型的使用方法 #### 创建对象的方式 在 JavaScript 中,有多种方式来创建 `Object` 对象: - **字面量表示法** 这是最常见的创建对象的方法。 ```javascript let objLiteral = { name: "example", value: 42, }; ``` - **通过构造函数** 可以显式调用 `new Object()` 来创建一个新的对象实例。不过通常建议采用更简洁的对象字面量形式[^4]。 ```javascript let newObj = new Object(); newObj.name = 'test'; ``` #### 访问和设置属性 可以通过点操作符`.` 或者方括号`[]`语法来访问或修改对象上的属性: ```javascript let person = {name: "John", age: 30}; console.log(person.name); // John person['age'] += 1; ``` #### 原型链继承机制 每个对象都有一个内部链接指向其原型对象 (`[[Prototype]]`) ,这构成了所谓的“原型链”。当尝试读取某个不存在于当前对象中的属性时,JavaScript 解释器会在原型链上查找直到找到为止或者到达顶端 (通常是 `null`)。 对于任何普通对象而言,默认情况下它们都继承自 `Object.prototype`,这意味着可以直接利用后者提供的通用功能而无需重新实现这些特性。例如,下面的例子展示了如何验证特定对象是否存在于另一个对象的原型链中[^1]: ```javascript // 所有的内置类型(除了那些明确指定其他原型的对象)都会返回true, // 表明它们最终都是基于Object.prototype构建起来的。 console.log(Object.prototype.isPrototypeOf({})); // true console.log(Object.prototype.isPrototypeOf([])); // true console.log(Object.prototype.isPrototypeOf(/xyz/)); // true console.log(Object.prototype.isPrototypeOf(Object.create(null))); // false ``` #### 获取对象的原型 要获取给定对象的实际原型,可以使用 `Object.getPrototypeOf()` 函数。此函数接收单个参数并返回该参数所关联的原型对象;如果没有任何可追溯到更高层次级联结构的信息,则返回 `null`[^2]. ```javascript const protoObj = {}; const myInstance = Object.create(protoObj); console.log(Object.getPrototypeOf(myInstance) === protoObj); // true ``` #### 定义 getter 和 setter 方法 为了控制对某些字段的操作行为,可以在定义属性的同时为其配置相应的存取描述符(`get/set`). 当有人试图读写受保护的数据成员时就会触发对应的逻辑处理过程[^3]. 下面是一个简单的例子说明了这一点: ```javascript let temperature = { _value: 0, set celsius(newValue){ this._value = newValue; }, get fahrenheit(){ return this._value * 9 / 5 + 32; } }; temperature.celsius = 100; console.log(temperature.fahrenheit); // 输出:212 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值