javascript --- > 属性描述符

从ES5开始,所有的属性都具备了属性描述符

var myObject = {
    a: 2
};

Object.getOwnPropertyDescriptor(myObject, "a");
//{
//    value:2,
//    writable: true,    // 可写
//    enumerable: true,    // 可枚举
//    configurble: true    // 可配置
//}

定义属性:(Object.defineProperty):

// Object.defineProperty
var myObject = {};

Object.defineProperty(myObject, "a", {
    value: 2,
    writable: true,
    configurable: true,
    enunmerable: true
});

myObject.a;    // 2

// 给myObject定义一个a属性,值为2,可写、可枚举、可配置

可写性(writable):

// writable
Object.defineProperty(myObject, "a", {
    value: 2,
    writable: false, // 不可写
    configurable: true,
    enumerable: true
})
myObject.a = 3;
myObject.a;   // 2

可配置(configurable):

// configurable
Object.defineProperty(myObject, "a", {
    value: 4,
    writable: true,
    configurable: false,    // 不可配置
    enumerable: true
}); 
Object.defineProperty(myObject, "a", {
    value: 6,
    writable: true,
    configurable: true,
    enumerable: true
});   // TypeError .. 对于confugirable为false的属性,不允许将其改为true

delete myObject                                                                                                                                                                                                                                                                                                                                                                .a ; // 删除无效 
myObject.a; // 2 

对象常量:

// 结合writable和configurable创建一个真正的常量属性
var myObejct = {};
Object.defineProperty(myObject, "FAVORITE_NUMBER", {
    value: 42,
    writable: false,
    configurable: false
});

禁止扩展:

// 禁止一个对象添加新属性 Object.preventExtensions()
var myObject={
    a: 2
};
Object.preventExtensions(myObject);

myObject.b = 3;
myObject.b; // undefined

Getter:

// getter是一个隐藏函数,会在获取属性值时调用
var myObject = {
    // 给a定义一个getter
    get a() {
        return 2;   // 在使用myObject.a时调用,返回2
    }
};
Object.defineProperty(
    myObject,
    "b",
    {
      // 给b设置一个getter
      get function () {return this.a * 2},    // 在使用myObject.b时回返回一个 2*a
      
      // 确保B会出现在对象的属性列表中
      enumerable: true
    }
};
myObject.a;  // 2
myObject.b;  // 4

Setter:

// 在调用对属性的赋值时,触发
// 一般与getter成对出现
var myObject = {
    // 给a定义一个getter
    get a() {
        return this._a_;
    },
    // 给a定义一个setter
    set a(val) {
        this._a_ = val * 2;
    }
};
myObject.a = 2;   // 赋值操作,触发setter
myObject.a;  // 4  // 读取操作,触发getter

检查对象中的属性:

// a in object
// hasOwnProperty
var myObject = {
    a: 2
};
("a" in myObject);  // true
("b" in myObject);  // false

myObject.hasOwnproperty("a");   // true
myObject.hasOwnproperty("b");   // false

// 注: in操作符会检查属性是否在对象及其 [[Prototype]]原型链中,hasOwnproperty()只会检查属性是否在myObject对象中(不会检查[[Prototype]]链).

遍历:

// forEach()会遍历数组中的所有值并忽略回调函数的返回值.
// every()会一直运行直到回调函数返回false
// some()会一直运行直到回调函数返回true
// for...in遍历对象是无法直接获取属性值的,因为它实际上遍历的是对象中的所有可枚举属性,你需要手动获取属性值.

// ES6新增for...of循环语法,来直接遍历值:
var myArray = [1, 2, 3];
for(var v of myArray) {
    console.log(v);
}


// 可以使用数组内置的@@iterator来看看它是如何工作的:
var myArray = [1, 2, 3];
var it = myArray[Symbol.iterator]();
console.log(it.next());   // {value: 1,done: false }
console.log(it.next());   // {value: 2,done: false }
console.log(it.next());   // {value: 3,done: false }
console.log(it.next());   // {done: true}


自定义迭代器:

// 给任何你想遍历的对象定义@@iterator,
var myObject = {
    a: 2,
    b: 3
};
Object.defineProperty( myObject, Symbol.iterator,{
    enumerable: false,  // 不可枚举
    writable: false,  // 不可写
    configurable: true, // 可配置
    value: function() {
        var o = this;  // this指代myObject.[{a:2},{b:3}]
        var idx = 0;
        var ks = Object.keys(o); // 获取元素值[2,3]
        return {
            next: function() {   // 返回一个next()方法. 使用obj.next()调用. 返回值和是否完成.
                return {
                    value: o[ks[idx++]],
                    done: (idx > ks.length)
                };
            }
        };
    }
});
// 手动遍历myObject
var it = myObject[Symbol.iterator]();
it.nexr();   // {value: 2, done: false}
it.next();   // {value: 3, done: false}
it.next();   // {value: undefined, done: true}

// 用for...of遍历myObject
for(var v of myObject) {
    console.log(v);
}

参考《你不知道的JavaScript》(上卷)P111~P124

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值