Object.defineProperty 介绍 | 少将全栈
  • 欢迎访问少将全栈,学会感恩,乐于付出,珍惜缘份,成就彼此、推荐使用最新版火狐浏览器和Chrome浏览器访问本网站。
  • 吐槽,投稿,删稿,交个朋友
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏少将全栈吧

Object.defineProperty 介绍

Web前端 admin 8年前 (2017-02-27) 2774次浏览 已收录 扫描二维码

Description

The Object.defineProperty() method defines a new property directly on an object, or modifies an existing property on an object, and returns the object.

描述

Object.defineProperty 方法为一个对象定义一个新属性或修改已经存在的属性,并返回当前对象。



语法

Object.defineProperty(obj, prop, descriptor)

参数说明

obj 对象

prop 属性名称

descriptor 属性的描述配置,包括值,默认undefined。可写(writable),枚举(enumerable)和配置(configurable),默认全是false,属性描述方法,get和set,默认是undefined

例一,默认定义方式:

// 为obj定义一个属性key,该属性不可写,不可枚举,和不可配置
var obj = {};
Object.defineProperty(obj, "key", {
    value: "static",
    configurable: false,
    enumerable: false,
    writable: false,
});
// 等效于
Object.defineProperty(obj, "key",{
    value: "static"
});

例二,两种定义方式:

// 两种方式定义属性值
var obj = {};
// 第一种方式
Object.defineProperty(obj, "a", {
    value: 37,
    wriable: true,
    configurable: true,
    enumerable: true
});
// 第二种方式
var bValue = 38;
Object.definedProperty(obj, "b", {
    get: function(){ return bValue; },
    set: function(newValue) { bValue = newValue; },
    configurable: true,
    enumerable: true
});
console.log(obj.a);                 //  37
console.log(obj.b);                 //  38
obj.a = 100;
obj.b = 111;                        
console.log(obj.a);                 //  100
console.log(obj.b);                 //  111
// 备注: 两种方式不能混合使用

例三,writable介绍:

// writable 是否可写,默认不可写
var obj = {};
Object.defineProperty(obj, "a", {
    value: 37, 
    writable: false
});
console.log(obj.a);               //  37
obj.a = 100;
console.log(obj.a);               //  37

例四,enumerable介绍:

// enumeration 是否可枚举,默认不可枚举
var obj = {};
Object.defineProperty(obj, "a", {value: "aaa", enumerable: true});
Object.defineProperty(obj, "b", {value: "bbb", enumerable: false});
Object.defineProperty(obj, "c", {value: "ccc", enumerable: false});
for(var key in obj){
    console.log("属性名称: " + key +  ",属性值:" + obj[key]);   // 属性名称: a,属性值:aaa
}
Object.keys(o);      //  ["a"]
obj.propertyIsEnumerable(’a’);    // true
obj.propertyIsEnumerable(’b’);    // false
obj.propertyIsEnumerable(’c’);    // false

例五,configurable介绍

//  configurable 属性是否可以被删除,默认不可以
var obj = {};
Object.defineProperty(obj, "a", {value: "aaa", configurable: false});
console.log(obj.a);    // aaa
delete obj.a;
console.log(obj.a);    // aaa

例六,简写时候等价效果

var obj = {};
obj.a = "aaa";
// 等价于
Object.defineProperty(obj, "a", {value: "aaa", configurable: true, enumerable: true, writable: true});
Object.defineProperty(obj, "a", {value: "aaa"});
// 等价于
Object.defineProperty(obj, "a", {value: "aaa", configurable: false, enumerable: false, writable: false});

例七,将赋值自动存储在一个数组中

function Archiver(){
    var temperature = null;
    var archiver = [];
    Object.defineProperty(this, "temperature", {
        get: function(){
            return temperature;
        },
        set: function(newVal){
            temperature = newVal;
            archiver.push({val: temperature});
        }
    });
    this.getArchiver = function(){
        return archiver;
    }
};
var arc = new Archiver();
arc.temperature = 10;
arc.temperature = 12;
arc.temperature = 15;
arc.getArchiver();    // [{val: 10}, {val: 12}, {val: 15}]

来自:http://www.iii66.cn/well/blog/show.html?id=1503e9048e6d5720cc6f440fb555ea01

喜欢 (0)
[🍬谢谢你请我吃糖果🍬🍬~]
分享 (0)
关于作者:
少将,关注Web全栈开发、项目管理,持续不断的学习、努力成为一个更棒的开发,做最好的自己,让世界因你不同。