Object 对象

Posted SINGLE DOG

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Object 对象相关的知识,希望对你有一定的参考价值。

object.freeze(obj)

描述:冻结obj对象的属性和值,使该对象不能添加属性,修改属性值(属性值是值类型的,如果是引用类型就算冻结了也可以修改)和删除属性。

用处:获得一个不可修改的对象

var obj = {
    prop:‘123‘,
    foo:{
        bar:‘free‘
    }
}

var o = Object.freeze(obj);

o === obj; // 被冻结的对象和返回的对象是同一个对象,不是返回一个对象副本

obj.quaxxor = ‘添加属性‘ // 添加不上
console.log(obj);
obj.prop = ‘修改属性值‘; // 无法修改,还是默认值
console.log(obj);
delete obj.prop // 无法删除
console.log(obj);
obj.foo.bar = ‘dom‘; // 值被修改了
console.log(obj)

Object.create(obj, [propertiesObject])

描述:创建一个新对象,并把现有对象设置成新建对象的__proto__,第二个参数为添加到新对象上的属性(相当于直接使用点号运算符创建新属性);

作用:快速一个基于原型继承的对象

const animal = {
  hasHair: false,
  hairColor:‘white‘,
  getHairColor: function () {
    console.log(‘Animal\‘s hair color is ‘+this.hairColor);
  }
};

const cat = Object.create(animal, {
    name:{ // 新添加的属性值必须是对象,参考Object.defineProperty配置
        writable:true, // 设置name属性的值是可修改的
        configurable:true,
        enumerable:true, // 设置属性可被枚举,如果不设置的话默认是false,在cat对象上打断点会看到name和其他属性显示不太一样
        value:‘‘
    }
});
cat.hasHair = true;
cat.hairColor = ‘black‘;
cat.name = ‘black cat‘; // 如果设置writable:true, configurable:true 无法修改name属性
console.log(cat.__proto__ === animal); // true

cat.getHairColor(); // Animal‘s hair color is black

console.log(cat.name); // black cat

Object.keys(obj)

描述:返回对象的可枚举属性,快速获取对象上的属性名,但不包含对象原型上的属性。Object.keys和for...in的区别是后者可以遍历到对象原型(继承)的属性

作用:快速获取对象上的属性名,不用再用for...in一个一个遍历获取

var obj = Object.create({
    prop:‘123‘,
    foo:{
        bar:‘free‘
    }
}, {
    getFoo:function(){

    }
})

obj.self = ‘self‘;

console.log(Object.keys(obj)) // [‘self‘]

Object.defineProperty(obj, property, descriptor)

描述:在对象上定义新属性,或者修改原有属性

作用:

/* 定义对象的方式有两种,字面量和构造函数
 * 定义属性的方式也有两种,直接在对象上添加和使用Object.defineProperty
 * 使用Object.defineProperty定义和修改属性的方式是使用属性描述符
 *
 */
var val;
var obj = Object.create({
    name:‘zhang‘,
    getName:function(){
        console.log(this.name);
    }
}, {
    age:{ // 使用数据描述符定义属性,该方式有writable[true|false], configurable[true|false], enumerable[true|false], value[任意类型]
        writable:false, // 设置属性的值是否可以被修改,默认为false
        configurable:true, // 设置属性的描述符(age后面的对象就是描述符)是否可以被修改,默认为false
        enumerable:true, // 设置属性能否被for...in和Object.keys枚举,默认为false
        value:27
    },
    sex:{ // 使用存取描述符定义属性,该方式有configurable[true|false], enumerable[true|false], get[function], set[function]
        configurable:true,
        enumerable:true,
        get:function(){
            return val;
        },
        set:function(newValue){
            val = newValue;
        }
    }
})

// 字面量方式定义的对象,其属性描述符的writable, configurable, enumerable 都是true
console.log(Object.getOwnPropertyDescriptor({name:‘zhang‘}, ‘name‘))

// 对比for...in和Object.keys()的区别
for(var key in obj){
    if(typeof obj[key] !== ‘function‘)
        console.log(key);
}

console.log(Object.keys(obj));

// 修改数据描述符,主要对比configurable不同设置的影响
Object.defineProperty(obj, ‘age‘, {
    writable:true
})

// 存取描述符修改属性值
obj.sex = ‘male‘;
console.log(obj.sex);

 

以上是关于Object 对象的主要内容,如果未能解决你的问题,请参考以下文章

Vue报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段

Xcode 快速开发 代码块

js中的Object.assign接受两个函数为参数的时候会发生什么?

Xcode 快速开发 代码块 快捷键

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象