阅读 276

Object类型

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动

Object类型

Object 构造函数创建一个对象包装器。

如下代码展示了Object创建对象:

// 表示创建一个空对象
var obj1 = new Object(null);
var obj2 = new Object(undefined);

//表示创建一个与给定值对应类型的对象
var obj3 = new Object(100);
console.log(obj3);//[Number: 100]

var num =new Number(100);
console.log(num);//[Number: 100]

// obj4和obj5等价;当以非构造函数形式被调用时,Object 等同于 new Object()。
var obj4 = Object();//函数调用
var obj5 = new Object();//构造函数调用
复制代码

操作对象的属性

一、属性描述符

JavaScript提供了一个内部数据结构,用于描述对象的值,控制其行为,例如该属性是否可写、是否可配置、是否可修改以及是否可枚举等。这个内部数据结构被称为“属性描述符”。

每个属性都有自己对应的属性描述符,保存该属性的元信息。

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


1、数据描述符

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

  • value:该属性对应的值。可以是任何有效的JavaScript值(数值,对象,函数等)。默认为undefined。
  • writable:当且仅当该属性的writable为true时,value才能被复制运算符改变。默认为false。
  • configurable:当且仅当该属性的configurable为true时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为false。
  • enumerable:当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中。默认为false。

(1)获取属性描述符

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

Object.getOwnPropertyDescriptor(obj,prop)
复制代码
  • obj:需要查找的目标对象
  • prop:目标对象内属性名称(String类型)。
  • 返回值:如果指定的属性存在在于对象上,则返回其属性描述符对象,否则返回undefined。

注意:如果该方法的第一个参数不是对象,会报错(TypeError)。

如下代码展示了通过使用Object.getOwnPropertyDescriptor()方法得到obj对象上的属性描述符。

/*
    通过定义对象(属性或方法)这种方式
    * 属性默认都是数据描述符
*/
var obj = {
    name:'猪猪侠'
}
var result = Object.getOwnPropertyDescriptor(obj,'name')
console.log(result)//{ value: '猪猪侠', writable: true, enumerable: true, configurable
: true }
复制代码

(2)设置属性描述符

1、Object.defineProperty()方法为对象定义新属性或修改现有属性,并返回该对象。
Object.defineProperty(obj,prop,descriptor)
复制代码
  • obj:要在其上定义属性的对象。
  • prop:要定义或修改的属性的名称。
  • descriptor:将被定义或修改的属性描述符
  • 返回值:被传递给函数的对象
2、Object.defineProperties()方法为对象定义一个或多个新属性或修改现有属性,并返回该对象。
Object.defineProperties(obj,props)
复制代码
  • obj:要在其上定义属性的对象。
  • props:要定义其可枚举属性或修改的属性描述符的对象。
  • 返回值:被传递给函数的对象。

①如下代码展示了设置属性描述符value的操作:

var obj = {
    // 定义对象的同时定义了该属性以及值(值可修改,可删除和可枚举的)
    name:'猪猪侠'
}
/*
*   Object.defineProperty(obj,prop,desc)
*   obj - 表示目标对象
*   prop - 表示目标对象的目标属性名称
*   desc - 表示属性描述符,必须是对象格式
* {
*       value:值
* }
*   返回值 - 返回传递的对象
* */
Object.defineProperty(obj,'name',{
    value:'小菲菲'
});
console.log(obj.name);//小菲菲

/*
*   同样都是为对象新增属性
*   1、如果直接使用”对象名.属性名 = 值“->可修改、可删除以及可枚举的
*   2、如果使用Object.defineProperty()方法新增属性
        * 该新属性是不可修改、不可删除以及不可枚举的
* */

Object.defineProperty(obj,'age',{
    value:18
});
console.log(obj.age)//18‘’

var result1 = Object.getOwnPropertyDescriptor(obj,'age');
console.log(result1)//{ value: 18, writable: false, enumerable: false, configurable: false }
// 一旦属性的值是不可修改的——如果执行修改操作时 -> 没有语法报错,但是无效
obj.age = 80;
console.log(obj.age);//18

obj.job = '超人强';
var result2 = Object.getOwnPropertyDescriptor(obj,'job');
console.log(result2);//{ value: '超人强', writable: true, enumerable: true, configurable: true }
复制代码

②:设置属性描述符 writable

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

var obj = {
    // 定义对象的同时定义了该属性以及值(值可修改,可删除和可枚举的)
    name:'猪猪侠'
}

//修改现有属性
Object.defineProperty(obj,'name',{
    value:'小菲菲',
    writable:false//不可修改
});
console.log(obj.name);//小菲菲
//修改name的属性值;
obj.name ='超人强';
console.log(obj.name);//小菲菲

// 修改新增属性
Object.defineProperty(obj,'age',{
    value:18,
    writable:true
});
console.log(obj.age);//18
// 修改age的值
obj.age = 80;
console.log(obj.age);//undefined
复制代码

③:设置属性描述符 configurable

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

如下代码展示了 configurable属性描述符的操作

var obj = {
    // 定义对象的同时定义了该属性以及值(值可修改,可删除和可枚举的)
    name:'猪猪侠'
}

// 修改现有属性
Object.defineProperty(obj,'name',{
    value:'超人强',
    writable:false,//控制当前属性是否可修改
    configurable:true//控制当前属性是否可删除
});
console.log(obj.name);//超人强
//修改name属性值
obj.name = '小菲菲';
console.log(obj.name)//超人强
//删除name的属性值
delete obj.name;
console.log(obj.name)//undefined
复制代码

④:设置属性描述符enumerable

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

var obj = {
    // 定义对象的同时定义了该属性以及值(值可修改,可删除和可枚举的)
    name:'猪猪侠'
}
Object.defineProperty(obj,'name',{
    value:'超人强',
    enumerable:false
});
console.log(obj.name);//超人强
/*
属性描述符enumerable - 控制当前属性是否可被枚举(遍历)
    *仅能循环遍历对象中可被枚举的属性
        *for...in 语句
        * keys()方法
    * 可以循环遍历对象中可被枚举和不可被枚举的属性
        * getOwnPropertyNames()方法
*/
for (var i in obj){
    console.log(i);
}
var result1 = Object.keys(obj);
console.log(result1);//[]
var result2 = Object.getOwnPropertyNames(obj);
console.log(result2);//[ 'name' ]
复制代码

⑤:属性描述符设置方法

var obj = {
    sayMe:function(){
        console.log('this is function');
    }
}
var result = Object.getOwnPropertyDescriptor(obj,'sayMe');
console.log(result);
// {
// value: [Function: sayMe],
// writable: true,
//     enumerable: true,
//     configurable: true
// }

Object.defineProperty(obj,'sayMe',{
    value : function () {
            console.log('this is new function');
    },
    writable : true //可修改
});
obj.sayMe();//this is new function

obj.sayMe = function () {
    console.log('这是超人强');
}
obj.sayMe();//这是超人强
复制代码

2、存取描述符

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

  • get:给属性提供getter的方法,如果没有getter则为undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象。
  • set:给属性提供setter的方法,如果没有setter则为undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。
  • configurable:当且仅当该属性的configurable为true时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为false。
  • enurnerable:当且仅当该属性的enurnerable为true时,该属性才能够出现在对象的枚举属性中。默认为false。

(1)属性描述符存取器

var obj = {
    // 定义对象的同时定义了该属性以及值(值可修改,可删除和可枚举的)
    name:'猪猪侠'
}
var value ;//全局变量
Object.defineProperty(obj,'name',{
    // 获取指定的属性值
    get : function () {//当获取或访问当前属性时,会调用get 方法
        console.log('this is a get function');
        /*
            类似于数据描述符中的value
            *get 方法在被调用时,不能传递任何参数
            * get 方法在被调用时,允许传递this关键字
                * this - 表示当前的目标对象(不能调用对象的当前目标属性)
        */
        return value ;//由于变量被初始化,调用时可能结果为undefined
    },
    /*
        set方法用于定义当前目标属性的修改作用
        * 该方法接受唯一的一个参数 ->作为当前目标属性的新的值
        * 通过属性修改操作指定的新的值 -> 作为形参对应的实参
    */
    set : function (newvalue) {
        console.log('this is set function:'+ value );
        /*
           * set 方法在被调用时,允许传递this关键字
                * this - 表示当前的目标对象(不能调用对象的当前目标属性)
        */
        value = newvalue;
    }
});
 console.log(obj.name);//undefined

obj.name = '小菲菲';
console.log(obj.name)//小菲菲
复制代码

(2)方法二

var value;
var obj  = {
    //存取描述符中的get
    get attr(){ //表示当前目标属性名称
        return value;
    },
    // 存取描述符中的set
    set attr(newValue){
        console.log('setter:'+newValue);
        value = newValue;
    }
}
console.log(obj.attr);//undefined
obj.attr = 100;//setter:100
复制代码

防篡改对象

防篡改对象是什么?

定义的对象默认在任何时候、任何位置,无论有意义的还是无意义的都可以修改对象的属性或方法。

而这些篡改可能会影响对象的内置属性或方法,从而导致对象的正常功能可能无法使用。

JavaScript在ECMAScript 5版本中新增了放置篡改对象的属性或方法的机制,共提供了以下三级保护方式:

1.禁止扩展:禁止为对象扩展新的属性或方法。

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

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


(1)禁止扩展

如果禁止为对象扩展新的属性或方法,需要修改对象属性的extensible为false。

  • Object.preventExtensions()方法用于设置指定对象不可扩展,即不能新增属性或方法。

  • Object.isExtensible()方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)。

    如下代码展示了禁止扩展的方法:

var obj = {};
//将对象设置禁止扩展
Object.preventExtensions(obj);
//新增属性或方法无效 -> 语法没有报错
obj.name = '猪猪侠';
console.log(obj);

/*
        Object.preventExtensions()方法新增属性
        * 结果 - 报错
        * 信息 - TypeError: Cannot define property name, object is not extensible
*/
Object.defineProperty(obj,'name',{
    value:'超人强'
});
console.log(obj)
复制代码

(2)密封对象

密封对象,就是指禁止为对象扩展新的属性或方法,并且禁止修改现有属性的描述符。

  • Object.seal()方法用于封闭一个对象,组织添加新属性并将所有现有属性标记为不可配置。当前属性的值只要可写就可以改变。
  • Object.isSealed()方法判断一个对象是否被密封。
var obj = {
    name : '猪猪侠'
};
console.log(Object.getOwnPropertyDescriptor(obj,'name'));
/*
       将该对象进行密封
         1、不能为该对象新增属性或方法
         2、不能修改该对象的属性或方法的描述符
           * configurable
           * enumerable
* */
Object.seal(obj);

console.log(Object.getOwnPropertyDescriptor(obj,'name'));
/*新增属性
obj.age=18;
console.log(obj);
//修改属性
obj.name='超人强';
console.log(obj);*/

/*Object.defineProperty(obj,'age',{
    value : 18
});*/

Object.defineProperty(obj,'name',{
    value : '超人强',
    writable:false, //表示不可修改
    // enumerable: false, 不可修改这两行,报错
    // configurable: true
});

console.log(Object.getOwnPropertyDescriptor(obj,'name'));

console.log(obj);

obj.name = '小菲菲';
console.log(obj);//{ name: '小菲菲' }
复制代码

冻结对象

冻结对象,就是指禁止对对象执行任何修改操作。

  • Object.freeze()方法用于冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改器已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。
  • Object.isFrozen()方法判断一个对象是否被冻结。

如下示例代码展示了冻结对象的方法:

var obj = {
    name : '猪猪侠'
};
//冻结对象
Object.freeze(obj);

obj.age=19;
console.log(obj);//{ name: '猪猪侠' }
obj.name = '超人强';
console.log(obj);//{ name: '猪猪侠' }

delete obj.name;
console.log(obj);//{ name: '猪猪侠' }

/*Object.defineProperty(obj,'age',{
    value:19
});
console.log(obj);//报错*/

//判断一个对象是否被冻结
console.log(Object.isFrozen(obj));//true
复制代码
文章分类
前端
文章标签