资讯专栏INFORMATION COLUMN

JavaScript面向对象编程——Object类型

Crazy_Coder / 776人阅读

摘要:数据描述符具有以下可选值该属性对应的值。可以使任何有效的值数值,对象,函数。当且仅当该属性的为时,该属性才能出现在对象的枚举属性中默认为。冻结对象禁止对对象执行任何修改操作。张无忌冻结对象周芷若

Object类型 操作对象的属性 属性描述符

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

    // 表示创建一个空对象
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();// 构造函数调用
数据描述符

数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的。数据描述符具有以下可选值:
1.value;该属性对应的值。可以使任何有效的JavaScript值(数值,对象,函数 )。默认为undefined。
2.writable;当且仅当该属性的writable为true时,value才能被赋值运算符改变。默认为false。
3.configurable;当且仅当该属性的configurable为true时,该属性描述符才能够被改变,同时该属性也能从对应的对象上删除。默认为false。
4.enumerable;当且仅当该属性的enumerable为true时,该属性才能出现在对象的枚举属性中默认为false。

存取描述符

存取描述符是由getter-setter函数对描述的属性。存取描述符具有以下可选值:
1.get;给属性提供getter的方法,如果没有getter则为undefined。当访问该属性是,该方法会被执行,方法执行是没有参数传人,但是会传入this对象。
2.set;给属性提供setter的方法,如果没有setter则为undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。
3.configurable;当且仅当该属性的configurable为true是,该属性描述符才能够改变,同时该属性也能从对应的对象上被删除 。默认为false。
4.enumerable;当且仅当该属性的enumerable为true时,该属性才能够出现对象的枚举属性中。默认为false。

获取属性描述符
  通过定义对象(属性或方法)这种方式
     属性默认都是数据描述符
 
var obj = {
    name : "张无忌"
}

    使用Object.getOwnPropertyDescriptor()方法获取指定属性的描述符
    Object.getOwnPropertyDescriptor(obj,prop)
     obj - 表示指定属性对应的目标对象
     prop - 表示获取描述符的目标属性名称
     返回值 - 其属性描述符对象
  
var result = Object.getOwnPropertyDescriptor(obj,"name");
console.log(result);
设置属性描述符
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);
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);// 80
// 删除age属性值
delete obj.age;
console.log(obj.age);// undefined
属性描述符的存取器

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

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;// 由于变量为初始化,调用时可能结果为 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);// 赵敏
防篡改对象 防篡改是什么

定义的对象默认在任何时候、任何位置,无论有意义的还是没有意义的都可以修改独享的属性或方法.而这些篡改可能会影响对象的内置属性或方法,从而导致对象的正常功能无法使用。
JavaScript在ECMAScript5版本中新增了防止篡改对象的属性或方法的机制,功提供了一下三级保护方式:
1.禁止扩展;禁止对对象扩展心的属性或方法
2.密封对象;禁止扩展心的属性或方法,禁止配置现有的属性或方法的描述符,允许读写属性的值。
3.冻结对象;禁止对对象执行任何修改操作。

禁止扩展

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

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);
密封对象

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

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, // 表示不可修改
    configurable : true,
    enumerable : false
});

console.log(Object.getOwnPropertyDescriptor(obj, "name"))

console.log(obj);

obj.name = "赵敏";
console.log(obj);
冻结对象

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

var obj = {
    name : "张无忌"
}
// 冻结对象
Object.freeze(obj);

/*obj.age = 18;
console.log(obj);
obj.name = "周芷若";
console.log(obj);
delete obj.name;
console.log(obj);*/

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

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

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

相关文章

  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你的“对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    李昌杰 评论0 收藏0
  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你的“对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    Lyux 评论0 收藏0
  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你的“对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    AaronYuan 评论0 收藏0
  • JavaScript设计模式与开发实践 | 01 - 面向对象JavaScript

    摘要:在中,并没有对抽象类和接口的支持。例如,当对象需要对象的能力时,可以有选择地把对象的构造器的原型指向对象,从而达到继承的效果。本节内容为设计模式与开发实践第一章笔记。 动态类型语言 编程语言按数据类型大体可以分为两类:静态类型语言与动态类型语言。 静态类型语言在编译时已确定变量类型,动态类型语言的变量类型要到程序运行时,待变量被赋值后,才具有某种类型。 而JavaScript是一门典型...

    suxier 评论0 收藏0
  • 面向对象JavaScript(如何一步步成为js高手)

    摘要:虽然,也是面向疾苦的语言,但是,它和静态类型语言的面向接口编程不一而足。对象对他自己的行为负责,其他对象不关心它的内部实现。 ‘工欲善其事,必先利其器’,在深入学习JavaScript之前,我认为我们很有必要了解以下,JavaScript这门面向对象的动态语言到底是一门什么样的语言。 JavaScript vs 其他面向对象语言 它没有使用像Java等传统的面向对象语言的类式继承,而...

    peixn 评论0 收藏0
  • JavaScript中的面向对象object-oriented)编程

    摘要:对象在中,除了数字字符串布尔值这几个简单类型外,其他的都是对象。那么在函数对象中,这两个属性的有什么区别呢表示该函数对象的原型表示使用来执行该函数时这种函数一般成为构造函数,后面会讲解,新创建的对象的原型。这时的函数通常称为构造函数。。 本文原发于我的个人博客,经多次修改后发到sf上。本文仍在不断修改中,最新版请访问个人博客。 最近工作一直在用nodejs做开发,有了nodejs,...

    JerryZou 评论0 收藏0

发表评论

0条评论

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