JS面向对象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]


//当以非构造函数形式被调用时,Object等同于new Object()
var obj4 = Object();//函数调用
var obj5 = new Object();//构造函数调用

属性描述符

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

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

{
	value: '卧龙学苑',
	writable: false,
	enumerable: true,
	configurable: false,
	get: undefined,
	set: undefined
}

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

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

存取描述符是由getter-setter函数对描述的属性。
在这里插入图片描述

获取属性描述符

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

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

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

代码:

/*
    通过定义对象(属性或方法)这种方式
      属性默认都是数据描述符
*/

var obj = {
    name : '肖德硕'
}
/*
    使用Object.getOwnPropertyDescriptor()方法获取指定属性的描述符
    Object.getOwnPropertyDescriptor(obj,prop)
      obj - 表示指定属性对应的目标对象
      prop - 表示获取描述符的目标属性名称
     返回值 - 其属性描述符对象
*/

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

效果:
在这里插入图片描述

设置属性描述符

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

Object.defineProperty(obj,prop,desciptor)
  • obj:要在其上定义属性的对象
  • prop:要定义或修改的属性的名称
  • descriptor:将别定义或修改的属性描述符。
  • 返回值:被传递给函数的对象

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

Object.defineProperties(obj,props)
  • obj:要在其上定义属性的对象
  • props:要定义其可枚举属性或修改的属性描述符的对象
  • 返回值:被传递给函数的对象

设置属性运算符value

value:表示目标属性对应的值。

可以是任何有效的JavaScript值(数值,对象,函数等)。

默认为undefined

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);

//一旦属性的值是不可修改的 - 如果执行修改操作时 -> 没有语法报错,但是无效
obj.age = 80;
console.log(obj.age);//18

obj.job = '帅哥';
var result2 = Object.getOwnPropertyDescriptor(obj,'job');
console.log(result2);

结果:
在这里插入图片描述

设置属性运算符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,
    weitable : false
});
console.log(obj.age);//18
//修改age属性值
obj.age = 80;
console.log(obj.age);//80
//删除age属性值
delete obj.age;
console.log(obj.age);//18

效果:
在这里插入图片描述

设置属性运算符configurable

configurable:Boolean值,表示目标属性的描述符是否可以被修改。

当且仅当该属性的configurable为true时,该熟悉描述符才能够被改变,同时该属性也能从对应的对象上被删除。

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

//修改现有属性
Object.defineProperty(obj,'name',{
    value : '小肖',
    writable : false,   //控制当前属性是否可被修改
    configurable : false    //控制当前属性是否可被删除
});
console.log(obj.name);//小肖
//修改name属性值
obj.name = '萧萧';
console.log(obj.name);//小肖

//删除name属性值
delete obj.name;
console.log(obj.name);//小肖

效果:
在这里插入图片描述

设置属性运算符enumerable

enumerable:Boolean值,表示目标属性是否可遍历

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

默认为false

如果对象的属性的enumberable的值为false,以下三种操作取不到该属性:

  • for……in语句
  • Object.keys()方法
  • JSON.dtringify()方法

代码:

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);

效果:
在这里插入图片描述

属性描述符的设置方式

对象的属性除了可以直接定义以外,还可以使用存取器进行定义。

其中setter为存值函数,使用属性描述符中的set;

getter为取值函数,使用属性描述符中的get

代码:

var obj = {
    sayMe : function(){
        console.log('this is function');
    }
}
var result = Object.getOwnPropertyDescriptor(obj,'sayMe');
console.log(result);

Object.defineProperty(obj,'sayMe',{
    value : function(){
        console.log('this is new function');
    },
    writable : false
});
obj.sayMe();

obj.sayMe = function () {
    console.log('这是张无忌');
}
obj.sayMe();

效果:
在这里插入图片描述

属性描述符存取器(一)

代码:

var obj =  {
    name : '肖德硕'
}

var value;//全局变量

Object.defineProperty(obj,'name',{
    //获取指定的属性值
    get : function () { //当获取或访问当前属性时,会调用get方法
        console.log('this is get function');
        /*
            类似于数据描述符中的value
                get方法在被调用时,不能传递任何参数
                get方法在被调用时,允许传递this关键字
                  this - 表示当前的目标对象
         */
        return value;
    },

    /*
        set方法用于定义当前目标属性的修改作用
          该方法接受唯一的一个参数 -> 作为当前目标的新的值
          通过属性修改操作指定的新的值 -> 作为形参对应的实参
    */
    set : function (newValue) {
        console.log('this is set function:' + value);
        /*
            set方法在被调用时,允许传递this关键字
                  this - 表示当前的目标对象(不能调用对象的当前目标属性)
        * */
        value = newValue;
    }
});
console.log(obj.name);//undefind

obj.name = '小肖';
console.log(obj.name);//小肖

效果:
在这里插入图片描述

属性描述符存取器(二)

代码:

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

console.log(obj.attr);//启嘉班
obj.attr = 100;

效果:
在这里插入图片描述

防篡改对象

防篡改是什么

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

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

  1. 禁止扩展:禁止为对象扩展新的属性或方法
  2. 密封对象:禁止扩展新的属性或方法,禁止配置现有的属性或方法的描述符,仅允许读写属性的值。
  3. 冻结对象:禁止对对象执行任何修改操作。

禁止扩展

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

  • Object.preventExtensions()方法用于设置指定对象不可扩展,即不能新增属性或方法。
  • Object.isExtensible()方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)。

代码:

var obj = {};
//将对象设置禁止扩展
Object.preventExtensions(obj);
//新增属性或方法无效 -> 语法没有报错
obj.name = '肖德硕';
console.log(obj);
/*
    Object.defineProperty()方法新增属性
      结果 - 报错
      信息 - TypeError: Cannot define property name, object is not extensible
* */
Object.defineProperty(obj,'name',{
    value : '小肖'
});
console.log(obj);

/*
    Object.isExtensible(obj)方法
        作用 - 用于判断指定目标对象是否可扩展
        返回值
          true - 表示指定目标对象是扩展的
          false - 表示指定目标的对象是不可扩展的
* */
var result = Object.isExtensible(obj);
console.log(result);

效果:
在这里插入图片描述

密封对象

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

  • 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'));

//将该对象进行密封
Object.seal(obj);
/*
//新增属性
obj.age = 18;
console.log(obj);//{ name: '肖德硕' }

//修改属性
obj.name = '小肖';
console.log(obj);//{ name: '小肖' }
 */

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

Object.defineProperty(obj,'name',{
    value : '小肖',
    writable : false,   //表示不可修改
    configurable : true,
    enumerable : false
});

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

console.log(obj);

效果:
在这里插入图片描述

冻结对象

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

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

代码:

var obj = {
    name : '肖德硕'
}
//冻结对象
Object.freeze(obj);

// obj.age = 18;
// console.log(obj);//{ name: '肖德硕' }
// obj.name = '小肖';
// console.log(obj);//{ name: '肖德硕' }
// delete obj.name;
// console.log(obj);//{ name: '肖德硕' }

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

效果:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页